Backbone 入門(mén)講解
在了解backbone之前米诉，需要了解模式菱蔬，推薦書(shū)本
js設(shè)計(jì)模式
backbone 模塊
- Events 事件驅(qū)動(dòng)方法
- Model 數(shù)據(jù)模型
- View 視圖，含事件行為 和 渲染頁(yè)面
- Collection 模型集合器
- Router 路由器
- History 開(kāi)啟歷史管理
- Sync 同步服務(wù)器方式
mvc 工作原理
所有模塊都有controller的影子,但是Router模塊是最明顯的史侣，因此Router模塊也被成為Controller
- Events 模塊是事件模塊拴泌，其他模塊都繼承了Events 模塊，因此都有時(shí)間模塊功能
- Model 就是模型惊橱，它可以直接和 view 關(guān)聯(lián)操作蚪腐，model 傳輸據(jù)給 view , view 就顯示該數(shù)據(jù)。一個(gè) Model 一般對(duì)應(yīng)一個(gè) View
- View 是視圖税朴，它包含了視圖和時(shí)間監(jiān)聽(tīng)
- Controller, 是個(gè)概念回季，很多模塊中有它的影子家制，比如 Router , 比如包含事件監(jiān)聽(tīng)的 View
- Collection ,集合了多條 Model, 擁有 Model 特性，可以直接訪問(wèn) View
- Router, 數(shù)據(jù)中 Model 傳遞給 Router 泡一，然后 Router 根據(jù)hash值取到對(duì)應(yīng)數(shù)據(jù)慰丛，再把 數(shù)據(jù)生成到 View 中。Router 操作 hash 值必須通過(guò) history 進(jìn)行管理瘾杭。如果支持 h5 诅病，就是用 historyAPI。如果不支持粥烁，使用定時(shí)器來(lái)論詢(xún) hash 變化贤笆。
- Sync, Model 與服務(wù)器進(jìn)行交互的方法就是Sync, Sync 使用的是ajax方法和服務(wù)器進(jìn)行交互。如果不使用ajax讨阻，需要重寫(xiě) Sync 方法
json補(bǔ)充
- json格式芥永，對(duì)象，鍵值對(duì)钝吮，鍵必須要被雙引號(hào)埋涧。也可以是對(duì)象對(duì)象數(shù)組。
-
JSON.stringify()轉(zhuǎn)換的時(shí)候奇瘦，可以是json對(duì)象棘催，也可以是不帶雙引號(hào)的對(duì)象 -
JSON.parse()轉(zhuǎn)換的時(shí)候，必須是json對(duì)象的字符串
基本使用
- Model基本使用
var model = new Backbone.Model();
model.set('name','hello');
model.get('name'); // => hello
- Collection基本使用
var model1 = new Backbone.Model({'name':'hello'});
var model2 = new Backbone.Model({'name':'hi'});
var models = new Backbone.Collection();
models.add(model1);
models.add(model2);
JSON.stringify(models); // [{'name':'hello'},{'name':'hi'}]
- 給構(gòu)造函數(shù)添加實(shí)例方法和靜態(tài)方法
var M = Backbone.Model.extend({aaa:function(){}},{bbb:function(){}});
var model = new M();
model.aaa();
M.bbb();
靜態(tài)方法中的
defaults
var M = Backbone.Model.extend({defaults:{name:'hello'}})
var model = new M();
model.get('name');
- 繼承操作
var M = Backbone.Model.extend({aaa:funciton(){alert(3)}});
// 繼承耳标，M是父類(lèi)醇坝，有aaa實(shí)例，Child是子類(lèi)次坡，繼承M,也有了父類(lèi)的實(shí)例方法aaa
var Child = M.extend();
var modek = new Child();
model.aaa();
- 自定義事件
var M = Backbone.Model.extend({
defaults:{name:'hello'},
initialize: function () {
// new M 的時(shí)候呼猪，會(huì)自動(dòng)執(zhí)行這個(gè)初始化函數(shù)
this.on('change',function(){
// 監(jiān)聽(tīng) change 事件
alert(1);
});
}
});
var model = new M();
// 改變模型的 name 值時(shí)，就會(huì)觸發(fā)change事件
// 這里只要改變模型砸琅，就會(huì)觸發(fā)
model.set('name','hi');
第二個(gè)例子宋距，針對(duì)模型中某個(gè)數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)
var M = Backbone.Model.extend({
defaults:{name:'hello'},
initialize: function () {
// new M 時(shí)，會(huì)執(zhí)行這個(gè)初始函數(shù)
this.on('change:name',function(model){
// 回調(diào)方法中的參數(shù)就是model對(duì)象
});
}
});
var model = new M();
// 只有模型中的name改變的時(shí)候症脂，出發(fā)該事件
model.set('name','hi');
第三個(gè)例子谚赎，模型和視圖，同時(shí)摊腋，將事件監(jiān)聽(tīng)存放到view中
var M = Backbone.Model.extend(
defaults:{name:"hello"}
);
var V = Backbone.View.extend({
initialize: function () {
this.listenTo(this.model,'change',this.show);
},
show: function (model) {
alert(model.get('name'));
}
});
var m = new M();
// 將 View 和 Model 關(guān)聯(lián)到一起
var V = new V({model:m});
// 改變模型的name時(shí)沸版，就會(huì)出發(fā)change事件
m.set('name','hi');
- 數(shù)據(jù)與服務(wù)器的操作
模型中寫(xiě)入，服務(wù)器地址兴蒸，表示，數(shù)據(jù)同步到哪里细办。其中橙凳，save方法在第一次調(diào)用的時(shí)候蕾殴，使用的post請(qǐng)求。當(dāng)?shù)诙握{(diào)用save方法時(shí)岛啸，使用的是put請(qǐng)求钓觉。
var M = Backbone.Modle.extend({
defaults: {
name: 'hello'
},
url: '/user'
});
var m = new M();
// 保存model的數(shù)據(jù)，把數(shù)據(jù)同步到服務(wù)器上
m.save();
m.save({name:'hi'});
第二個(gè)例子
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();
- 路由與歷史管理
var router = Backbone.Router.extend({
routes:{
'help':'help',
'search/:query':'search',
'search/:query/p:page':'search'
},
help: function () {
alert(1);
},
search: function (query,page) {
alert(2);
}
});
var w = new router();
// 必須執(zhí)行這個(gè)代碼荡灾，路由才能正常使用。這時(shí)瞬铸，歷史管理也實(shí)現(xiàn)了批幌。
Backbone.history.start();
- 事件委托
// 在該視圖上事件委托，當(dāng)點(diǎn)擊input按鈕就會(huì)執(zhí)行aaa方法嗓节，當(dāng)鼠標(biāo)移入 li, bbb方法會(huì)執(zhí)行
var V = Backbone.View.extend({
el:$('body'),
events: {
'click input': 'aaa',
'mouseover li':'bbb'
},
aaa: function () {
alert(1);
},
bbb: function () {
alert(2);
}
});
- 前端模板
<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);
},
show: function (model) {
$('body').append(this.template(this.model.toJSON()));
},
template: _.template($('#template').html());
});
var m = new M();
var v = new V({model:m});
m.set('name','hi');
