Backbone.js和jQuery

Question

Backbone.js和jQuery

javascriptjquerybackbone.jsjavascript-framework

81

据说 Backbone 处理所有高层次的抽象，而 jQuery 或类似的库处理 DOM、规范化事件等等。

请有人用任何简单的实际例子帮助我理解这个说法。

MVC 框架（如 Backbone、Knockout）的一个重要特性是它保持模型（数据）和视图同步。但这似乎只针对页面级别，而不是整个应用程序。那么我们能否在多个页面之间同步模型/数据和视图（全局式）？

- copenndthagen

1

你必须说“Backbone AND jQuery”。 - neoascetic

针对新手 - 为新手。http://thomasdavis.github.com/2011/02/01/backbone-introduction.html。它们都旨在提供易用性和可扩展性的解决方案来解决日常问题。其中一个（jQuery）重点是使您更容易使用现有元素并在DOM加载后操作数据。另一个（Backbone）允许您创建一个“MV（VM / C / CR）”应用程序，该应用程序在加载之前就规定了模型（我们要显示的数据），视图（我们要如何显示数据）和控制器（Backbone将其分成两种方法 - 集合/路由）数据传输/操作。 - Ohgodwhy

4个回答

54

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

典型 backbone 应用程序的特点包括：

- 基本上是一个静态 HTML 页面，服务器上没有生成任何内容 - 服务器作为 json REST api，为应用程序提供内容 - dom 元素用 JavaScript 在 backbone 视图中创建，使用 jQuery 和各种模板库来帮助显示数据 - 使用 backbone 模型进行服务器之间和应用程序不同部分之间的通信

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

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

- OlliM

1

嗯...非常感谢...当你说Backbone主要只用于单页应用时，我有点困惑...不确定有多少应用程序真正只有单个页面...大多数都有多个页面...即使我有一个多页应用程序...那么我不能使用Backbone.js吗？ - copenndthagen

4

单页面应用指的是从技术层面上而言只有一个 HTML 页面，但从用户角度来看，它通常具有多个视图（“页面”）和功能。例如，移动版的 Linkedin 页面 http://touch.www.linkedin.com 实际上是使用 Backbone 开发的，还有 Gmail。 - OlliM

当然可以在多页面应用中使用Backbone，这种情况下，您可能会使用与独立重新加载的页面数量相同的Backbone路由器。 - Alexander Mills

3

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

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

如果您已经在Java中具有服务器端模板/视图渲染，则backbone.js对您来说并不适用。要充分利用backbone.js，您必须将其中一些代码移动或复制到前端JavaScript中。

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

编辑：

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

- Mark

2

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

- antonjs

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Earl · Accepted Answer

你的开头语实际上是关于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中，我担心：

- 我是否使用正确的选择器来获取我想要的

元素组？ - 当这个Ajax调用完成时，我需要重新填充那些值列表吗？ - 我如何将这些数组值放回页面上的元素中？

在Backbone中，我更关注：

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

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

最后，请注意我在讨论Backbone.js示例时使用控件和应用程序这些词。并不是说Backbone.js仅适用于单页面应用程序。但是，Backbone.js确实非常适合构建操作数据和处理大量逻辑的复杂应用程序。将其用于小规模UI元素是愚蠢的，因为它所强加的额外结构是不必要的。更新： 关于多页面的问题，Backbone确实提供了一种强大的机制来持久化你的数据。每个模型都有一个save方法，它将执行一个AJAX调用以将更改存储在服务器上。只要你边完成就保存数据，你就可以拥有一个多页应用程序。这是一个非常灵活的模型，也是我们在工作中可能会使用Backbone的方式。虽然我很想构建单页应用，但我们现有的多页应用程序已有10年的历史。我们正在寻求在Backbone中重建一些更复杂的UI组件，然后在用户转到不同页面之前将更改同步到服务器。