簡介

Web 應用程序越來越關注于前端，使用客戶端腳本與 Ajax 進行交互。由于 JavaScript 應用程序越來越復雜，如果沒有合適的工具和模式，那么 JavaScript 代碼的高效編寫、非重復性和可維護性方面會面臨挑戰。模型-視圖-控制器 (MVC) 是一個常見模式，可用于服務器端開發以生成有組織以及易維護的代碼。MVC 支持將數據（比如通常用于 Ajax 交互的 JavaScript Object Notation (JSON) 對象）從表示層或從頁面的文檔對象模型 (document object model, DOM) 中分離出來，也可適用于客戶端開發。

Backbone（也稱為 Backbone.js）是由 Jeremy Ashkenas 創建的一個輕量級庫，可用于創建 MVC 類應用程序。Backbone：

強制依賴于 Underscore.js，Underscore.js 是一個實用型庫 非強制依賴于 jQuery/Zepto 根據模型的變更自動更新應用程序的 HTML，有助于代碼維護 促進客戶端模板使用，避免了在 JavaScript 中嵌入 HTML 代碼

模型、視圖、集合和路由器是 Backbone 框架中的主要組件。在 Backbone 中，模型會存儲通過 RESTful JSON 接口從服務器檢索到的數據。模型與視圖密切關聯，負責為特定 UI 組件渲染 HTML 并處理元素上觸發的事件，這也是視圖本身的一部分。

SPI 應用程序：Backbone.Router 和 Backbone.history

含有大量 Ajax 交互的應用程序越來越像那些無頁面刷新的應用程序。這些應用程序常常試圖限制與單個頁面的交互。該 SPI 方法提高了效率和速度，并使整個應用程序變得更靈敏。狀態概念代替了頁面概念。散列 (Hash) 片段被用于識別一個特定狀態。散列片段 是 URL 中散列標簽 (#) 后的那部分，是該類應用程序的關鍵元素。清單 1 顯示了一個 SPI 應用程序使用兩個不同的散列片段產生的兩個不同狀態。

清單 1. SPI 或 Ajax 應用程序中的兩個不同狀態

http://www.example.com/#/state1

http://www.example.com/#/state2

Backbone 提供一個稱為路由器（版本 0.5 前稱之為控制器）的組件來路由客戶端狀態。路由器可以擴展 Backbone.Router 函數，且包含一個散列映射（routes 屬性）將狀態與活動關聯起來。當應用程序達到相關狀態時，會觸發一個特定活動。清單2 展示了一個 Backbone 路由器示例。

清單 2. Backbone.Router 示例：routers.js

App.Routers.Main = Backbone.Router.extend({    // Hash maps for routes  routes : {   "" : "index",   "/teams" : "getTeams",   "/teams/:country" : "getTeamsCountry",   "/teams/:country/:name : "getTeam"   "*error" : "fourOfour"  },    index: function(){    // Homepage   },    getTeams: function() {    // List all teams   },  getTeamsCountry: function(country) {    // Get list of teams for specific country  },  getTeam: function(country, name) {    // Get the teams for a specific country and with a specific name  },   fourOfour: function(error) {    // 404 page  }});