Backbone.js和jQuery

Question

据说Backbone处理所有更高级别的抽象，而jQuery或类似的库使用DOM，规范化事件等等。

有人可以用任何简单的实际例子来帮助我理解这个陈述。

像Backbone，Knockout这样的MVC框架的一个重要特性是它保持模型（数据）和视图同步。 但这似乎是在页面级别而不是整个应用程序中。 那么我们可以将模型/数据和视图同步到多个页面..（全球的一种）

Answer 1

你的开头句实际上是Backbone.js和jQuery之间差异的一个非常好的陈述，所以让我们解开它。

首先，两个图书馆完全没有竞争 - 它们是免费的。

作为一个例子，这里有一些我将用jQuery做的事情：

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

还有一些我可以在Backbone.js中做的事情：

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

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

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

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

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

我正在重做Backbone.js中的其中一个控件。 作为最后一个例子，这里是我在两个不同的库中处理相同控件时我的思维过程有何不同的快速总结。

在jQuery中，我担心：

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

在Backbone中，我更专注于：

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

jQuery处理细节，Backbone更高级。

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

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

Answer 2

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

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

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

关于保持数据在多个页面中同步的问题，我的本能答案是您不需要多个页面：用户可能会感觉到页面正在发生变化，url栏中的地址会因pushState功能而发生变化，但从技术上来说整个应用程序是一页。

这种方法的最大优点是流畅的用户体验（无需重新加载页面），良好的缓存支持，因为除了json数据之外的所有内容都是静态内容，因为移动设备可以将web应用程序转换为带有phoneGap的移动应用程序（因为除了json之外的一切都是静态的）。

Answer 3

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

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

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

如果你不想做一个单页应用程序（这只是一个没有页面刷新或更改的应用程序，但是网址仍然可以改变，看起来像用户的多页面），那么你可以保持你的所有MVC服务器，你不需要骨干。

编辑：

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

Answer 4

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

MV *应用程序的主要功能是路由，数据绑定，模板/视图，模型和数据访问。 Backbone可能部分依赖于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" );
});