基于對(duì)Backbone.js的學(xué)習(xí)與幾個(gè)項(xiàng)目實(shí)踐，從本篇開(kāi)始介紹Backbone.js，希望給看官提供一些幫助，同時(shí)鞏固、提升已有知識(shí)。經(jīng)過(guò)這些年的發(fā)展，前端MVC、MV*模式框架都得到了巨大的發(fā)展，如Backbone.js、AngularJs。在介紹Backbone之前有必要先了解一下MVC。
MVC
MVC，即Model-View-Controller，是一種架構(gòu)設(shè)計(jì)模式，強(qiáng)調(diào)通過(guò)分離關(guān)注點(diǎn)以改進(jìn)程序的組織結(jié)構(gòu)，通過(guò)將業(yè)務(wù)數(shù)據(jù)與用戶界面分離、由另外的組件控制邏輯、用戶輸入、模型與視圖的交互實(shí)現(xiàn)關(guān)注點(diǎn)分離。
Backbone
經(jīng)過(guò)不斷發(fā)展與嘗試，JavaScript開(kāi)發(fā)人員將MVC模式融進(jìn)了前端開(kāi)發(fā)，并提出了多個(gè)使用MVC的JavaScript框架，如接下來(lái)要介紹的Backbone。
模型
不同框架中模型功能多少會(huì)有些不同，但一般都會(huì)有表示模型數(shù)據(jù)的屬性。
- Backbone模型是一種持久化模型，允許對(duì)保存的模型進(jìn)行修改，更新，常見(jiàn)的是在瀏覽器localStorage保存或與數(shù)據(jù)庫(kù)同步。
- Backbone通常將模型進(jìn)行分類分組，在分組中管理具有同一類特征的模型，這些分組就是集合，集合可以對(duì)模型進(jìn)行許多操作。
- Backbone中通常有一個(gè)或多個(gè)視圖觀察同一模型，模型更新時(shí)，視圖獲得通知，進(jìn)行視圖更新
集合
集合是模型的有序組合，一般通過(guò)對(duì)同一性質(zhì)或類型模型進(jìn)行分組歸入不同集合以集中管理模型，但集合并不是必須的。
- 集合可以很方便的添加和刪除、更新模型，檢索模型，并能對(duì)模型進(jìn)行批量管理。
- 集合通過(guò)綁定change事件可以監(jiān)聽(tīng)到集合中模型的變化，并執(zhí)行相應(yīng)監(jiān)聽(tīng)函數(shù)。
視圖
在程序中，用戶一般只與用戶界面（即視圖）交互，用戶通過(guò)視圖對(duì)模型進(jìn)行操作。
- Backbone在視圖中定義render()方法，一般使用JavaScript模板引擎渲染模型內(nèi)容，生成視圖。
- Backbone模型構(gòu)造函數(shù)（initialize()方法）中添加render()回調(diào)方法，在模型內(nèi)容變更時(shí)觸發(fā)更新視圖。
- Backbone視圖中events對(duì)象采用事件委托形式為視圖元素綁定監(jiān)聽(tīng)事件回調(diào)函數(shù)。
模板
相對(duì)于最初通過(guò)字符串拼接，在內(nèi)存中創(chuàng)建大量HTML標(biāo)記，然后便利數(shù)據(jù)插入，耗費(fèi)大量成本的這種不明智方式，JavaScript模板庫(kù)通常將視圖模板定義為包含模板變量的HTML標(biāo)記。模板可以保存在script標(biāo)簽或外部文件模板中，變量通過(guò)變量語(yǔ)法分隔；以多種格式接收數(shù)據(jù)，常見(jiàn)的是JSON格式。
如Underscore.js模板：
<div>
<h1><%= title %></h1>
<p><%= description %></p>
<p><%= price %></p>
<div class="buy <%= num > 0 ? 'buy' : 'disabled' %>"></div>
</div>
事件Event
Backbone事件Event，將事件觸發(fā)后要執(zhí)行的函數(shù)注冊(cè)成事件處理句柄，事件發(fā)生便觸發(fā)執(zhí)行該函數(shù)。
- 可以將業(yè)務(wù)邏輯與用戶界面關(guān)注點(diǎn)分離，即業(yè)務(wù)邏輯不需要知道界面工作流程。
- Backbone.Events對(duì)象混入Backbone模型、集合、路由、視圖等諸多對(duì)象中。
- Backbone.Events可以讓任何對(duì)象具有綁定和觸發(fā)事件的能力。
//引入underscore.js...
var obj = {};
_.extend(obj, Backbone.Events);
obj.on('eat', function(msg) {
console.log(msg);
});
obj.trigger('eat', 'eat food');
路由
嚴(yán)格來(lái)說(shuō)，Backbone中并沒(méi)有MVC中的控制器，通常在視圖中包含控制器邏輯，而使用路由管理應(yīng)用程序狀態(tài)，在不刷新頁(yè)面的同時(shí)通過(guò)監(jiān)聽(tīng)文檔url的hash片段變化，導(dǎo)向不同的視圖和模型。
- Backbone支持動(dòng)態(tài)路由選擇，允許定義帶參數(shù)的路由，可以根據(jù)參數(shù)在路由回調(diào)函數(shù)中進(jìn)行不同處理。
- Backbone以Backbone.history作為路由的入口，無(wú)論是點(diǎn)擊瀏覽器前進(jìn)后退按鈕還是手動(dòng)使用navigate導(dǎo)航，都是從history入口，根據(jù)定義好的路由匹配規(guī)則進(jìn)入路由回調(diào)函數(shù)，實(shí)現(xiàn)功能。
本篇主要介紹了一下Backbone.js的主要特征及主要模塊，對(duì)Backbone有一個(gè)綜合的了解，下篇開(kāi)始學(xué)習(xí)Backbone具體模塊。
