參考資料
http://documentcloud.github.com/backbone/
http://www.csser.com/tools/backbone/backbone.js.html
官網介紹
Backbone通過提供模型Models、集合Collection、視圖Veiew賦予了Web應用程序分層結構。通過以下方式實現分層結構:
模型Model綁定鍵值數據和自定義事件;
集合Colection是模型的有序或無序集合,帶有豐富的可枚舉API;
視圖View聲明事件監聽函數;
將模型、集合、視圖與服務端的RESTful JSON接口連接。
自調用匿名函數
整個Backbone的源碼用一個自調用匿名函數包裹,可以通過閉包特性引用變量(例如 previousBackbone、slice、splice等),同時避免污染全局命名空間。
整體結構如下,還是很清晰的:
1: (function() {
2: Backbone.Events // 自定義事件
3: Backbone.Model // 模型構造函數和原型擴展
4: Backbone.Collection // 集合構造函數和原型擴展
5: Backbone.Router // 路由配置器構造函數和原型擴展
6: Backbone.History // 路由器構造函數和原型擴展
7: Backbone.View // 視圖構造函數和原型擴展
8: Backbone.sync // 異步請求工具方法
9: var extend = function (protoProps, classProps) { ... } // 自擴展函數
10: Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend; // 自擴展方法
11: }).call(this);
依賴庫
Backbone必須依賴於 Underscore.js,DOM操作和AJAX請求依賴於第三方jQuery/Zepto/ender之一,也可以通過 Backbone.setDomLibrary( lib ) 設置其他的第三方庫。
自定義事件模塊 Backbone.Events
可以和任意對象合體(將方法賦值到其他對象或原型上),合體后的對象可以自定義事件,提供三個方法來綁定、移除、觸發自定義事件。
模型 Backbone.Model
是 JavaScript 應用程序的核心,包含業務數據和對業務數據的讀寫和持久化,模型的主要方法包括讀寫和持久化。
集合 Backbone.Collection
集合是模型的有序集合,可以在集合上綁定 "change" 事件,當集合中的任何模型發生變化時收到通知,集合也可以監聽 "add" 和 “remove" 事件, 從服務器獲取數據,並能使用 Underscore.js 提供的全套方法。
為了方便,在集合中的模型上觸發的任何事件都會在集合上直接觸發。這樣就可以監聽集合中模型的指定屬性的變化。 例如:Documents.on("change:selected", ...)
集合的主要方法包括讀寫、維護和持久化。
路由配置器 Backbone.Router
Web應用程序通常需要為重要頁面提供可鏈接、收藏、可分享的 URL。 直到最近, 錨文片段(hash #page)可以被用來提供這種固定鏈接;同時隨着 History API 的到來,錨文現在可以用於處理標准 URLs (/page)。
Backbone.Router 為客戶端頁面路由提供了許多方法,並能連接到指定的動作(actions)和事件(events)。對於不支持 History API 的舊瀏覽器,路由器提供了優雅的回調函數並可以透明的進行 URL 片段的轉換。
頁面加載期間,當應用程序已經創建了所有的路由表,需要調用 Backbone.history.start(),或 Backbone.history.start({pushState : true}) 確保路由初始 URL。
路由器 Backbone.History
作為全局路由器,用於處理 hashchange 或 pushState事件,匹配適合的路由表,並觸發回調函數。
如果使用帶有路由表的路由器,會自動創建一個History對象,此時不要再創建一個History對象,而是使用 Backbone.history。
Backbone 會自動判斷瀏覽器對 pushState 的支持,以做內部的選擇。 不支持 pushState 的瀏覽器將會繼續使用基於錨點的 URL 片段。
關於官網疑惑:
如果兼容 pushState 的瀏覽器訪問了某個 URL 錨點,將會被透明的轉換為真實的 URL。 注意使用真實的 URLs 需要 web 服務器支持直接渲染那些頁面,因此后端程序也需要做修改。
瀏覽器發起HTTP請求時並不會把錨文部分放在請求頭中,查看 http rfc2612 也沒有發現相關的說明,保留疑問。
http://www.w3.org/Protocols/rfc2616/rfc2616.html
視圖 Backbone.View
視圖的使用相當方便,不需要判斷任何HTML、CSS,可以任意JavaScript模板引擎集成。
通用的做法是,將界面組織成基於模型的詩句,當模型改變時視圖立即更新,而不需要重畫整個頁面。
不再需要糾結於JSON對象、查找DOM元素、手動更新HTML,只需把視圖 render 方法綁定到模型的 change 事件,模型數據會立即顯示到UI上。
擴展方法 extend
模型、集合、視圖、路由器都一個extend方法,用於擴展原型屬性和靜態屬性,創建自定義的視圖、集合、視圖、路由器類。