如何将我的 JavaScript MVC 代码组织到 AMD 模块中？答案

【问题标题】：How to organize my JavaScript MVC code into AMD modules?如何将我的 JavaScript MVC 代码组织到 AMD 模块中？
【发布时间】：2011-11-25 11:38:32
【问题描述】：

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

“PopulationVisualization 组件”可能具有例如：

一个主模型 - 存储组件的状态
多个 Backbone 视图（timesliderView、legendView 等） - 监听模型的变化

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

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

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

谢谢。

【问题讨论】：

标签： backbone.js modularity requirejs js-amd

【解决方案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 方法。

【讨论】：