你如何构建你的 Backbone + RequireJS 应用程序？答案

【问题标题】：How do you structure your Backbone + RequireJS applications?你如何构建你的 Backbone + RequireJS 应用程序？
【发布时间】：2012-08-21 13:41:43
【问题描述】：

在将我的 Backbone 对象组织到 AMD（用于中型到大型应用程序）中时，我一直在努力在可重用性和复杂性之间取得适当的平衡

(A) 每个 Backbone 对象（模型、视图等）都应该在它们自己的模块中吗？ (B) 相关的 Backbone 对象是否应该在同一个 AMD 模块中？（即：同一模块定义中的PersonModel、PersonCollection、PersonView对象）

选项 (A) 似乎允许最大的灵活性和可重用性，但由于（可能）大量的文件，也是最复杂的。虽然选项 (B) 可能更容易管理事物，但灵活性较差，并且确实难以进行单元测试。

其他人是（或已经）如何构建这些东西的？

【问题讨论】：

我不确定这个问题是否有正确答案，尽管我的偏好是让每个模型、视图和集合都有自己的模块。是的，您将拥有大量文件（不要忘记您的模板文件！:-) 但这对我来说并不是什么大问题。我只是确保我的文件名可以让我知道它们所在的更大上下文，并将所有相关文件放入适当的文件夹中。在大约 250 行代码之后，无论如何都很难阅读，因此每个 Backbone 模型、视图、集合 1 个模块最终变得更容易管理。
我刚刚尝试了 Backbone。但我认为文件数量对性能很重要（文件过多和往返服务器的次数会猛增）。所以，也许你可以尝试保持模块化，当你为生产构建时，使用某种“编译器”（可能是闭包？）来减少和组合 JS 文件的大小。
Helios：RequireJS 可以做到这一点。 requirejs.org/docs/optimization.html

标签： backbone.js structure requirejs

【解决方案1】：

我对 requirejs 的好处是它允许您将物理文件抽象为结构化的命名空间。您可以采用方法（A）并在自己的文件中创建每个主干类，然后创建一个“命名空间”模块将所有相关类粘合在一起。

// Suppose you have PersonView.js, PersonCollectionjs, PersonModel.js as modules
// create a Person module to function as namespace
define(["PersonModel", "PersonCollection", "PersonView"], function(model, collection, view) {
     return {
        Model: model,
        Collection: collection,
        View: view
     };  
});

这将模块组织在自己的文件中，并为您提供了一些灵活性，可以为每个类编写一个模块，而无需您为应用程序的其余部分公开此组织（我真的不喜欢写 require("PersonView", "PersonModel" ... )每次我需要使用该人的对象时，消费者声明对“命名空间”而不是独立类的依赖项会更容易和更清晰）。

【讨论】：

感谢 devundef - 我也在玩弄这个想法。这似乎对我当前的实现最有意义。这样，对于“消费者”来说，这会稍微简化一些，但仍保持模块化。

【解决方案2】：

对于大中型主干项目，我更喜欢使用 requirejs，并为每个模型、集合和视图使用单独的模块。我还为 requirejs 使用了“文本”插件，因此我可以像加载任何其他模块一样加载下划线模板。对我来说，这似乎是管理大型项目的最明智的方式，而且我从未真正对拥有的文件数量感到不知所措。

+1 在将您的应用推送到生产环境时使用 requirejs 优化器。效果很好。 http://requirejs.org/docs/optimization.html

【讨论】：

【解决方案3】：

我刚刚发布了一个开源工具包，它希望能像帮助我一样帮助其他人。它是许多开源工具的组合，可为您提供开箱即用的 requirejs 主干应用程序。

它提供单个命令来运行：dev web server、jasmine 单浏览器测试运行器、jasmine js-test-driver 多浏览器测试运行器，以及 JavaScript 和 CSS 的连接/缩小。它还输出应用程序的未缩小版本以进行生产调试，预编译您的车把模板，并支持国际化。

无需设置。它只是工作。

http://github.com/davidjnelson...

【讨论】：

很酷 - 但你忘了提到项目的名称 :-) 除非你在谈论 Yeomen。