Javascript Backbone.js和jQuery

据说主干处理所有高级抽象，而jQuery或类似的库处理DOM、规范化事件等

有人能用简单的实例帮助我理解这句话吗

---

MVC框架的另一个重要特性是保持模型（数据）和视图的同步，就像主干一样。但这似乎在页面级别是特定的，而不是在整个应用程序中。因此，我们可以在多个页面上同步模型/数据和视图。（“一种全局性的”）

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

典型主干应用程序的特征包括：

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

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

---

这种方法的最大优点是平滑的用户体验（无需重新加载页面），良好的缓存支持，因为除json数据外的所有内容都是静态内容，对于移动目标而言，可以将web应用程序转变为带有phoneGap的移动应用程序（因为除json外的所有内容都是静态的）

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

例如，以下是我将使用jQuery执行的一些操作：

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

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

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

jQuery在微观层面上表现出色——选择页面元素，消除浏览器处理事件方式的差异

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

不过，Backbone.js得益于jQuery或类似的工具，有助于将应用程序的数据和逻辑结果呈现到DOM中。例如，使用jQuery选择页面上用作主干应用程序容器的元素是很常见的。使用jQuery的

$（函数（）{}）也是很常见的

启动主干控件的各个部分。您可能还会使用jQuery显示表单字段验证错误消息

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

我目前正在修改Backbone.js中的一个控件。作为最后一个示例，这里简要介绍了在两个不同库中处理同一控件时，我的思维过程是如何不同的

在jQuery中，我担心：

• 我是否使用了正确的选择器来获取所需的

  li

  元素组
• 当这个Ajax调用完成时，我是否需要重新填充该值列表
• 如何将这些数组值放回页面上的

  输入

  元素中

在主干方面，我更关注：

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

jQuery处理基本细节，主干更高级

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

// 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" );
});