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

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

一種解決問題的通用方法，我們叫做模式。

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

框架模式：MVC，MVP，MVVM等。框架模式是開發(fā)項目的一種方案。

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

MVC模式的思想，把模型和視圖分離，通過控制器來連接它們。

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

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

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

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

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

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

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

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

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

Backbone的使用需要依賴于其他的庫：

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

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

Backbone的基本使用：

直接創(chuàng)建對象

第一個例子

var model = new Backbone.Model();

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

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

第二個例子

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ù)添加實例方法和靜態(tài)方法

第一個例子

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

var model = new M();

model.aaa();

M.bbb();

第二個例子

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實例方法，childM是子類，繼承M，所以也有了父類M的aaa方法

var model = new childM();

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

自定義事件

第一個例子

var M = Backbone.Model.extend({

　　defaults:{name:"hello"} ,

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

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

　　　　　　alert(1);

　　　　})

　　}

})

var model = new M();

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

第二個例子

var M = Backbone.Model.extend({

　　defaults:{name:"hello"} ,

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

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

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

　　　　})

　　}

})

var model = new M();

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

第三個例子

var M = Backbone.Model.extend({

　　defaults:{name:"hello"} 　

});

var V = Backbone.View.extend({

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

　　　　this.listenTo(this.model, "change", this.show); //listenTo方法跟on一樣是綁定事件的，但是listenTo可以設置this的指向，它多一個參數(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值時，就會觸發(fā)change事件，在視圖中彈出模型設置的name值。

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

第一個例子

Backbone.sync = function(method , model){

　　alert(method);

　　model.id = 1;　　//服務器通過model的id屬性來識別模型的唯一性

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

}

var M = Backbone.Model.extend({

　　defaults:{name:"hello"},

　　url : "/user"

});

var m = new M();

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

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

第二個例子

Backbone.sync = function(method , model){

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

}

var C = Backbone.Collection.extend({

　　initialize:function(){

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

　　　　　　alert(1);

　　　　})

　　},

　　url : "/users"

});

var models = new C();

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

路由與歷史管理

var route = Backbone.Router.extend({

　　routes:{

　　　　"help":"help",

　　　　"search/:query":"search", //:代表這個字符是變量，意思就是query是一個變量，假設query=chaojidan，那么這里的"search/chaojidan"對應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í)行這個代碼，路由才能正常使用。這時，歷史管理也實現(xiàn)了。移動端開發(fā)很適合這種單頁操作，不用頁面的跳轉(zhuǎn)，只要改變hash值就能進行功能的實現(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; //當new這個視圖后，頁面上的input就會綁定click事件，只要點擊input，就會執(zhí)行aaa方法。同時，頁面上的li元素也會綁定mouseover事件。視圖的el指向的是頁面的body元素，是el指向的元素就是此視圖的根元素，事件的綁定會從這個根元素上開始查找元素。

前端模板

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事件，事件響應函數(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");