How to do MVC in ES6 javascript?

Question

In ES5 I create a Model-View-Controller structure by using IIFEs and reveal module pattern.

var model = function () { ... }()
var view = function () { ... }()
var controller = function (model, view) { 
    view.functionname(var one);
    ......
}(model, view)

The new block scope {} in ES6 can replace IIFEs, but how we call the functions/methods of the model/view from the controller ?

To combine multiple javascripts in ES5 and avoid naming collision I use an expression:
```
;( code ...)
```

How can be this done in ES6 ?

view.function(var one); is invalid JS. ;( code ...) does not avoid naming collision. It may solve issues with automatic semi-colon insertion. Not sure what you are asking. Also, limit your question to one question. — trincot
– trincot, Commented Jun 15, 2017 at 10:19
Why do you think calling view.functionname(…) becomes something else in ES6? — Bergi
– Bergi, Commented Jun 15, 2017 at 10:36
I updated the code, it was just as a placeholder, because I wanted to understand the concept; (code) I just wanted to say that I force the evaluation of what is inside — user3541631
– user3541631, Commented Jun 15, 2017 at 10:38

Bergi · Accepted Answer · 2017-06-15 10:48:49Z

1

The new block scope in ES6 can replace IIFEs

Not really. It can replace IIFEs that were merely introducing scope, but it cannot replace the module pattern - a block has no return value. Also it doesn't take any arguments. You could just use global variables:

var model, view, controller;
{
    model = {…};
}
{
    view = {…};
}
{
    let one = …;
    view.functionname(one);
    controller = {…};
}

But honestly that's quite weird¹. There's no reason not to use the exact same revealing module pattern that we know since ES3.

_{1: A viable alternative would be ES6 modules, which allow circular dependencies and have better syntax for all this}

answered Jun 15, 2017 at 10:48

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Forivin · Accepted Answer · 2017-06-15 10:34:09Z

1

Maybe something like this?

class View {
    exampleMethod() {
        console.log("view's example method called")
    }
}

class Model {
    exampleMethod() {
        console.log("model's example method called")
    }
}

class Controller {
    constructor(view,model) {
        this.view = view
        this.model = model
        console.log("Test")
    }
    exampleMethod() {
        this.view.exampleMethod()
        this.model.exampleMethod()
    }
}

const myView = new View()
const myModel = new Model()

const myController = new Controller(myView,myModel)
myController.exampleMethod()

To avoid name collision in ES6 you could wrap everything into

(()=>{
    // Code...
})()

edited Jun 15, 2017 at 10:34

answered Jun 15, 2017 at 10:19

Forivin

15.8k31 gold badges121 silver badges219 bronze badges

Collectives™ on Stack Overflow

How to do MVC in ES6 javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related