javascript - 将变量分配给 Backbone.js 中的窗口对象

Question

我正在开发一个大型 Backbone.js 应用程序。代码采用 require.js 模块化结构。现在我看到很多主干代码和教程都是这样做的:

window.app = ( window.app || {} );

在他们将模型定义和 Collection 实例分配给该全局对象之后，如下所示:

Task = Backbone.Model.extend({ /*...*/ });
Tasks = Backbone.Collection.extend({ /*...*/ }); 

window.app.Task = Task;
window.app.Tasks = new Tasks();
// do this with all your models and collections

我喜欢这种方法，因为它很简单，而且不必处理何时何地实例化一个集合。但是，首先使用 require.js 将代码分成小块，然后将所有代码一起分配给全局变量(除了全局变量在 javascript 中通常是错误的代码样式之外)似乎是错误的。

那么您对此有何看法？这种方法的优缺点是什么？您如何处理 Backbone 中的对象？

Answer 1

首先，污染全局命名空间并不是什么大问题，因为您可以将所有模型包装在自己的命名空间中:

app = (app || {} );
app.Task = Backbone.Model.extend({ /*...*/ });
app.Tasks = Backbone.Collection.extend({ Model:app.Zask }); 

当涉及到 requirejs 时，它取决于项目的大小。我认为对于较小的项目你可以不用。使用 requirejs 的好处不是防止命名空间污染，而是更好的可维护性，因为你总是看到模块的依赖关系。您可以编写更好的单元测试，因为您可以测试模块和 mock out all its dependencies .因此，我们将一个大型 Backbone 应用程序从如上示例的结构重建为如下所示:

模型/Task.js

define(function () {
  return Backbone.Model.extend({ /*...*/ });
});

collections/Tasks.js

define([models/Task], function (Task) {
  return Backbone.Collection.extend({ Model:app.Task }); 
});

app.js

define([collections/Tasks], function (Tasks) {
  var tasks = new Tasks();
  tasks.fetch();
});