Question

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

“PopulationVisualization组件”可能例如：

主要模型 - 存储组件的状态
几个Backbone视图（timesliderView，legendView等） - 监听模型上的更改

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

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

1）如果我尝试采用AMD模块模式，这会是什么样子？ 2）我会创建一个或几个人口可视化组件的模块吗？ 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方法。

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

1 个答案: