0

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

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

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

所有这些组件都依赖于外部数据管理器和数据源对象，否则它们应该是解耦的。

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

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

谢谢。

4

1 回答 1

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

于 2012-02-08T05:23:19.433 回答