1.简介
最近在做一个大型网上银行项目前端的优化，需要使用一个胖客户端的优化，大概思路就是前端通过ajax 请求去后端获取数据，以jason的格式返回，然后显示在页面上。由于这个系统非常庞大，胖客户端方案难免需要在客户端写大量的js代码。我想对于任何团队来说，大量的，非结构化的代码维护起来都非常的不方便。所以backbone进入了我的视线。
它提供了一种途径可以让你结构化你的js代码，让你以面向对象的方式来组织你的前端js代码。这就好比我们在前端应用domain driven design. 我们可以把一个非常大的项目按模块切分。 每个模块里面又可以按照backbone的要求切分成view,  model, router。
通过backbone，你可以把你的数据当作models，通过models你可以创建数据，进行数据验证，销毁或者保存到服务器上。当界面上的操作引起model中属性的变化时，model会触发change的事件;那些用来显示model状态的views会接受到model触发change的消息，进而发出对应的响应，并且重新渲染新的数据到界面。在一个完整的backbone应用中，你不需要写那些胶水代码来从dom中通过特殊的id来获取节点，或者手工的更新html页面，因为在model发生变化时，views会很简单的进行自我更新。
2.特点
backbone是一个轻量级的前端框架，用于结构化管理页面中的大量js，建立与服务器、视图间的无缝连接，为构建复杂的应用提供基础框架。
下面我先简单地阐述下backbone的主要特点及特性：
2.1 轻量级
backbone的源码只有1000行左右（去注释和空行后），文件大小只有16kb，加上依赖库underscore，也仅有29kb。
你只需要花一点时间，就能轻松了解backbone内部实现；或编写少量代码，来重载backbone的部分机制；如果你想在backbone的基础上做二次开发，也并不是一件复杂的事情。
2.2 结构化
backbone可以轻松将页面中的数据、逻辑、视图解耦，依照backbone进行代码结构组织，你可以将项目中的数据交互、业务逻辑、用户界面等工作，分配给多个同事同时开发，并能有序地组织到一起。同时，这对于大型和复杂项目的维护开发非常有帮助。
2.3 继承机制
在backbone中，模块是可以被继承的，你可以通过面向对象的方式将应用中的数据模型、集合、视图有序地组织，让整个架构更加清晰；也可以方便地重载和扩展自定义方法。
2.4 建立与服务器的无缝连接
在backbone中内置了一套与服务器数据的交互规则（如果你了解rest架构，就能够轻松地理解它们），而数据的同步工作会在model中自动进行，前端开发人员只需对客户端数据的进行操作，backbone会自动将操作的数据同步到服务器。
这是件非常有趣的事情，因为服务器数据接口对前端开发者来说是透明的，他们不需要再关心如何和服务器交互。
然而服务器提供的数据接口也需要兼容backbone的规则，对于一个新的项目来说，我们可以尝试使用这套规则来构建接口。但如果你的项目中已经有一套稳定的接口，你可能会担心接口改造的风险。
没关系，我们可以通过重载backbone.sync方法来适配现有的数据接口，针对不同的客户端环境，我们还可以实现不同的数据交互方式。例如：用户通过pc浏览器使用服务时，数据会实时同步到服务器；而用户通过移动终端使用服务时，考虑到网络环境问题，我们可以先将数据同步到本地数据库，在合适的时候再同步到服务器。而这些只需要你重载一个方法就可以实现。
2.5 界面事件管理
在mvc中，我们希望能将界面展现和业务逻辑完全分离，但对于用户产生的交互事件（如单击事件），我们却常常通过类似jquery中的bind方法进行获取和绑定。
backbone中的视图帮助我们将用户事件和执行方法有序的组织起来，这只需要我们声明一个简单的表达式，例如：
events: { // 单击id为”save”的元素时，执行视图的add方法 'click #save': 'add', 'mousedown .button': 'show', 'mouseover .button': 'hide' }
在表达式中，事件名称可以是任意的dom事件（如click、mouseover、keypress等），元素可以是jquery支持的任意选择器（如标签选择器、id选择器、class选择器等）。
视图会自动将表达式中的事件绑定到选择器元素，当元素的事件被触发后，视图会自动调用表达式中绑定的方法。
2.6 轻量级模板解析
模板解析是underscore中提供的一个方法。为什么我要在介绍backbone特性时引入underscore中的方法？因为该方法能帮助我们更好地分离视图结构和逻辑，且underscore是backbone必须依赖的库。
模板解析方法能允许我们在html结构中混合嵌入js代码，就像在jsp页面中嵌入java代码一样：
<% for(var i = 0; i
通过模板解析，我们不需要在动态生成html结构时拼接字符串，更重要的是，我们可以将视图中的html结构独立管理（例如：不同的状态可能会显示不同的html结构，我们可以定义多个单独的模板文件，按需加载和渲染即可）。
2.7 自定义事件管理
在backbone中，你可以使用on或off方法绑定和移除自定义事件。在任何地方，你都可以使用trigger方法触发这些绑定的事件，所有绑定过该事件的方法都会被执行，如：
var model = new backbone.model(); // 在model对象中向自定义事件custom绑定两个函数 model.on('custom', function(p1, p2) { // todo }); model.on('custom', function(p1, p2) { // todo }); // 触发custom事件，将调用上面绑定的两个函数 model.trigger('custom', 'value1', 'value2'); // 移除custom事件中绑定的所有方法 model.off('custom'); // 触发custom事件，但不会执行任何函数，已经事件中的函数已经在上一步被移除 model.trigger('custom');
如果你熟悉jquery，你会发现它们与jquery中的bind、unbind和trigger方法非常类似。
另外，backbone支持一个特殊事件”all”，当在一个对象中绑定了名为”all”的事件后，该对象在触发任何事件时，都会同时触发”all”事件中绑定的方法。有时这种方法会非常有用，例如我们可以通过”all”事件监听对象状态的变化。
3.路由器
在单页应用中，我们通过javascript来控制界面的切换和展现，并通过ajax从服务器获取数据。
可能产生的问题是，当用户希望返回到上一步操作时，他可能会习惯性地使用浏览器“返回”和“前进”按钮，而结果却是整个页面都被切换了，因为用户并不知道他正处于同一个页面中。
对于这个问题，我们常常通过hash（锚点）的方式来记录用户的当前位置，并通过onhashchange事件来监听用户的“前进”和“返回”动作，但我们发现一些低版本的浏览器（例如ie6）并不支持onhashchange事件。
backbone提供了路由控制功能，通过backbone提供的路由器，我们能通过一个简单的表达式将路由地址和事件函数绑定在一起，例如：
var customrouter = backbone.router.extend({ routes : { '' : 'index', // 当url hash在根目录时执行index方法：url# 'list' : 'getlist', // 当url hash在list节点时执行getlist方法：url#list 'detail/:id' : 'query', // 当url hash在detail节点时执行query方法，并将detail后的数据作为参数传递给query方法：url#list/1001 '*error' : 'showerror' // 当url hash不匹配以上规则时, 执行error方法 }, index : function() { alert('index'); }, getlist : function() { alert('getlist'); }, query : function(id) { alert('query id: ' + id); }, showerror : function(error) { alert('error hash: ' + error); }, }); var custom = new customrouter(); backbone.history.start();
请尝试将这段代码复制到你的页面中，并依次访问以下地址（其中url表示你的页面地址）：
urlurl#listurl#detail/1001url#hash1url#hash2
请再试着使用浏览器的“返回”和“前进”按钮来回切换刚刚输入的地址。
你可以看到，当url hash发生变化时，会执行所绑定的方法，当遇到没有定义的hash时，都会执行showerror方法，并将未定义的hash传递给该方法。
backbone默认会通过hash的方式来记录地址的变化，对于不支持onhashchange的低版本浏览器，会通过setinterval心跳监听hash的变化，因此你不必担心浏览器的兼容性问题。
对于支持html5 pushstate特性的浏览器，backbone还允许你通过pushstate来创建个性化的url，但是这需要你的web服务器做一些适配。
3. backbone的适用性
backbone并不像jquery那样具有非常强的适用性，如果你正准备构建一个大型或复杂的单页web应用，那么backbone再适合不过。
如果想将backbone应用到你的网站页面中，且页面中并没有复杂的逻辑和结构，那么这只会让你的页面更加繁琐和难以维护。
如果你的项目并不复杂，但你却深深喜欢它的某个特性(可能是数据模型、视图管理或路由器)，那么你可以将这部分源码从backbone中抽取出来，因为在backbone中，各模块间的依赖并不是很强，你能轻易的获取并使用其中的某一个模块。
4. 依赖库
你不能独立使用backbone，因为它的基础函数、dom操作、ajax都依赖于第三方库。
4.1 underscore
（必选）
underscore是一个用于提高开发效率的基础函数库，它封装了对集合、数组、对象、函数的常用操作，就像jquery封装dom对象一样，你能通过underscore轻易地访问和操作javascript内部对象。
underscore还提供了一些非常实用的函数方法，如：函数节流、模板解析等。
关于underscore中一些主要的方法，我会在下一章详细介绍，但在此之前你必须了解：underscore是backbone必须依赖的库，因为在backbone中许多实现都是基于underscore。
4.2 jquery和zepto
（可选）
相信你对jquery一定不会陌生，它是一个跨浏览器的dom和ajax框架。
而对于zepto你可以理解为“移动版的jquery”，因为它更小、更快、更适合在移动终端设备的浏览器上运行，它与jquery语法相同，因此你能像使用jquery那样使用它。
zepto目前仅支持webkit内核的浏览器，因此它能兼容ios、adnroid、塞班、黑莓和meego等大部分移动系统，而对于windows phone或firefox os，它暂时还不支持。
因为jquery和zepto语法相同，因此对于backbone来说，你无论是使用jquery还是zepto，都没有问题（当然，你不可能两个同时都用到）。
在backbone中，dom选择器、dom事件和ajax，都使用了jquery的方法。这里之所以所它们是可选的，是假设你没有用到backbone中的视图和ajax数据同步功能，那么就不需要导入它们。
如果你不想使用jquery或zepto，而是使用其它的、或自定义库，只要你的库中实现了与jquery语法相同的dom选择器、事件管理和ajax方法，那么就不会任何问题。
backbone允许你通过setdomlibrary方法动态配置需要使用的第三方库，这种情况常常用于：
你的自定义库虽然包含了和jquery相同语法的方法，但全局变量并不是$，而且你想保持现有的命名。这时你可以通过setdomlibrary方法将其设置为backbone内部引用的对象。
你希望通过检查用户的环境，来决定更适合使用哪一个库。例如：如果用户使用pc浏览器访问，则载入jquery，如果用户通过移动终端访问，则载入zepto。