摘要：一種解決問(wèn)題的通用方法，我們叫做模式。事件委托當(dāng)這個(gè)視圖后，頁(yè)面上的就會(huì)綁定事件，只要點(diǎn)擊，就會(huì)執(zhí)行方法。同時(shí)，頁(yè)面上的元素也會(huì)綁定事件。，套入模板后變成，最后添加到頁(yè)面上。

Backbone是一個(gè)實(shí)現(xiàn)了web前端mvc模式的js框架。

一種解決問(wèn)題的通用方法，我們叫做模式。

設(shè)計(jì)模式：工廠模式，適配器模式，觀察者模式等，推薦js設(shè)計(jì)模式這本書。設(shè)計(jì)模式是一種思想。

框架模式：MVC，MVP，MVVM等?？蚣苣Ｊ绞情_發(fā)項(xiàng)目的一種方案。

MVC指的是什么？M：model（模型），V：view（視圖），C：controller（控制器）

MVC模式的思想，把模型和視圖分離，通過(guò)控制器來(lái)連接它們。

這些模塊是怎么實(shí)現(xiàn)mvc的呢？

Events模塊是事件模塊，其他模塊都繼承了Events模塊，因此都有事件模塊的功能。

Model就是模型，Collection是集合，它可以添加多個(gè)模型，叫做模型的集合。Model一般對(duì)應(yīng)一條數(shù)據(jù)，而Collection一般對(duì)應(yīng)多條數(shù)據(jù)。

View就是視圖，但是這里的視圖跟傳統(tǒng)的不一樣，View不僅包括視圖顯示還包括事件監(jiān)聽（這里可以稱作controller），比如說(shuō)：視圖上會(huì)綁定事件回調(diào)函數(shù)。

model可以直接跟view關(guān)聯(lián)操作，model傳數(shù)據(jù)給view，view就顯示這個(gè)數(shù)據(jù)。一個(gè)model最好對(duì)應(yīng)一個(gè)view。Collection也可以直接跟view關(guān)聯(lián)操作。

Router就是路由的意思。如果我們的項(xiàng)目是在一個(gè)頁(yè)面上進(jìn)行開發(fā)的，而不是通過(guò)跳轉(zhuǎn)頁(yè)面。這時(shí)，就不會(huì)出現(xiàn)歷史管理，那如果要在一個(gè)頁(yè)面上進(jìn)行開發(fā)時(shí)，出現(xiàn)歷史管理，那么就必須用hash值或者HTML5的history API。

Router的作用就是在一個(gè)頁(yè)面上進(jìn)行數(shù)據(jù)的對(duì)應(yīng)。比如：數(shù)據(jù)從model傳給Router，然后Router通過(guò)Hash值取到對(duì)應(yīng)的數(shù)據(jù)，最后，Router把對(duì)應(yīng)的數(shù)據(jù)生成到view中，達(dá)到一一對(duì)應(yīng)的效果。Router操作hash值，必須通過(guò)history來(lái)管理。history的設(shè)計(jì)是這樣的：如果支持HTML5，就使用history API，或者監(jiān)聽onhashchange事件。不支持的話，就使用一個(gè)定時(shí)器來(lái)輪詢hash值的變化。

對(duì)model進(jìn)行操作時(shí)，需要跟服務(wù)器進(jìn)行交互，那么model與服務(wù)器進(jìn)行交互的方法就是Sync，Sync使用的是ajax方法跟服務(wù)器進(jìn)行交互。如果你的模型跟服務(wù)器交互使用的是ajax的話，那么就直接使用Sync方法就行了，如果不是，那么就需要重寫Sync方法。

這里面所有的模塊都有Controller的影子，但是Router模塊是最明顯的，因此有時(shí)，我們叫Router為Controller。

Backbone的使用需要依賴于其他的庫(kù)：

underscore.js，此庫(kù)里面有很多基本方法，可以幫Backbone的mode模塊處理數(shù)據(jù)和集合，這樣Backbone就不用寫這些方法了。

jQuery或zepto，此庫(kù)可以幫助view模塊實(shí)現(xiàn)很多頁(yè)面效果，同時(shí)它里面有很多DOM操作的方法，以及Ajax方法。

Backbone的基本使用：

直接創(chuàng)建對(duì)象

第一個(gè)例子

var model = new Backbone.Model();

model.set("name","hello");

model.get("name"); //hello

第二個(gè)例子

var model2 = new Backbone.Model({"name":"hello"});

var model3 = new Backbone.Model({"name":"hi"});

var models = new Backbone.Collection();

models.add(model2 );

models.add(model3 );

JSON.stringify(models); //[{"name":"hello"},{"name":"hi"}]

給構(gòu)造函數(shù)添加實(shí)例方法和靜態(tài)方法

第一個(gè)例子

var M = Backbone.Model.extend({ aaa:function(){} },{ bbb:function(){} }); //這里的aaa就是實(shí)例方法，bbb方法就是靜態(tài)方法。

var model = new M();

model.aaa();

M.bbb();

第二個(gè)例子

var M = Backbone.Model.extend({ defaults:{name:"hello"} })

var model = new M();

model.get("name"); //"hello"

繼承操作

var M = Backbone.Model.extend({ aaa:function(){alert(3)} });

var childM = M.extend(); //繼承，M是父類，有aaa實(shí)例方法，childM是子類，繼承M，所以也有了父類M的aaa方法

var model = new childM();

model.aaa(); //打印出3

自定義事件

第一個(gè)例子

var M = Backbone.Model.extend({

　　defaults:{name:"hello"} ,

　　initialize : function(){ //new M時(shí)，會(huì)執(zhí)行這個(gè)初始化函數(shù)。

　　　　this.on("change",function(){ //監(jiān)聽change事件

　　　　　　alert(1);

　　　　})

　　}

})

var model = new M();

model.set("name","hi"); //改變模型的name值時(shí)，就會(huì)觸發(fā)change事件，彈出1.其實(shí)這里只要改變模型，就會(huì)觸發(fā)。

第二個(gè)例子

var M = Backbone.Model.extend({

　　defaults:{name:"hello"} ,

　　initialize : function(){ //new M時(shí)，會(huì)執(zhí)行這個(gè)初始化函數(shù)。

　　　　this.on("change:name",function(model){ //監(jiān)聽change事件

　　　　　　//回調(diào)方法中的參數(shù)就是model對(duì)象。

　　　　})

　　}

})

var model = new M();

model.set("name","hi"); //改變模型的name值時(shí)，就會(huì)觸發(fā)change事件，彈出1.改變模型的其他數(shù)據(jù)，這里就不會(huì)觸發(fā)。

第三個(gè)例子

var M = Backbone.Model.extend({

　　defaults:{name:"hello"} 　

});

var V = Backbone.View.extend({

　　initialize:function(){ //new V時(shí)，會(huì)跟這個(gè)視圖的model綁定change事件，回調(diào)方法是視圖的show方法

　　　　this.listenTo(this.model, "change", this.show); //listenTo方法跟on一樣是綁定事件的，但是listenTo可以設(shè)置this的指向，它多一個(gè)參數(shù)。它的意思就是：給this.model綁定change事件。

　　},

　　show:funtion(model){

　　　　alert(model.get("name"));

　　}

});

var m= new M();

var v = new V({model:m});

m.set("name","hi"); //改變模型的name值時(shí)，就會(huì)觸發(fā)change事件，在視圖中彈出模型設(shè)置的name值。

數(shù)據(jù)與服務(wù)器的操作

第一個(gè)例子

Backbone.sync = function(method , model){

　　alert(method);

　　model.id = 1;　　//服務(wù)器通過(guò)model的id屬性來(lái)識(shí)別模型的唯一性

　　//method的值有五種：1. create（post請(qǐng)求）。2.update（put請(qǐng)求）。3.delete（delete請(qǐng)求）。4.read（get請(qǐng)求）5.patch（patch請(qǐng)求）。在這個(gè)例子中，當(dāng)?shù)谝淮握{(diào)用sava方法時(shí)，是post請(qǐng)求，在服務(wù)器上創(chuàng)建name:"hello"。當(dāng)?shù)诙握{(diào)用sava({name:"hi"})方法時(shí)，是put請(qǐng)求，因?yàn)榉?wù)器上這時(shí)已經(jīng)有name值了，現(xiàn)在是更新服務(wù)器上的name值為"hi"。

}

var M = Backbone.Model.extend({

　　defaults:{name:"hello"},

　　url : "/user"

});

var m = new M();

m.save(); //保存model的數(shù)據(jù)，把數(shù)據(jù)同步到服務(wù)器上，調(diào)用的是Backbone.sync方法（默認(rèn)使用ajax請(qǐng)求，如果引入了jQuery，就會(huì)使用jQuery的ajax）。我們只要在model中設(shè)置url屬性就行了，這樣程序才知道把數(shù)據(jù)同步到哪個(gè)服務(wù)器上，其實(shí)就是同步到這個(gè)url上。當(dāng)然你可以重寫B(tài)ackbone.sync方法，來(lái)改變使用ajax方式同步服務(wù)器的操作。

m.save({name:"hi"});

第二個(gè)例子

Backbone.sync = function(method , model){

　　alert(method); //當(dāng)調(diào)用fetch方法時(shí)，也會(huì)執(zhí)行sync方法，這時(shí)的method就是read（get請(qǐng)求），從服務(wù)器獲取數(shù)據(jù)。

}

var C = Backbone.Collection.extend({

　　initialize:function(){

　　　　this.on("reset",function(){ //數(shù)據(jù)獲取成功后，就會(huì)觸發(fā)這個(gè)reset事件

　　　　　　alert(1);

　　　　})

　　},

　　url : "/users"

});

var models = new C();

models.fetch(); //從服務(wù)器/users路徑獲取數(shù)據(jù)

路由與歷史管理

var route = Backbone.Router.extend({

　　routes:{

　　　　"help":"help",

　　　　"search/:query":"search", //:代表這個(gè)字符是變量，意思就是query是一個(gè)變量，假設(shè)query=chaojidan，那么這里的"search/chaojidan"對(duì)應(yīng)search函數(shù)。

　　　　"search/:query/p:page": "search"

　　},

　　help:function(){

　　　　alert(1);

　　},

　　search:function(query,page){

　　　　alert(2);

　　}

});

var w = new route();

Backbone.history.start(); //必須執(zhí)行這個(gè)代碼，路由才能正常使用。這時(shí)，歷史管理也實(shí)現(xiàn)了。移動(dòng)端開發(fā)很適合這種單頁(yè)操作，不用頁(yè)面的跳轉(zhuǎn)，只要改變hash值就能進(jìn)行功能的實(shí)現(xiàn)。

事件委托

var V = Backbone.View.extend({

　　el:$("body"),

　　events :{

　　　　"click input": "aaa",

　　　　"mouseover li" : "bbb"

　　},

　　aaa:function(){

　　　　alert(1);

　　},

　　bbb:function(){

　　　　alert(2);

　　}

});

var view = new V; //當(dāng)new這個(gè)視圖后，頁(yè)面上的input就會(huì)綁定click事件，只要點(diǎn)擊input，就會(huì)執(zhí)行aaa方法。同時(shí)，頁(yè)面上的li元素也會(huì)綁定mouseover事件。視圖的el指向的是頁(yè)面的body元素，是el指向的元素就是此視圖的根元素，事件的綁定會(huì)從這個(gè)根元素上開始查找元素。

前端模板

var M = Backbone.Model.extend({

　　defaults:{name:"hello"} 　

});

var V = Backbone.View.extend({

　　initialize:function(){

　　　　this.listenTo(this.model, "change", this.show); //給this.model綁定change事件，事件響應(yīng)函數(shù)是this.show，this.show方法中的this指向是this(view)，而不是this.model（model），這就是listerTo方法跟on的不同。

　　},

　　show:funtion(model){

　　　　$("body").append( this.template( this.model.toJSON() ) ); //this.model.toJSON() = {name:hi}，套入模板后變成

　　},

　　template:_.template($("#template").html());

});

var m= new M();

var v = new V({model:m});

m.set("name","hi");