Backbone.js jQuery 英文原文：Structuring jQuery with Backbone.js

在构建高交互度的Web应用程序方面，JavaScript发挥出越来越重要的作用。如Backbone.js，Marionette.js，Ember.js 和Angular.js 这些库和框架，在流行度和功能方面快速成长。对于建立复杂和强大的浏览器应用这件事，这些库和框架使之变得容易了。它们帮助我们迎来了一个单页应用时代（SPAs），使网页上的交互性和实用性达到了前所未有的程度。

但为了达到互动的目的，并不是每个Web应用程序或网站上的每个页面都需要通过SPA框架来创建。很多应用程序更适合于小规模的功能。对于这些页面，需要有一种高层次的交互性，同时又不需要客户端路由和其他的SPA功能属性。随着小页面在功能需求方面的减少，在创建页面时，将适当的框架和库的列表减少也顺理成章。例如，如果只是添加表单验证，你并不需要一个完整的MVC框架。要是不需要一个完整的SPA框架，而且有很好的理由的话，许多开发者编写代码时只会用到jQuery。而为了创建进一步的交互动作，可以很容易地通过 plug-ins 和add-ons扩展jQuery提供的交互性。

在建造大型的jQuery应用时，所面临的困难之一是保持代码有条理。它很容易迷失于世界末日的一棵圣诞树——一个深层嵌套的回调函数列表，这个列表看起来似乎掌控着每一个功能和交互。事实上，对于代码的组织或结构，jQuery不提供任何指导。

好消息是，你不需要在jQuery和结构良好的代码之间做出选择，后者由SPA库和框架帮你书写。借助Backbone.js提供的结构良好的创建模块，你可以把基于jQuery应用的简单性和交互性结合起来，以便创建同样具有很好代码组织结构的高互动性的网页。

其它翻译版本 (1) 加载中

什么是Backbone.js

Backbone.js是一个帮助开发者在Web应用程序中向Javascript代码添加架构的组件库。来自BackboneJS.org的描述是这样的：

“Backbone.js通过提供带有键值绑定的模型和定制的事件，带有枚举功能的丰富的集合API，带有声明式事件处理的视图，而且将它所有这些东西通过一个RESTful JSON接口连接到你现有的API上面，来向Web应用程序提供架构。

Backbone.js包含了提供不同组特定功能集合的构造块，包括：

• Model：包含由键值对组成的属性的对象。Model封装了应用程序中的数据以及同数据相关的行为。
• Collection：是一个模型的集合。Collection可以让相关模型的集合共同工作并且作为一个整体被管理。通用的集合特性诸如新增和移除，迭代，过滤等都有提供。
• View：用于管理和操作DOM的通用方法集合与配置，并且显示来自Model和Collection的数据。View提供了使用jQuery DOM 事件的一种结构良好的方法，它们可以很容易的对HTML模板以及更多的其它东西进行渲染。
• Event：它是对面向Javascript对象的观察者设计模式的一个小巧但强大的实现。事件将Backbone.js应用粘合在一起。Backbone.js中的每一个对象都包含事件系统，它让每一个Backbone.js对象都能触发事件并能得到处理。
• Router和History：使用URL哈希片段或者HTML5的pushState技术来管理浏览器历史的对象集合。Router和History对象允许对一个应用程序的对象打上书签或者链接，重载页面的时候精确的回到上一次最后留下的样子。    

尽管Backbone.js有其它小的部分，但如果需要定制它们的时候，理解这些很重要。不过从一个高层次观察，对于大多数应用程序来说，这六个对象是最重要的。

在 这些 Backbone.js 单个部分之外，从模式与架构的视角，有一些关于如何称呼它的争论。 显然Backbone.js符合Model-View-* (MV*)模式家族。 毕竟它提供了一组对象，帮助你组织模型和视图。 但这并不完全符合MVC模式，或MVVM模式，或MVP，或别的什么。 称 Backbone.js为MV *家族的一个成员是最简单的。在此基础上 ， 人们叫它什么并没有多大 差异 。

建立联系人列表

许多应用类型需要为他人存储和查询联系人信息，比如一个CRM系统，一个时间追踪应用，账单或者其他的一些东西。尽管联系人应用可能还没有最令人激动的特性集合，但它提供了一个使用高级交互性的很好的例子，但不需要成为SPA。

一个简单的联系人列表仅仅需要少量的特性：

• 联系人列表
• 添加联系人
• 编辑联系人
• 删除联系人
• 联系人数据

它也需要与这些特性相配的数据，包括：

• 姓名
• 图片URL
• 邮件地址
• 电话号码
• 注释

在学习Backbone.js过程中使用的简单联系人列表仅仅需要处理一个单独的邮件地址和电话号码。在真正的应用中，你会想要允许多个电话号码和邮箱地址，但Backbone.js没有内建的嵌套或者分层的模型。这让处理多值或者嵌套对象和集合变得有些更具挑战性，尽管通过插件添加这项功能并不困难。一个简单的邮件地址和电话号码可以满足这个应用。

这个应用的布局相对简单，可以如图片1和图片2的样子。只需要一个列表视图而且有一个表单来添加和编辑联系人。

图片 1: 这是添加联系人表单

图片2: 这是联系人列表例子。

当你点击添加按钮，表单将显现，并允许你添加一个新的联系人。点击保存将联系人信息发送到服务器。点击取消清除表单并隐藏表单。

在联系人列表中，点击编辑按钮可以显示同添加过程一样的样子，但是表单里将有存在的联系人信息。点击保存并发送编辑信息给服务器。保存还是用最新的信息来更新联系人列表。取消将抛弃任何改变并不会更新列表。

一个API服务器

Backbone.js为数据提供一个如REST的API，并能和服务器端很好的交互。这个在很多语言中都能很容易的安装，包括Ruby on Rails、NodeJS、ASP.NET MVC(包括WebAPI)、Python Django和各种PHP框架等等。最重要的方面不是服务器使用的技术架构。当然，其重点是如REST的API并能提供各种资源。

Backbone.js是在Rails的世界中开发的，所以它的API使用起来如一个Rails生成的API。Backbone.js工作使用的每一个资源应该对应一个在Web服务器上的API，这个API可以接受和返回JSON，而且符合Rails URL和HTTP的约定动作。

在某个联系人列表里，其API可能如下：

• GET /contacts:返回所有联系人
• POST /contacts: 从表单数据中创建一个新的联系人，其数据用JSON格式
• GET /contacts/:id: 通过参数id得到指定联系人
• PUT /contacts/:id: 通过得到表单传来的JSON格式数据来更新一个存在的联系人。通过id参数来标识更新的联系人
• DELETE /contacts/:id: 通过指定id来删除联系人

这篇文章中构建联系人应用是一个技术而且对于服务器框架来说是未知的，直到服务器符合了基本API结构。至于你怎样才能实现服务器框架则完全取决于你。

新增表单

在为这个app准备的javascript中首先要做的，是处理新增按钮的点击。添加一个标准的jQuery DOMReady 回调函数，以确保DOM已经准备好并且可用了。然后，在DOMReady回调函数里面，添加一个找到#add元素的选择器还有对点击事件的侦听。在事件参数上调用preventDefault以确保按钮的点击不会传到服务器。

$(function(){

  $("#add").click(function(e){
    e.preventDefault();
    showAddForm();
  });

  // other code will go here ... 

});

在事件的回调函数里面制造了一个对showAddForm的调用，以展示添加表单。这个函数找到#add-edit-form元素，并且使用动画来展示它。

function showAddForm(){
  var form = $("#add-edit-form");
  form.slideDown();
}

接下来，为#save按钮的点击事件添加一个事件处理器。这个按钮存在于#add-edit-form里面，但它也可以通过ID被选择器找到。在点击处理器中，从表单中所有的输入元素中抓取数据并且将其发送到服务器以创建一个新的contact。当这些都做好以后，就用新的contact信息更新contact的列表，就像列表1所展示的那样。 

当向服务的传送成功时，它会调用updateList和clearForm函数，它们会做你所希望做的事情（ 简洁起见，这些断码从略）。

不需要完成这个简单应用的整个功能，你就能看明白现在代码能够很快的变成一揽子可用的功能挂在上面。这种结构松散的代码被相当典型的用在使用jQuery的小型页面上。几乎每一个Javascript和jQuery开发者都写过类似的代码，而这一风格由于其能让一些小型的任务得以完成，因此会持续流行下去。

编写结构良好的jQuery代码是可能的，当然，即使你使用了提供那种架构的框架或者库也可以。  那会变得像是你在重复制造轮子，所以你应该专注于如何让业务运作起来。不要在构建基础架构上花时间，就使用模型，集合，视图和其他Backbone.js能够提供的类型，将你的应用程序迁移到这样一个更好的架构上，然后一步一个脚印。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。 2KB翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务