如何在 ES6 javascript 中做 MVC？答案

【问题标题】：How to do MVC in ES6 javascript?如何在 ES6 javascript 中做 MVC？
【发布时间】：2017-11-17 18:59:13
【问题描述】：

在 ES5 中，我使用 IIFE 创建了一个模型-视图-控制器结构并展示了模块模式。

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

ES6 中新的块作用域 {} 可以替代 IIFE，但是我们如何从控制器调用模型/视图的函数/方法呢？

为了在 ES5 中组合多个 javascript 并避免命名冲突，我使用了一个表达式：
```
;( code ...)
```

在 ES6 中如何做到这一点？

【问题讨论】：

view.function(var one); 是无效的 JS。 ;( code ...) 不能避免命名冲突。它可以解决自动分号插入的问题。不知道你在问什么。此外，将您的问题限制在一个问题上。
为什么你认为在 ES6 中调用 view.functionname(…) 变成了别的东西？
我更新了代码，它只是一个占位符，因为我想理解这个概念；（代码）我只是想说我强制评估里面的内容

标签： javascript ecmascript-6 es6-class es6-modules

【解决方案1】：

ES6 中新的块作用域可以替代 IIFEs

不是真的。它可以替代仅仅引入作用域的 IIFE，但它不能替代模块模式——一个块没有返回值。它也不需要任何论据。您可以只使用全局变量：

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

但老实说，这很奇怪¹。没有理由不使用自 ES3 以来我们所知道的完全相同的揭示模块模式。

_{1：一个可行的替代方案是 ES6 模块，它允许循环依赖并为所有这些提供更好的语法}

【讨论】：

【解决方案2】：

也许是这样的？

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()

为避免 ES6 中的名称冲突，您可以将所有内容包装到

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

【讨论】：