主干.js 的目的是什么？

Backbone.js 基本上是一个超级轻量级的框架，它允许您以 MVC（模型、视图、控制器）方式构建 Javascript 代码，其中...

模型是检索和填充数据的代码的一部分，

View 是这个模型的 HTML 表示（视图随着模型的变化而变化，等等）

和可选的 Controller，在这种情况下，您可以通过 hashbang URL 保存 Javascript 应用程序的状态，例如：http://twitter.com/#search?q=backbone.js

我在 Backbone 中发现的一些优点：

不再有 Javascript Spaghetti：代码被组织并分解为语义上有意义的 .js 文件，这些文件随后使用 JAMMIT 进行组合

不再需要 jQuery.data(bla, bla)：无需将数据存储在 DOM 中，而是将数据存储在模型中

事件绑定才有效

非常有用的下划线实用程序库

骨干.js 代码有据可查，值得阅读。让我看到了一些 JS 代码技术。

缺点：

我花了一些时间来思考它并弄清楚如何将它应用到我的代码中，但我是一个 Javascript 新手。

这是一组关于使用 Backbone 和 Rails 作为后端的精彩教程：

CloudEdit：使用 Rails 的 Backbone.js 教程：

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

ps 还有一个很棒的 Collection 类，可以让你处理模型的集合并模仿嵌套模型，但我不想从一开始就混淆你。

---

如果您要在浏览器中构建复杂的用户界面，那么您可能会发现自己最终发明了构成 Backbone.js 和 Sammy.js 等框架的大部分部分。所以问题是，你是否在浏览器中构建了足够复杂的东西以值得使用它（所以你最终不会自己发明同样的东西）。

如果您计划构建的内容是 UI 定期更改其显示方式但不去服务器获取整个新页面，那么您可能需要 Backbone.js 或 Sammy.js 之类的东西。类似的主要例子是谷歌的 GMail。如果您曾经使用过它，您会注意到当您第一次登录时它会下载一大块 HTML、CSS 和 JavaScript，然后一切都在后台进行。它可以在阅读电子邮件和处理收件箱之间移动，然后再次搜索并返回所有这些，而无需要求呈现一个全新的页面。

正是这些框架擅长于使开发更容易的那种应用程序。没有它们，您要么最终将一组不同的独立库组合在一起以获取部分功能（例如，用于历史管理的 jQuery BBQ、用于事件的 Events.js 等），要么您最终将自己构建一切并且还必须自己维护和测试所有内容。相比之下，像 Backbone.js 这样的东西有成千上万的人在 Github 上观看它，数百个人们可能正在研究它的分叉，并且已经在 Stack Overflow 上提出和回答了数百个问题。

但是，如果您计划构建的内容不够复杂，不值得与框架相关的学习曲线，那么这一切都不重要。如果您仍在构建 PHP、Java 或其他站点，而后端服务器仍在根据用户请求构建网页的所有繁重工作，而 JavaScript/jQuery 只是为该过程锦上添花，那么您就是不需要或尚未准备好使用 Backbone.js。

---

骨干是...

...一个非常小的组件库，您可以使用它来帮助组织您的代码。它打包为单个 JavaScript 文件。不包括注释，它的实际 JavaScript 代码不到 1000 行。它写得很明智，你可以在几个小时内读完整本书。

它是一个前端库，您可以使用脚本标签将其包含在您的网页中。它只影响浏览器，对你的服务器几乎没有说明，除了理想情况下它应该公开一个 RESTful API。

如果您有 API，Backbone 有一些有用的功能可以帮助您与之交谈，但您可以使用 Backbone 为任何静态 HTML 页面添加交互性。

骨干是为了...

...向 JavaScript 添加结构。

因为 JavaScript 不强制执行任何特定模式，所以 JavaScript 应用程序很快就会变得非常混乱。任何在 JavaScript 中构建了一些琐碎的东西的人都可能会遇到以下问题：

我将在哪里存储我的数据？我将把我的功能放在哪里？我将如何将我的函数连接在一起，以便以合理的方式调用它们并且不会转向意大利面条？如何使此代码可由不同的开发人员维护？

Backbone 旨在通过为您提供以下信息来回答这些问题：

模型和集合可帮助您表示数据和数据集合。

视图，可帮助您在数据更改时更新 DOM。

一个事件系统，使组件可以相互监听。这可以使您的组件解耦并防止意大利面化。

一组最小的合理约定，因此开发人员可以在同一个代码库上一起工作。

我们称之为 MV* 模式。模型、视图和可选的附加功能。

骨干很轻

尽管最初出现，Backbone 非常轻巧，它几乎没有任何作用。它所做的非常有帮助。

它为您提供了一组可以创建的小对象，它们可以发出事件并相互监听。例如，您可以创建一个小对象来表示评论，然后创建一个小的 commentView 对象来表示评论在浏览器中特定位置的显示。

您可以告诉commentView 听取评论并在评论更改时重新绘制自己。即使您在页面的多个位置显示相同的评论，所有这些视图都可以收听相同的评论模型并保持同步。

即使您的代码库因许多交互而变得非常大，这种编写代码的方式也有助于防止您陷入纠结。

楷模

刚开始时，通常将数据存储在全局变量中，或者作为 data attributes 存储在 DOM 中。这两个都有问题。全局变量可能会相互冲突，并且通常是错误的形式。存储在 DOM 中的数据属性只能是字符串，您必须重新解析它们。很难存储诸如数组、日期或对象之类的东西，也很难以结构化的形式解析数据。

数据属性如下所示：

<p data-username="derek" data-age="42"></p>

Backbone 通过提供一个模型对象来表示您的数据和相关方法来解决这个问题。假设您有一个待办事项列表，您将有一个模型代表该列表中的每个项目。

当您的模型更新时，它会触发一个事件。您可能有一个与该特定对象相关联的视图。视图侦听模型更改事件并重新呈现自己。

意见

Backbone 为您提供与 DOM 对话的 View 对象。所有操作 DOM 或监听 DOM 事件的函数都在这里。

视图通常实现一个渲染函数，该函数重绘整个视图，或者可能是视图的一部分。没有义务实现渲染功能，但这是一个常见的约定。

每个视图都绑定到 DOM 的特定部分，因此您可能有一个 searchFormView，它只监听搜索表单，还有一个 shoppingCartView，它只显示购物车。

视图通常也绑定到特定的模型或集合。当模型更新时，它会触发视图监听的事件。视图可能会调用 render 来重绘自身。

同样，当您输入表单时，您的视图可以更新模型对象。然后，侦听该模型的所有其他视图都将调用其自己的渲染函数。

这给了我们一个清晰的关注点分离，让我们的代码保持整洁。

渲染函数

您可以以任何您认为合适的方式实现您的渲染功能。你可以在这里放一些 jQuery 来手动更新 DOM。

你也可以编译一个模板并使用它。模板只是一个带有插入点的字符串。你将它与一个 JSON 对象一起传递给一个编译函数，然后返回一个编译后的字符串，你可以将它插入到你的 DOM 中。

收藏品

您还可以访问存储模型列表的集合，因此 todoCollection 将是 todo 模型的列表。当集合获得或丢失模型、更改其顺序或集合中的模型更新时，整个集合都会触发一个事件。

视图可以侦听集合并在集合更新时自行更新。

例如，您可以将排序和过滤方法添加到您的集合中，并使其自动排序。

以及将这一切联系在一起的事件

应用程序组件尽可能地相互分离。它们使用事件进行通信，因此 shoppingCartView 可能会监听到 shoppingCart 集合，并在添加购物车时重绘自身。

shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

当然，其他对象也可能也在监听 shoppingCart，并且可能会执行其他操作，例如更新总数或将状态保存在本地存储中。

视图监听模型并在模型更改时呈现。

当集合中的项目发生变化时，视图会监听集合并呈现列表（或网格，或地图等）。

模型侦听视图，因此它们可以更改状态，也许是在编辑表单时。

像这样解耦您的对象并使用事件进行通信意味着您永远不会陷入困境，并且添加新组件和行为很容易。您的新组件只需要监听系统中已经存在的其他对象。

约定

为 Backbone 编写的代码遵循一组松散的约定。 DOM 代码属于一个视图。集合代码属于一个集合。业务逻辑进入模型。另一位拿起您的代码库的开发人员将能够开始运行。

总结一下

Backbone 是一个轻量级的库，可以为您的代码提供结构。组件被解耦并通过事件进行通信，因此您不会陷入混乱。您可以轻松地扩展您的代码库，只需创建一个新对象并让它适当地监听您现有的对象。你的代码会更干净、更好、更易于维护。

我的小书

我非常喜欢 Backbone，所以我写了一本关于它的小介绍书。您可以在此处在线阅读：http://nicholasjohnson.com/backbone-book/

我还将材料分解成一个简短的在线课程，您可以找到 here（已存档）。您可以在大约一天内完成课程。

---

这是一个有趣的演示：

An intro to Backbone.js

提示（来自幻灯片）：

浏览器中的Rails？不。

JavaScript 的 MVC 框架？排序。

大型胖状态机？是的！

---

Backbone.js 是一个 JavaScript 框架，可帮助您组织代码。它实际上是您构建应用程序的支柱。它不提供小部件（如 jQuery UI 或 Dojo）。

它为您提供了一组很酷的基类，您可以扩展这些基类以创建与服务器上的 RESTful 端点交互的干净 JavaScript 代码。

---

JQuery 和 Mootools 只是一个包含许多项目工具的工具箱。 Backbone 就像项目的架构或主干一样，您可以在其上使用 JQuery 或 Mootools 构建应用程序。

---

这是一个很好的介绍视频：http://vimeo.com/22685608

如果您正在寻找有关 Rails 和 Backbone 的更多信息，Thoughtbot 有这本相当不错的书（不是免费的）：https://workshops.thoughtbot.com/backbone-js-on-rails

---

我不得不承认，MVC 的所有“优势”从未使我的工作更轻松、更快或更好。它只是使整个编码体验更加抽象和耗时。当试图调试别人对分离意味着什么的概念时，维护是一场噩梦。不知道你们当中有多少人曾经尝试更新使用 Cairngorm 作为 MVC 模型的 FLEX 站点，但是需要 30 秒才能更新的内容通常需要 2 多个小时（搜索/跟踪/调试只是为了找到一个事件）。对我来说，MVC 过去和现在仍然是您可以填充的“优势”。

---

这是我在 BackboneJS 上写的快速入门文章。希望能帮助到你！ http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx

---

Backbone 由同时编写 CoffeeScript 的 Jeremy Ashkenas 创建。作为一个使用大量 JavaScript 的应用程序，我们现在所知道的 Backbone 负责将应用程序构建成一个连贯的代码库。 Underscore.js 是主干的唯一依赖项，也是 DocumentCloud 应用程序的一部分。

Backbone 帮助开发人员在其客户端 Web 应用程序中管理数据模型，其规则和结构与您在传统服务器端应用程序逻辑中获得的一样多。

使用 Backbone.js 的其他好处

将 Backbone 视为一个库，而不是一个框架 Javascript 现在正以结构化的方式组织起来，即 (MVVM) 模型 大型用户社区

---

通过 java 脚本，backbone.js 是 Model-View-Controller (MVC) with JavaScript 但 Extjs（已归档）优于 MVC 模式的主干

有了骨干，您几乎可以自由地做任何您想做的事情。我不会尝试通过 api 进行分叉和自定义，而是使用 Backbonejs，因为它简单且易于实现。再一次，很难说你需要的是一个库，另一个是组件

---

它还使用 KVO 的控制器和视图添加路由。您将能够使用它开发“AJAXy”应用程序。

将其视为轻量级的 Sproutcore 或 Cappuccino 框架。

---

是客户端的 MVC 设计模式，相信我。它会为您节省大量代码，更不用说更干净、更清晰的代码，更易于维护的代码。一开始可能有点棘手，但相信我，这是一个很棒的图书馆。

---

已经有很多好的答案了。 Backbone js 有助于保持代码的组织性。更改模型/集合会自动处理视图渲染，从而减少大量开发开销。

尽管它为开发提供了最大的灵活性，但开发人员应小心销毁模型并正确删除视图。否则应用程序中可能存在内存泄漏。

---

一个涉及大量用户交互和许多 AJAX 请求的 Web 应用程序，需要不时更改，并且实时运行（例如 Facebook 或 StackOverflow），应该使用 MVC 框架，例如 Backbone.js。这是构建良好代码的最佳方式。

但是，如果应用程序很小，那么 Backbone.js 就有点过分了，尤其是对于初次使用的用户。

Backbone 为您提供客户端 MVC，以及由此暗示的所有优势。

---