Backbone.js 和 jQuery答案

【问题标题】：Backbone.js and jQueryBackbone.js 和 jQuery
【发布时间】：2012-03-31 16:46:52
【问题描述】：

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

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

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

【问题讨论】：

你必须说“Backbone AND jQuery”
由 Noobs - 为 Noobs。 thomasdavis.github.com/2011/02/01/backbone-introduction.html。它们都旨在为日常问题提供易于使用和可扩展的解决方案。一个（jQuery）主要侧重于让您更轻松地使用现有元素并在 DOM 加载后操作数据。另一个（Backbone）允许您创建一个“MV（VM/C/CR）”应用程序，它指示模型（我们想要显示的数据）、我们的视图（我们想要显示数据的方式）和我们的控制器（ Backbone 将其分为两种方法 - 集合/路由）数据传输/加载前操作。
谢谢...我已经更新了问题...

标签： javascript jquery backbone.js javascript-framework

【解决方案1】：

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

典型骨干应用的特点是：

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

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

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

【讨论】：

嗯......谢谢很多......当你说骨干主要用于单页应用程序时，我有点困惑......不确定有多少应用程序真的只是单页...... .most 有多个页面...即使我有多个页面应用程序...所以我不能使用 Backbone.js 吗？
单页应用程序意味着它在技术上是一个 html 页面 - 从用户的角度来看，它通常具有多个视图（“页面”）和功能。作为一个例子，我可以给出实际使用主干甚至 gmail 开发的移动链接页面touch.www.linkedin.com。
是的，您当然可以将 Backbone 用于多页面应用程序，在这种情况下，您可能会使用与独立重新加载页面一样多的 Backbone 路由器

【解决方案2】：

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

一方面，这两个库根本没有竞争——它们是互补的。

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

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

还有一些我可能在 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 示例时一直使用“控制”和“应用程序”这两个词。 Backbone.js 仅适用于单页应用程序是不正确的。不过，Backbone.js 确实适用于构建复杂的应用程序来操作数据和处理大量逻辑。将它用于小规模 UI 元素会很愚蠢——不需要它强加的额外结构。

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

【讨论】：

非常感谢...至少可以说令人震惊的答案...虽然您已经解释了几乎所有的部分，但我只有一个问题...您提到 Backbone 不仅适用于单页应用程序...那么，您能否提供一个示例，说明如何在应用程序的多个页面中保存数据？此外，我在服务器端使用 Java，它带来了实际的动态数据......所以我是否也应该更新它以正确格式返回数据，然后将它的副本保留为 Backbone 模型......
@testndtv 每次刷新页面时，所有模型都会丢失……那为什么要刷新页面呢？ Backbone 允许您在同一页面上更改视图，因此只需使用 1 个页面。
好的..Backbone 没有任何机制来跨页面保存数据吗？就像通过 AJAX 调用或其他方式持久化数据......
添加了一些关于持久数据的信息，Backbone 可以很好地处理这些信息。
乔希说得好，你解释得比我好。 Testndtv，因为您似乎是 javascript 的初学者，所以我要添加警告，即骨干确实不是一个非常适合初学者的框架 - 它非常有用并且在构建复杂的应用程序时有很大帮助，但是额外的概念使开始开发比只是偷偷摸摸。我建议您仔细研究骨干文档中的示例，以便您朝着正确的方向开始。

【解决方案3】：

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

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

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

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

编辑：

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

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：