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 () {});来启动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之外的一切都是静态的).