Backbone.js 模块化设置答案

【问题标题】：Backbone.js modular setupBackbone.js 模块化设置
【发布时间】：2012-12-19 16:56:01
【问题描述】：

我是骨干新手，我在这里寻求一些帮助，以了解我将如何构建我当前的 webapp 项目。我正在为服务器开发一个模块化管理面板。面板的每个“页面”都应该是一个打包的“模块”，包括控制器、模型和视图。

面板将包含一个初始加载的主布局视图，以及一个基本导航。当用户单击导航上的链接时，页面会通过 AJAX 加载到布局中。（如果这听起来很愚蠢/有理由不这样做，请告诉我:)）

由于其他人也会开发这些页面，而且它们是模块化的，所以我不知道我将在通过 AJAX 加载的页面中看到哪些模型、视图和控制器。

我如何最好地使用骨干做到这一点？

我特别想知道如何动态扩展 Backbone 模型等，以及如何管理（例如）用户离开页面和/或稍后重新访问它。

Backbone 是否提供了我可以使用的东西，我是否需要一起破解一些东西，有没有更好的方法来做我缺少的事情？

【问题讨论】：

标签： backbone.js modularity

【解决方案1】：

您对这些问题的思考听起来非常正确。使您的 UI 组件尽可能自包含。观看此10 min video 以获取有关 UI 组件最佳实践的更多信息。

如果您对 JavaScript 应用程序开发的其他重要问题感兴趣，请查看我发布的 BoilerplateJS 参考架构以分享我的经验。它包含与您描述的类似的示例应用程序（带有组件激活的菜单）。

我对您的 UI 组件激活、停用的建议是：

不要删除/创建 DOM 组件。与隐藏/显示重用，因为即使从 DOM 中删除，您的元素也会在内存中重新定位
尽量减少在客户端保留“状态”信息。当用户重新访问组件时，使用服务器调用刷新它，然后使其可见（使用服务器作为状态信息的唯一真实性）。

有关详细信息，请参阅 BoilerplateJS 示例组件实现。我知道很少有人将它与 BackboneJS 一起使用（目前它与 knockoutJS 一起提供）。我们将在一周后发布一个使用 BackboneJS 的 v0.2 示例。

【讨论】：

BoilerplateJS 似乎是个不错的处事方式，谢谢分享！
在 BoilerplateJS 上，我们添加了一个使用 BackboneJS for MVC 的示例组件。查看boilerplatejs.org/samples/productsuite/index.html#todo 处的示例 TODO 组件。你可以在 GitHub 上找到提交的代码。

【解决方案2】：

与 Backbone 结合使用的常见模块化脚本加载框架是 require.js。这可能是您正在寻找的东西。 Require.js 都是关于 AMD 模块、异步模块的。通常每个模型、集合、视图都是它自己的模块，它定义了特定模块所需的依赖关系，然后根据需要加载这些模块。它特别适合大型项目，您需要在应用程序的不同点将大量单独的部分混合在一起。

您当然可以在单个模块中组合多个主干元素（通常我将其保留给视图和仅与父视图一起使用的特定子视图），但这完全取决于您。

使用 Backbone，通常的目的是创建单页面应用程序 - 这意味着所有页面脚手架通常被包装为单个文件并在开始时完全加载到客户端。然后通过 ajax 调用每个页面的数据，并在用户导航和加载应用程序的不同方面时填充数据。这是您在描述中的意图吗？

如果您要加载从服务器单独抓取的不同页面，那么我不确定 Backbone 是否是答案。还有其他服务器端 MVC 框架可以帮助实现这一目标。

这通常涉及如何将 Backbone 用于此类事情。

至于如何扩展 Backbone 模型等，Backbone 使用 Underscore 作为依赖项，并且 underscore 提供了一个很好的 _.extend() 函数，可以轻松地以几乎任何你想要的方式扩展所有对象。覆盖默认功能，加入 mixins，就 Backbone 而言，这一切都非常轻松。作为一个框架，Backbone 在改变、修改和自定义每一点和部分方面都非常令人满意。

对于处理用户访问和重新访问页面，Backbone.router 允许您创建 URL，这些 URL 不仅指向应用程序中的特定“页面”，而且还可以执行需要执行才能到达那里的任意代码。像登录用户访问“mysite/#account”之类的东西会触发路由器加载某些脚本，这些脚本会显示该特定视图以及可能fetch() 为用户启动并运行该视图所需的数据。

我不确定是否有资源可以为您提供某种基本结构。我所知道的大多数经验都倾向于通过“Todo List”之类的基本教程并从那里开始。我不确定您对 javascript 或一般编程的经验水平如何，但是当我几乎一无所知时，我从 Backbone 和 require 开始。只有对 JSON 是什么的模糊概念和对 HTTP 的低层次理解，例如“它就是获取网页的东西”。也就是说，我认为 Backbone 对我来说很容易上手，它加深了我对整个客户端 RESTful 类型应用程序结构的了解。

“待办事项列表”应用程序有一个非常好的列表，有许多不同的风格，例如 Backbone 和 Knockout 等等。在决定一个框架时，我基本上通过代码比较了所有可用的不同框架并选择了 Backbone，因为它似乎对我来说最有意义。我不后悔。这很有趣，我认为最好的方法是尝试一些演示教程。

【讨论】：

感谢您的广泛回答。 “如果您希望加载从服务器单独抓取的不同页面，那么我不确定 Backbone 是否是答案。还有其他服务器端 MVC 框架可以帮助实现这一目标。”你能指出我所说的框架吗？
我没有使用其中的大部分，所以我不能保证它们，但你可以浏览这个列表并查看其中的一些 PHP MVC Frameworks。 CakePHP 和 Codeigniter 似乎以简单易用而著称。我之前使用过 Zend 框架的一部分，但没有使用整个框架，它有一个非常广泛且经过深思熟虑的库。

【解决方案3】：

看看Marionette 或Chaplin。两者都建立在 Backbone 之上，并提供了一种结构化的方式来使用 Backbone 构建更大的应用程序。

【讨论】：

【解决方案4】：

这里是使用backbonejs将应用程序组织为模块的教程

http://backbonetutorials.com/organizing-backbone-using-modules/

【讨论】：