Backbone是一個實現了web前端mvc模式的js框架。
一種解決問題的通用方法，我們叫做模式。
設計模式：工廠模式，適配器模式，觀察者模式等，推薦js設計模式這本書。設計模式是一種思想。
框架模式：MVC，MVP，MVVM等。框架模式是開發項目的一種方案。
MVC指的是什么？M：model（模型），V：view（視圖），C：controller（控制器）
MVC模式的思想，把模型和視圖分離，通過控制器來連接它們。
這些模塊是怎么實現mvc的呢？
Events模塊是事件模塊，其他模塊都繼承了Events模塊，因此都有事件模塊的功能。
Model就是模型，Collection是集合，它可以添加多個模型，叫做模型的集合。Model一般對應一條數據，而Collection一般對應多條數據。
View就是視圖，但是這里的視圖跟傳統的不一樣，View不僅包括視圖顯示還包括事件監聽（這里可以稱作controller），比如說：視圖上會綁定事件回調函數。
model可以直接跟view關聯操作，model傳數據給view，view就顯示這個數據。一個model最好對應一個view。Collection也可以直接跟view關聯操作。
Router就是路由的意思。如果我們的項目是在一個頁面上進行開發的，而不是通過跳轉頁面。這時，就不會出現歷史管理，那如果要在一個頁面上進行開發時，出現歷史管理，那么就必須用hash值或者HTML5的history API。
Router的作用就是在一個頁面上進行數據的對應。比如：數據從model傳給Router，然后Router通過Hash值取到對應的數據，最后，Router把對應的數據生成到view中，達到一一對應的效果。Router操作hash值，必須通過history來管理。history的設計是這樣的：如果支持HTML5，就使用history API，或者監聽onhashchange事件。不支持的話，就使用一個定時器來輪詢hash值的變化。
對model進行操作時，需要跟服務器進行交互，那么model與服務器進行交互的方法就是Sync，Sync使用的是ajax方法跟服務器進行交互。如果你的模型跟服務器交互使用的是ajax的話，那么就直接使用Sync方法就行了，如果不是，那么就需要重寫Sync方法。
這里面所有的模塊都有Controller的影子，但是Router模塊是最明顯的，因此有時，我們叫Router為Controller。
Backbone的使用需要依賴於其他的庫：
underscore.js，此庫里面有很多基本方法，可以幫Backbone的mode模塊處理數據和集合，這樣Backbone就不用寫這些方法了。
jQuery或zepto，此庫可以幫助view模塊實現很多頁面效果，同時它里面有很多DOM操作的方法，以及Ajax方法。
Backbone的基本使用：
直接創建對象
第一個例子
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"}]
給構造函數添加實例方法和靜態方法
第一個例子
var M = Backbone.Model.extend({ aaa:function(){} },{ bbb:function(){} }); //這里的aaa就是實例方法，bbb方法就是靜態方法。
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時，會執行這個初始化函數。
this.on("change",function(){ //監聽change事件
alert(1);
})
}
})
var model = new M();
model.set("name","hi"); //改變模型的name值時，就會觸發change事件，彈出1.其實這里只要改變模型，就會觸發。
第二個例子
var M = Backbone.Model.extend({
defaults:{name:"hello"} ,
initialize : function(){ //new M時，會執行這個初始化函數。
this.on("change:name",function(model){ //監聽change事件
//回調方法中的參數就是model對象。
})
}
})
var model = new M();
model.set("name","hi"); //改變模型的name值時，就會觸發change事件，彈出1.改變模型的其他數據，這里就不會觸發。
第三個例子
var M = Backbone.Model.extend({
defaults:{name:"hello"}
});
var V = Backbone.View.extend({
initialize:function(){ //new V時，會跟這個視圖的model綁定change事件，回調方法是視圖的show方法
this.listenTo(this.model, "change", this.show); //listenTo方法跟on一樣是綁定事件的，但是listenTo可以設置this的指向，它多一個參數。它的意思就是：給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值時，就會觸發change事件，在視圖中彈出模型設置的name值。
數據與服務器的操作
第一個例子
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請求）。在這個例子中，當第一次調用sava方法時，是post請求，在服務器上創建name:"hello"。當第二次調用sava({name:"hi"})方法時，是put請求，因為服務器上這時已經有name值了，現在是更新服務器上的name值為"hi"。
}
var M = Backbone.Model.extend({
defaults:{name:"hello"},
url : "/user"
});
var m = new M();
m.save(); //保存model的數據，把數據同步到服務器上，調用的是Backbone.sync方法（默認使用ajax請求，如果引入了jQuery，就會使用jQuery的ajax）。我們只要在model中設置url屬性就行了，這樣程序才知道把數據同步到哪個服務器上，其實就是同步到這個url上。當然你可以重寫Backbone.sync方法，來改變使用ajax方式同步服務器的操作。
m.save({name:"hi"});
第二個例子
Backbone.sync = function(method , model){
alert(method); //當調用fetch方法時，也會執行sync方法，這時的method就是read（get請求），從服務器獲取數據。
}
var C = Backbone.Collection.extend({
initialize:function(){
this.on("reset",function(){ //數據獲取成功后，就會觸發這個reset事件
alert(1);
})
},
url : "/users"
});
var models = new C();
models.fetch(); //從服務器/users路徑獲取數據
路由與歷史管理
var route = Backbone.Router.extend({
routes:{
"help":"help",
"search/:query":"search", //:代表這個字符是變量，意思就是query是一個變量，假設query=chaojidan，那么這里的"search/chaojidan"對應search函數。
"search/:query/p:page": "search"
},
help:function(){
alert(1);
},
search:function(query,page){
alert(2);
}
});
var w = new route();
Backbone.history.start(); //必須執行這個代碼，路由才能正常使用。這時，歷史管理也實現了。移動端開發很適合這種單頁操作，不用頁面的跳轉，只要改變hash值就能進行功能的實現。
事件委托
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，就會執行aaa方法。同時，頁面上的li元素也會綁定mouseover事件。視圖的el指向的是頁面的body元素，是el指向的元素就是此視圖的根元素，事件的綁定會從這個根元素上開始查找元素。
前端模板
<script type="text/template" id="template">
<div><%= name %></div>
</script>
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事件，事件響應函數是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}，套入模板后變成<div>hi</div>，最后添加到頁面上。這里做到了html和js的分離。html用模板來實現。
},
template:_.template($("#template").html());
});
var m= new M();
var v = new V({model:m});
m.set("name","hi");
加油！