1.1 Backbone簡介

Backbone是一個非常輕量級的JavaScript庫，壓縮后的文件僅有16KB，即使加上依賴庫Underscore也只有29KB。體積雖然輕量，但功能十分強大，使用該架構，可以打造一個模型（Model）–視圖（View）–控制器（Controller）即MVC類結構的應用程序。通過這種結構，能夠高效、分門別類地管理Web應用程序中紛亂復雜的JavaScript代碼，以及處理單頁界面（SPI）中含有大量復雜的AJAX交互請求。

1.1.1 Backbone的MVC結構

Backbone的功能如此強大，主要原因是它提供了一套非常完整的MVC結構的Web開發框架。在這套框架中，數據模型（Model）負責數據原型的創建和各類事件的自定義，并通過key/value形式綁定原型數據；通過數據模型集合（Collection）所提供的API向原型中添加各類數據；最后通過視圖控制器（View）綁定頁面中元素的內容并處理相應事件，并通過RESTful JSON接口方式與原有應用程序中的數據進行動態交互。其完整結構如圖1-1所示。

1.1.2 特點及適用范圍

Backbone是一個非常輕量級的aScript框架，與其他前端框架相比而言，有許多共同點，此外其自身還有許多其他框架備的特點，包含以下幾個方面。

1.MVC結構化

這是Backbone最為顯著的特點，根據這一特性，開發人員可以很方便地以MVC體系來組織和開發自己的代碼，真正做到數據交互、邏輯處理、頁面展示的分離；并可以組織分工開發，減少重復開發，提高代碼的開發效率和可維護性，而這些對于大型復雜的前端代碼開發至關重要。

2.繼承特性

在JavaScript代碼中，由于沒有類的概念，因此，繼承是一個比較困難的事情。通過Backbone框架，不僅能以面向對象的方式編寫自己的數據、集合、視圖模型，而且這些模型都具有可繼承性，這使得開發人員可以很方便地重載這些模型和擴展一些自定義的屬性和方法。這一特性，使應用的框架更加清晰，更利于后續代碼的維護與升級。

3.事件統一管理

在視圖模型中，開發者可以通過以下代碼對事件進行統一管理。

events: {
    'click #btnAdd': 'btnAdd_Click'
}

在上述代碼中，“events”為事件聲明，在接下來的大括號中，以表達式的方式聲明各類元素綁定的事件和事件觸發時執行的函數。其中，“click”表示元素綁定的事件名稱，“#btnAdd”表示頁面中ID號為“btnAdd”的元素，“btnAdd_Click”表示事件觸發時所執行的函數名稱；如果需要綁定多個元素的事件，可以通過逗號進行隔開。在視圖初始化時，會自動將表達式中的事件綁定到對應元素中。在事件被觸發時，視圖會自動執行事件對應的函數。

4.綁定頁面模板

Backbone可以直接調用頁面中的HTML模板，這樣做有兩個好處：一是可以在HTML模板中嵌入JavaScript代碼，無須在動態生成HTML元素時拼接字符串，減少頁面執行時的出錯率；另一個好處可以在視圖中管理頁面中的模板，即定義多套HTML頁面模板，再根據實際需要選擇加載和頁面的渲染，極大提升了前端開發人員的工作效率。

5.服務端無縫交互

在Backbone內部中，有一整套與服務器數據自動同步的機制，通過這套機制，用戶只需要關注客戶端的操作，執行完這些操作后的數據將會在模型類中自動同步到服務器中。而這樣的交互也是無縫的，即只要在頁面中數據有變化，數據就會自動與服務器同步，至于這一套數據的同步原理和過程,將會在后續的章節中進行詳細介紹。

提示

Backbone是構建一個MVC類結構的JavaScript庫，是一個重量級的類庫。為了更好地體現它的優勢，筆者建議在構建大型邏輯復雜的單頁應用時使用它。由于在Backbone中，各類模塊間的依賴性不并不太強，開發人員也可以從源碼庫中單獨抽離出某一個模塊類，應用到現有的Web開發當中，也是一個很不錯的選擇。