Backbone 入门讲解
在了解backbone之前，需要了解模式，推荐书本
js设计模式
backbone 模块
- Events 事件驱动方法
- Model 数据模型
- View 视图，含事件行为 和 渲染页面
- Collection 模型集合器
- Router 路由器
- History 开启历史管理
- Sync 同步服务器方式
mvc 工作原理
所有模块都有controller的影子,但是Router模块是最明显的，因此Router模块也被成为Controller
- Events 模块是事件模块，其他模块都继承了Events 模块，因此都有时间模块功能
- Model 就是模型，它可以直接和 view 关联操作，model 传输据给 view , view 就显示该数据。一个 Model 一般对应一个 View
- View 是视图，它包含了视图和时间监听
- Controller, 是个概念，很多模块中有它的影子，比如 Router , 比如包含事件监听的 View
- Collection ,集合了多条 Model, 拥有 Model 特性，可以直接访问 View
- Router, 数据中 Model 传递给 Router ，然后 Router 根据hash值取到对应数据，再把 数据生成到 View 中。Router 操作 hash 值必须通过 history 进行管理。如果支持 h5 ，就是用 historyAPI。如果不支持，使用定时器来论询 hash 变化。
- Sync, Model 与服务器进行交互的方法就是Sync, Sync 使用的是ajax方法和服务器进行交互。如果不使用ajax，需要重写 Sync 方法
json补充
- json格式，对象，键值对，键必须要被双引号。也可以是对象对象数组。
-
JSON.stringify()转换的时候，可以是json对象，也可以是不带双引号的对象 -
JSON.parse()转换的时候，必须是json对象的字符串
基本使用
- 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'}]
- 给构造函数添加实例方法和静态方法
var M = Backbone.Model.extend({aaa:function(){}},{bbb:function(){}});
var model = new M();
model.aaa();
M.bbb();
静态方法中的
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是父类，有aaa实例，Child是子类，继承M,也有了父类的实例方法aaa
var Child = M.extend();
var modek = new Child();
model.aaa();
- 自定义事件
var M = Backbone.Model.extend({
defaults:{name:'hello'},
initialize: function () {
// new M 的时候，会自动执行这个初始化函数
this.on('change',function(){
// 监听 change 事件
alert(1);
});
}
});
var model = new M();
// 改变模型的 name 值时，就会触发change事件
// 这里只要改变模型，就会触发
model.set('name','hi');
第二个例子，针对模型中某个数据进行监听
var M = Backbone.Model.extend({
defaults:{name:'hello'},
initialize: function () {
// new M 时，会执行这个初始函数
this.on('change:name',function(model){
// 回调方法中的参数就是model对象
});
}
});
var model = new M();
// 只有模型中的name改变的时候，出发该事件
model.set('name','hi');
第三个例子，模型和视图，同时，将事件监听存放到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 关联到一起
var V = new V({model:m});
// 改变模型的name时，就会出发change事件
m.set('name','hi');
- 数据与服务器的操作
模型中写入，服务器地址，表示，数据同步到哪里。其中，save方法在第一次调用的时候，使用的post请求。当第二次调用save方法时，使用的是put请求。
var M = Backbone.Modle.extend({
defaults: {
name: 'hello'
},
url: '/user'
});
var m = new M();
// 保存model的数据，把数据同步到服务器上
m.save();
m.save({name:'hi'});
第二个例子
var C = Backbone.Collection.extend({
initialize: function () {
this.on('reset',function(){
// 数据获取成功之后，就会出发这个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();
// 必须执行这个代码，路由才能正常使用。这时，历史管理也实现了。
Backbone.history.start();
- 事件委托
// 在该视图上事件委托，当点击input按钮就会执行aaa方法，当鼠标移入 li, bbb方法会执行
var V = Backbone.View.extend({
el:$('body'),
events: {
'click input': 'aaa',
'mouseover li':'bbb'
},
aaa: function () {
alert(1);
},
bbb: function () {
alert(2);
}
});
- 前端模板
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');