1. 前言

　　本文的目的，是幫助大家快速理解掌握Backbone的使用，但它并不是API，因此我不會將每一個方法都詳細地描述，但是我會告訴你如何學習它們。

　　這是一篇稍稍較長的技術文章，因為我想將我所了解的東西盡可能詳細地分享給大家。但它還不至于出版為一本書籍，因為Backbone其實非常簡單。當然，這并不表示Backbone提供的功能有限，相反，它能用簡單的實現構建出復雜的應用，這正是Backbone的強大之處。

　　在正式學習Backbone之前，你需要準備一些東西：

　　首先，你需要獲取Backbone框架源文件：http://documentcloud.github.com/backbone/

　　Backbone依賴于Underscore框架的基礎方法，因此，你同時需要下載Underscore框架的源文件：http://documentcloud.github.com/underscore/

　　在Backbone中，對DOM和事件的操作依賴于第三方庫（如jQuery或Zepto），你只需要選擇其中一個下載：

　　jQuery：http://jquery.com/

　　Zepto：http://zeptojs.com/

　　看起來好像挺麻煩的樣子，但Backbone的目的是在于使用簡單的框架來構建復雜的應用，因此麻煩并不表示它很復雜。

　　在后續章節，我將詳細介紹它們之間的關系和依賴，但在此之前，你可以新建一個HTML頁面，并將這些框架引入進來，就像這樣：?

[html]?view plain?copy

<script?type="text/javascript"?src="jquery/jquery-1.8.2.min.js"></script>??
<script?type="text/javascript"?src="underscore/underscore-min.js"></script>??
<script?type="text/javascript"?src="backbone/backbone-min.js"></script>??

　至此，你已經準備好了運行Backbone必須的環境。

如果學習過程中有任何問題，或者你有更好的建議，歡迎聯系我一起交流：

2. 什么是Backbone?

　　Backbone是一個輕量級的前端MVC框架，用于結構化管理頁面中的大量JS，建立與服務器、視圖間的無縫連接，為構建復雜的應用提供基礎框架。

下面我先簡單地闡述下Backbone的主要特點及特性：

2.1 輕量級

　　Backbone的源碼只有1000行左右（去注釋和空行后），文件大小只有16KB，加上依賴庫Underscore，也僅有29KB。

　　你只需要花一點時間，就能輕松了解Backbone內部實現；或編寫少量代碼，來重載Backbone的部分機制；如果你想在Backbone的基礎上做二次開發，也并不是一件復雜的事情。

2.2 MVC結構化

　　Backbone可以輕松將頁面中的數據、邏輯、視圖解耦，依照Backbone進行代碼結構組織，你可以將項目中的數據交互、業務邏輯、用戶界面等工作，分配給多個同事同時開發，并能有序地組織到一起。同時，這對于大型和復雜項目的維護開發非常有幫助。

2.3 繼承機制

　　在Backbone中，模塊是可以被繼承的，你可以通過面向對象的方式將應用中的數據模型、集合、視圖有序地組織，讓整個架構更加清晰；也可以方便地重載和擴展自定義方法。

2.4 建立與服務器的無縫連接

　　在Backbone中內置了一套與服務器數據的交互規則（如果你了解REST架構，就能夠輕松地理解它們），而數據的同步工作會在Model中自動進行，前端開發人員只需對客戶端數據的進行操作，Backbone會自動將操作的數據同步到服務器。

　　這是件非常有趣的事情，因為服務器數據接口對前端開發者來說是透明的，他們不需要再關心如何和服務器交互。

　　然而服務器提供的數據接口也需要兼容Backbone的規則，對于一個新的項目來說，我們可以嘗試使用這套規則來構建接口。但如果你的項目中已經有一套穩定的接口，你可能會擔心接口改造的風險。

　　沒關系，我們可以通過重載Backbone.sync方法來適配現有的數據接口，針對不同的客戶端環境，我們還可以實現不同的數據交互方式。例如：用戶通過PC瀏覽器使用服務時，數據會實時同步到服務器；而用戶通過移動終端使用服務時，考慮到網絡環境問題，我們可以先將數據同步到本地數據庫，在合適的時候再同步到服務器。而這些只需要你重載一個方法就可以實現。

2.5 界面事件管理

　　在MVC中，我們希望能將界面展現和業務邏輯完全分離，但對于用戶產生的交互事件（如單擊事件），我們卻常常通過類似jQuery中的bind方法進行獲取和綁定。

　　Backbone中的視圖幫助我們將用戶事件和執行方法有序的組織起來，這只需要我們聲明一個簡單的表達式，例如：

[javascript]?view plain?copy

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代碼一樣：

[html]?view plain?copy

<ul>??
????<%?for(var?i?=?0;?i?<?len;?i++)?{?%>??
????<li><%=data[i].title%></li>??
????<%?}?%>??
</li>??

通過模板解析，我們不需要在動態生成HTML結構時拼接字符串，更重要的是，我們可以將視圖中的HTML結構獨立管理（例如：不同的狀態可能會顯示不同的HTML結構，我們可以定義多個單獨的模板文件，按需加載和渲染即可）。

2.7 自定義事件管理

　　在Backbone中，你可以使用on或off方法綁定和移除自定義事件。在任何地方，你都可以使用trigger方法觸發這些綁定的事件，所有綁定過該事件的方法都會被執行，如：

[javascript]?view plain?copy

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”事件監聽對象狀態的變化。

2.8 路由器

　　在單頁應用中，我們通過JavaScript來控制界面的切換和展現，并通過AJAX從服務器獲取數據。

　　可能產生的問題是，當用戶希望返回到上一步操作時，他可能會習慣性地使用瀏覽器“返回”和“前進”按鈕，而結果卻是整個頁面都被切換了，因為用戶并不知道他正處于同一個頁面中。

　　對于這個問題，我們常常通過Hash（錨點）的方式來記錄用戶的當前位置，并通過onhashchange事件來監聽用戶的“前進”和“返回”動作，但我們發現一些低版本的瀏覽器（例如IE6）并不支持onhashchange事件。

　　Backbone提供了路由控制功能，通過Backbone提供的路由器，我們能通過一個簡單的表達式將路由地址和事件函數綁定在一起，例如：

[javascript]?view plain?copy

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();??