在 ES6 中应用 MVC 模式来调用方法

Question

我正在使用模型-视图-控制器框架来构建我的文件，以达到可读、可重用和可重构的目的。

我的目标是在使用一个 class 时从两个单独的 class 调用方法。在实践中;我想从 Controller.js.

访问文件 Model.js 和 View.js 中的方法

以前在 ES5 中我有一个名为 app.js 的文件，它使用了 IIFE 方法：

var View = (function(){

   dump(){
     console.log('Hello World');
   }

 });

var Model = (function(){
  // Code goes here
});

 var Controller = (function(viewCtrl, viewCtrl){

   viewCtrl.dump(); // Invoke method from View

 })(View, Model);

如上所示，我也想在 ES6 中做类似的事情。

import View from './View';
import Model from './Model';

class Controller {

   dump(){
      return viewCtrl.dump(); 
   }

   init(){
      console.log('Application has started'); 
      // Make a new object of the class { View, Model }
      let view = new View();
      let model = new Model(); 
   }

}

export default Controller;

在我的main.js中：

import Controller from './Controller';

// Make a new object of the class Controller
let controller = new Controller(); 


// Instantiate App
controller.init(); 

console.log(
   controller.dump()
);

但是在 ES6 中这样做我在 main.js 中得到 error: ReferenceError: viewCtrl is not defined。

我在想也许可以将 View.js 和 Model.js 作为参数传递给 Controller.js 中的构造函数以声明它们。但我想这可能是一个看起来更干净的更好的解决方案。

所以我主要寻找的是使用 ES6 应用 MVC 模式，有什么建议吗？

Answer 1

将 View 和 Model 的实例传递给 Controller 的构造函数是一个干净的解决方案，因为这将满足依赖注入模式。这样您就可以从外部更改实例，从而使 Controller 可测试。

在 View 和 Model 的情况下，您可以将它们作为实例导出，而不是像

这样的类

View.js:

export default new View();

Controller.js:

import view from "./View";
...
view.dump()

使用这种方式，您可以省去手动将模型和视图传递给 Controller 的工作，但这也意味着您失去了测试 Controller 或更改它的某些部分（如 View）的能力。由于这是 MVC 模式的最大优点之一，我不建议导入单例。相反，我建议使用构造函数注入 View 和 Model。

在 ES6 中应用 MVC 模式来调用方法

Apply MVC pattern in ES6 for invoking methods

model-view-controller

iife

ecmascript-6