Backbone.js and jQuery

您的开场白实际上很好地说明了Backbone.js和jQuery之间的差异，所以让我们来稍微解开它。

首先，这两个图书馆根本没有竞争——它们是互补的。

举个例子，下面是我想用jQuery做的一些事情：

• 动画幻灯片
• 表单控件增强功能，如iOS风格的数字"微调器"
• 基于类名切换元素的可见性

我可能会在Backbone.js:中做一些事情

• 创建一个相册，用户点击缩略图，可以查看照片的更大版本，以及一些数据，如使用的相机、位置和摄影师的姓名
• 构建一个主/详细信息类型的页面，该页面显示数据网格，并允许用户单击各个元素并在表单中更新它们

jQuery擅长于微观层面——选择页面元素，消除浏览器处理事件方式的差异。

Backbone.js更具全局性。它可以帮助您管理数据和应用程序逻辑。在上面的相册示例中，Backbone提供了几个有用的结构：您可以在其中包含与照片相关的所有数据（模型）、相册中所有照片的列表（集合），以及放置逻辑的位置，以确定用户单击缩略图（视图）时会发生什么。这些是主干控件或应用程序中的主要部分。

不过，Backbone.js受益于jQuery或类似的东西，可以帮助将应用程序的数据和逻辑的结果呈现到DOM中。例如，使用jQuery在页面上选择将用作Backbone应用程序容器的元素是很常见的。使用jQuery的$(function () {});来启动Backbone控件的各个部分也是很常见的。您可能还会使用jQuery显示表单字段验证错误消息。

您当然可以在jQuery中构建大型、复杂的用户界面。我们在我工作时维护的应用程序中有一些。但它们很难使用，因为jQuery并不是为应用程序提供结构而设计的。特别是，jQuery的API基于选择项目组，然后传递操作这些项目的回调函数，这不是一个在大型复杂控件或应用程序中使用的好模式。你最终得到了很多嵌套的函数，很难看到发生了什么

我目前正在Backbone.js中重新设计其中一个控件。作为最后一个例子，这里简要总结了在两个不同的库中处理同一控件时，我的思维过程是如何不同的。

在jQuery中，我担心：

• 我是否使用了正确的选择器来获取我想要的li元素组
• 当这个Ajax调用完成时，我需要重新填充那个值列表吗
• 如何将这些数组值放回页面上的input元素中

在Backbone，我更专注于：

• 在我的模型项上验证这组属性的正确逻辑是什么
• 当用户单击"添加"按钮时，我应该立即向集合中添加一个新项目，还是应该等到他们填写完所有数据并"有效"后再添加
• 在删除集合中的项目之前或之后，该项目应如何响应

jQuery处理细节，而Backbone更高级。

最后，请注意，在讨论Backbone.js示例时，我一直在使用"control"answers"app"这两个词。Backbone.js并非只适用于单页应用程序。不过，Backbone.js确实非常适合构建操作数据和处理大量逻辑的复杂应用程序。将它用于小规模的UI元素是愚蠢的——不需要它强加的额外结构。

更新：关于多页的问题，是的，Backbone确实提供了一种强大的机制来持久化数据。每个模型都有一个save方法，该方法将执行AJAX调用以将更改存储在服务器上。因此，只要你边走边保存数据，你就可以拥有一个多页应用程序。这是一个非常灵活的模型，这就是我们可能最终在工作中使用Backbone的方式。虽然我很想构建一个单页应用程序，但我们在现有的多页应用程序中有10年的工作经验。我们希望在Backbone中重建一些更强大的UI组件，然后在用户移动到其他页面之前将更改同步到服务器。

Backbone/Knockout通常用于单页应用程序。因此，虽然jQuery是一个可以用于任何网页的工具箱，但Backbone适用于特定类型的应用程序，并帮助您为其组织代码。至少根据我的经验，构建单页应用程序的最大挑战之一是保持代码的干净和模块化，而主干网在这方面有很大帮助。

典型骨干应用程序的特点是：

• 本质上是静态html页面，服务器上不生成任何内容
• 服务器充当jsonRESTapi，为应用程序提供内容
• 显示数据的dom元素是在主干视图中使用javascript创建的，使用jQuery和各种模板库来帮助
• 与服务器以及应用程序不同部分之间的通信是通过骨干模型完成的

关于你关于在多个页面上保持数据同步的问题，我本能的回答是，你不需要多个页面：用户可能会感觉到页面正在更改，url栏中的地址由于pushState功能而更改，但从技术上讲，整个应用程序是一个页面。

这种方法的最大优势是流畅的用户体验（无需重新加载页面），良好的缓存支持，因为除了json数据之外的所有内容都是静态内容，对于移动目标来说，有可能将web应用程序变成一个带有phoneGap的移动应用程序（因为除了json之外的所有东西都是静态的）。

我从未听说有人在多个页面上使用backbone.js。它几乎总是某种单页应用程序。

单个页面可能有许多不同的模型、视图和状态，并可能产生一个全面、强大的应用程序。

如果您已经有了java中的服务器端模板/视图渲染，那么backbone.js不适合您。为了充分利用backbone.js，您必须在前端javascript中移动或复制其中的一些代码。

如果你不想做一个单页应用程序（这只是意味着一个没有页面刷新或更改的应用程序，但url仍然可以更改，对用户来说可能看起来像多页），那么你可以将所有MVC都保留在服务器上，不需要主干网。

编辑：

主干网所做的是将一些通常在服务器上处理的MVC内容移动到客户端。对许多人来说，这意味着忘记服务器，只将应用程序编写为单页javascript应用程序。服务器只是JSON/REST数据的来源。如果你还没有准备好这么做，那么backbone.js就没那么有用了。

Backbone是一个MV*框架，而jQuery是一个DOM工具包。

MV*应用程序的主要功能是路由、数据绑定、模板/视图、模型和数据访问。主干可能部分依赖jQuery。

jQuery是一个可靠的API，用于查询DOM，具有广泛的浏览器支持和充满活力的社区。它提供了事件处理、延迟对象和动画。

使用jQuery的简单事件绑定

// When any <p> tag is clicked, we expect to see '<p> was clicked' in the   console.
$( "p" ).on( "click", function() {
console.log( "<p> was clicked" );
});