Question

我正在使用Model-View-Controller框架来构建我的文件，以实现可读，可重用和可重构的目的。

我的目标是在使用一个类时从两个单独的类调用方法。在实践中;我想从Model.js访问文件View.js和Controller.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模式以调用方法

1 个答案: