Backbone.js和jQuery

Question 1

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

有人可以通过任何简单的实际示例来帮助我理解此声明。

Knockout也是MVC框架（如Backbone）的一项重要功能，即保持模型（数据）和视图同步。但这似乎是页面级别的特定内容，而不是整个应用程序的特定内容。因此，我们可以在多个页面之间同步模型/数据和视图吗。

Question 2

骨干/淘汰赛通常用于单页应用程序。因此，尽管jQuery是可以与任何网页一起使用的工具箱，但Backbone却是针对特定类型的应用程序的，它可以帮助您组织代码。至少以我的经验，构建一个单页应用程序的最大挑战之一是保持代码的清洁和模块化，而主干网可以在很大程度上解决这一问题。

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

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

关于您将数据跨多个页面同步的问题，我的直觉回答是您不需要多个页面：用户可能会认为页面正在更改，由于pushState功能，URL栏中的地址也会更改，但是从技术上讲，整个应用只有一页。

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

Question 3

您的开头句子实际上很好地说明了Backbone.js和jQuery之间的区别，因此让我们对其进行一些整理。

一方面，这两个库完全没有竞争，它们是互补的。

举例来说，这是我要使用jQuery进行的一些操作：

动画幻灯片
表单控件增强功能，例如iOS样式的数字“ spinner”
根据类名称切换元素的可见性

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

创建相册，用户单击缩略图即可查看照片的较大版本，以及一些数据，例如使用的相机，位置和摄影师的姓名
构建一个主/明细类型的页面，该页面呈现一个数据网格，并允许用户单击单个元素并以表格形式对其进行更新。

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

Backbone.js更具全局性。它可以帮助您管理数据和应用程序逻辑。在上面的相册示例中，Backbone提供了几种有用的结构：您将包含一些与照片有关的所有数据（一个模型），该相册中所有照片的列表（一个集合）以及放置位置确定用户单击缩略图（视图）时会发生什么的逻辑。这些是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”和“ app”。Backbone.js仅适用于单页应用程序并不是真的。但是，的确，Backbone.js非常适合构建可处理数据和处理大量逻辑的复杂应用程序。将其用于小型UI元素将很愚蠢-不需要它强加的额外结构。

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

Question 4

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

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

如果您已经在Java中拥有服务器端模板/视图呈现功能，那么骨干.js不适合您。为了充分利用lobb.js，您必须在前端javascript中移动或复制某些代码。

如果您不想做单个页面的应用程序（这只是意味着没有页面刷新或更改的应用程序，但是URL仍然可以更改，并且对用户来说看起来像多页），那么您可以将所有MVC保持打开状态服务器，您不需要骨干网。

编辑：

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

Question 5

主干是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" );
});