如何将 JavaScript MVC 代码组织到 AMD 模块中？

Question

我正在构建一个具有各种可视化组件的 Web 应用程序，由 Backbone.js 模型和视图组成：

“PopulationVisualization 组件”可能具有：

• 一个主模型 - 存储组件的状态
• 几个 Backbone 视图（timesliderView、legendView 等） .) - 侦听模型上的更改

所有这些组件都依赖于外部 dataManager 和 dataSource 对象，但否则它们应该是解耦的。

在给定页面上，我想实例化 PopulationVisualization 组件的实例。我还想监听该组件的主模型中的更改，以便我可以在 URL 中序列化其状态。

1) 如果我尝试采用 AMD 模块模式，会是什么样子？
2) 我会制作 PopulationVisualization 组件的一个模块还是多个模块？
3) 我是否会将模块级方法公开为 API，或者是否提供对内部模型和视图的直接操作？

谢谢。

Answer 1

为了回答您的问题，这是我的建议，回答所有三个问题：

模块应该尽可能小，因此我将为每个视图创建一个新模块，一个用于模块，一个用于序列化逻辑。然后，我将创建一个将所有这些联系在一起的模块，以便外部代码不必处理模型、视图或序列化。

---

这是我第一次尝试这样的事情：

// components/populationVisualization/Model.js
define(function (require, exports, module) {
  return Backbone.Model.extend({ /* ... */});
});

// components/populationVisualization/views/Timeslider.js
define(function (require, exports, module) {
  return Backbone.View.extend({ /* ... */});
});

// components/populationVisualization/views/Legend.js
define(function (require, exports, module) {
  return Backbone.View.extend({ /* ... */});
});

// components/populationVisualization/serializer.js
define(function (require, exports, module) {
  exports.setupSerialization = function (model) {
    // ...
  };
});

// components/populationVisualization.js
define(function (require, exports, module) {
  var Model = require("./populationVisualization/Model");
  var TimesliderView = require("./populationVisualization/views/Timeslider");
  var LegendView = require("./populationVisualization/views/Legend");
  var serializer = require("./populationVisualization/serializer");

  exports.createAndRender = function (modelParams, $el) {
    var model = new Model(modelParams);
    serializer.setupSerialization(model);

    var timesliderView = new TimesliderView({ model: model });
    var legendView = new LegendView({ model: model });

    $el.append(timesliderView.el);
    $el.append(legendView.el);
  };
});

在应用程序的其他地方，您只需 require("components/populationVisualization") 并使用适当的参数调用该模块的 createAndRender 方法。