作者：nuysoft/高云/nuysoft@gmail.com

聲明：本文為原創(chuàng)文章，如需轉(zhuǎn)載，請注明來源并保留原文鏈接。

Backbone0.9.1源碼分析分析系列

jQuery1.6.1源碼分析系列

參考資料

http://documentcloud.github.com/backbone/?http://www.csser.com/tools/backbone/backbone.js.html

官網(wǎng)介紹

Backbone通過提供模型Models、集合Collection、視圖Veiew賦予了Web應(yīng)用程序分層結(jié)構(gòu)。通過以下方式實現(xiàn)分層結(jié)構(gòu)：?
? 模型Model綁定鍵值數(shù)據(jù)和自定義事件；?
? 集合Colection是模型的有序或無序集合，帶有豐富的可枚舉API；?
? 視圖View聲明事件監(jiān)聽函數(shù)；?
? 將模型、集合、視圖與服務(wù)端的RESTful JSON接口連接。

自調(diào)用匿名函數(shù)

整個Backbone的源碼用一個自調(diào)用匿名函數(shù)包裹，可以通過閉包特性引用變量(例如 previousBackbone、slice、splice等)，同時避免污染全局命名空間。?
整體結(jié)構(gòu)如下，還是很清晰的：

1: (function() { 2: Backbone.Events // 自定義事件 3: Backbone.Model // 模型構(gòu)造函數(shù)和原型擴展 4: Backbone.Collection // 集合構(gòu)造函數(shù)和原型擴展 5: Backbone.Router // 路由配置器構(gòu)造函數(shù)和原型擴展 6: Backbone.History // 路由器構(gòu)造函數(shù)和原型擴展 7: Backbone.View // 視圖構(gòu)造函數(shù)和原型擴展 8: Backbone.sync // 異步請求工具方法 9: var extend = function (protoProps, classProps) { ... } // 自擴展函數(shù) 10: Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend; // 自擴展方法 11: }).call(this);

依賴庫

Backbone必須依賴于 Underscore.js，DOM操作和AJAX請求依賴于第三方j(luò)Query/Zepto/ender之一，也可以通過 Backbone.setDomLibrary( lib ) 設(shè)置其他的第三方庫。

自定義事件模塊 Backbone.Events

可以和任意對象合體(將方法賦值到其他對象或原型上)，合體后的對象可以自定義事件，提供三個方法來綁定、移除、觸發(fā)自定義事件。

模型 Backbone.Model

是 JavaScript 應(yīng)用程序的核心，包含業(yè)務(wù)數(shù)據(jù)和對業(yè)務(wù)數(shù)據(jù)的讀寫和持久化，模型的主要方法包括讀寫和持久化。

集合 Backbone.Collection

集合是模型的有序集合，可以在集合上綁定 "change" 事件，當(dāng)集合中的任何模型發(fā)生變化時收到通知，集合也可以監(jiān)聽 "add" 和 “remove" 事件， 從服務(wù)器獲取數(shù)據(jù)，并能使用 Underscore.js 提供的全套方法。?
為了方便，在集合中的模型上觸發(fā)的任何事件都會在集合上直接觸發(fā)。這樣就可以監(jiān)聽集合中模型的指定屬性的變化。 例如：Documents.on("change:selected", ...)
集合的主要方法包括讀寫、維護和持久化。

路由配置器 Backbone.Router

Web應(yīng)用程序通常需要為重要頁面提供可鏈接、收藏、可分享的 URL。 直到最近， 錨文片段(hash #page)可以被用來提供這種固定鏈接；同時隨著 History API 的到來，錨文現(xiàn)在可以用于處理標(biāo)準(zhǔn) URLs (/page)。

Backbone.Router 為客戶端頁面路由提供了許多方法，并能連接到指定的動作(actions)和事件(events)。對于不支持 History API 的舊瀏覽器，路由器提供了優(yōu)雅的回調(diào)函數(shù)并可以透明的進行 URL 片段的轉(zhuǎn)換。

頁面加載期間，當(dāng)應(yīng)用程序已經(jīng)創(chuàng)建了所有的路由表，需要調(diào)用 Backbone.history.start()，或 Backbone.history.start({pushState : true}) 確保路由初始 URL。

?

路由器 Backbone.History

作為全局路由器，用于處理 hashchange 或 pushState事件，匹配適合的路由表，并觸發(fā)回調(diào)函數(shù)。?
如果使用帶有路由表的路由器，會自動創(chuàng)建一個History對象，此時不要再創(chuàng)建一個History對象，而是使用 Backbone.history。?
Backbone 會自動判斷瀏覽器對 pushState 的支持，以做內(nèi)部的選擇。 不支持 pushState 的瀏覽器將會繼續(xù)使用基于錨點的 URL 片段。?

關(guān)于官網(wǎng)疑惑：?如果兼容 pushState 的瀏覽器訪問了某個 URL 錨點，將會被透明的轉(zhuǎn)換為真實的 URL。 注意使用真實的 URLs 需要 web 服務(wù)器支持直接渲染那些頁面，因此后端程序也需要做修改。?
瀏覽器發(fā)起HTTP請求時并不會把錨文部分放在請求頭中，查看 http rfc2612 也沒有發(fā)現(xiàn)相關(guān)的說明，保留疑問。?http://www.w3.org/Protocols/rfc2616/rfc2616.html

視圖 Backbone.View

視圖的使用相當(dāng)方便，不需要判斷任何HTML、CSS，可以任意JavaScript模板引擎集成。

通用的做法是，將界面組織成基于模型的詩句，當(dāng)模型改變時視圖立即更新，而不需要重畫整個頁面。

不再需要糾結(jié)于JSON對象、查找DOM元素、手動更新HTML，只需把視圖 render 方法綁定到模型的 change 事件，模型數(shù)據(jù)會立即顯示到UI上。

擴展方法 extend

模型、集合、視圖、路由器都一個extend方法，用于擴展原型屬性和靜態(tài)屬性，創(chuàng)建自定義的視圖、集合、視圖、路由器類。

總結(jié)

以上是生活随笔為你收集整理的Backbone源码分析-Backbone架构+流程图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。