码迷,mamicode.com
首页 > 其他好文 > 详细

Model模块

时间:2014-07-13 21:21:09      阅读:412      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   使用   os   

bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
 bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
一、应用场景
模型层通常是MVC架构的核心。通过监听模型层数据的变化驱动界面的开发,从而解耦视图层,是MVC的精髓。
适用于:
(1)交互型应用。交互比较复制比如邮箱、购物车、网盘等应用。
(2)CRUD应用。企业信息系统,大多为列表的增删改查。backbone的模型提供数据操作的API(save、fetch、destroy)可以同基于restful思想设计的接口服务通信。
 
二、构造函数。主要做了以下几件事儿。
bubuko.com,布布扣
bubuko.com,布布扣
(1)、model实例上新增实例属性:cid、attributes、changed等
(2)、将this.defaults,如果 this.defaults未定义则通过原型链查找到this.prototype.defaults对象扩展到临时对象attrs上
(3)、调用set方法将defaults对象的属性扩展到实例属性:attributes、_previousAttributes对象上。示例:
bubuko.com,布布扣
 
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
以上语句执行之后,打印出的model实例如下图:
bubuko.com,布布扣
bubuko.com,布布扣
(4)、最后调用你自定义的initialize方法,这也是你自定义的initialize方法无需手动调用的原因,new的过程中initialize方法会执行。如:
bubuko.com,布布扣
bubuko.com,布布扣
new M2012.Mpost.MyMagazine.Model()后框架会调用你自定义的initialize方法,完成初始化工作。
三、核心方法 set
 bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
set方法主要做以下几件事:
(1)、新增实例属性_previousAttributes,将当前实例属性attributes克隆到实例属性_previousAttributes中,用传进来的键值对修改实例属性attributes
bubuko.com,布布扣
bubuko.com,布布扣
(2)、触发实例对象上绑定的change事件
bubuko.com,布布扣
bubuko.com,布布扣
(3)、可以传递第三个参数options.silent来控制框架是否触发change事件
set方法的应用场景:
我们知道要实现MVC分层,观察者模式是比较好的选择,backbone的事件机制on、trigger其实是观察者模式的一种实现,而Events模块扩展了Model的原型。所以model实例也具备这种on、trigger事件机制。示例:
var myMagazineModel = new M2012.Mpost.MyMagazine.Model();
var  myMagazineView1 = new M2012.Mpost.MyMagazine.View1({model :  myMagazineModel  }); 
var  myMagazineView2 = new M2012.Mpost.MyMagazine.View2({model :  myMagazineModel  }); 
myMagazineView1.model.on(‘change:contentType‘, function(){
     myMagazineView1 .render();
});
myMagazineView2 .model.on(‘change:contentType‘, function(){
     myMagazineView2  .render();
});
myMagazineModel .set(‘change:contentType‘, 2);
1、如下图,myMagazineModel 的contentType默认值为1,当语句myMagazineModel .set(‘change:contentType‘, 2);执行之后,myMagazineView1与myMagazineView2 绑定在模型层的回调函数会执行,渲染各自的界面。
bubuko.com,布布扣
bubuko.com,布布扣
2、参数options.silent
myMagazineModel .set(‘change:contentType‘, 2) 修改为 myMagazineModel .set(‘change:contentType‘, 2,{silent : true});
语句执行后,myMagazineModel.attributes.contentType的值被改成了2,但是change:contentType事件并没有触发.
bubuko.com,布布扣
bubuko.com,布布扣
3、参数options.unset
bubuko.com,布布扣
bubuko.com,布布扣
通过unset方法的注释可知:
如果传递了unset=true,框架将移除对应的属性(从modelInstance.attributes对象中delete掉),然后判断是否silent是否为true,如果不为true则执行change事件。myMagazineModel .set(‘change:contentType‘, 2) 修改为 myMagazineModel .set(‘change:contentType‘, 2,{unset : true});语句执行后,contentType从myMagazineModel.attributes对象上移除掉了,但是myMagazineModel._previousAttributes对象上依然有contentType属性,同时change:contentType事件也触发了。
bubuko.com,布布扣
bubuko.com,布布扣
四、通过对set方法剖析,我们可以总结一下实例属性:attributes、_previousAttributes、changed以及局部变量:changes都有哪些作用。
bubuko.com,布布扣
bubuko.com,布布扣
通过以上源码可知:
1、attributes除了扩展用户自定义的defaults属性,调用set方法为不存在的属性赋值也会往attributes对象中添加新属性。
示例:
bubuko.com,布布扣
bubuko.com,布布扣
以上代码自定义的defaults属性中并没有viewType,调用set方法:
var myMagazineModel = new M2012.Mpost.MyMagazine.Model();
myMagazineModel.set({viewType : 1});
console.log(myMagazineModel);
输出结果:
bubuko.com,布布扣
bubuko.com,布布扣
可以看到,
attributes对象中已经有了属性viewType,接下来我们就可以为viewType绑定change事件,监听值的变化:
myMagazineModel.on(‘change:viewType‘, function(){});
2、_previousAttributes 维护修改前的属性值。在调用set方法改变attributes中的属性值时,首先克隆一份值保存到_previousAttributes中:
bubuko.com,布布扣
bubuko.com,布布扣
提供以下方法访问_previousAttributes 中的值:
bubuko.com,布布扣
 bubuko.com,布布扣
3、changed 维护改变过的属性值。
bubuko.com,布布扣
bubuko.com,布布扣
提供以下方法访问 changed  中的值:
bubuko.com,布布扣
 bubuko.com,布布扣
4、局部变量changes比较重要。每一次调用set方法,changes初始化为空数组[],判断属性是否有变化,将变化的属性push到changes中,遍历changes数组触发change事件。
bubuko.com,布布扣
 bubuko.com,布布扣
五、get方法。比较简单,返回attributes实例属性对应的键值。
bubuko.com,布布扣
 bubuko.com,布布扣
六、与服务端通讯的相关方法:
Backbone.Model.prototype提供了与服务端RESTful接口通讯的相关方法。关于RESTful的介绍,戳这里RESTful
(1)、fetch方法:
bubuko.com,布布扣
bubuko.com,布布扣
注释写的比较清楚:
从服务端获取数据,用数据覆盖model实例对象的attributes属性,如果attributes的当前值与获取数据的对应值不一致,则触发绑定的change事件。
(2)、save方法:
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
注释写的比较清楚:
从服务端获取数据,用数据覆盖model实例对象的attributes属性,如果attributes的当前值与获取数据的对应值不一致,则触发绑定的change事件。
 
(3)、destroy方法
bubuko.com,布布扣
bubuko.com,布布扣
注释:
向服务端发送一条删除数据的请求,如果传递了参数‘wait: true’则等待服务端成功响应后再将model实例从其所属的Collection集合中删掉,否则立即删掉。
 
fetch 、save等方法要求服务端的接口设计符合RESTful规范。ajax请求调用了Backbone.sync模块(其它系列会单独讲解该模块),而sync模块最终调用jquery的ajax方法发送http请求。
bubuko.com,布布扣
 bubuko.com,布布扣
通常我们的应用由于某些特殊的需求场景,比如:拦截请求添加统一的头部,报文格式的转换,日志上报等等,我们会封装自己的通讯层,并不会使用jQuery提供的通讯方法。因此,上面那些方法在139邮箱中使用较少。
 
七、_validate方法。
bubuko.com,布布扣
考虑以下应用场景:
我们在调用set方法时希望对数据进行校验,校验通过则对attributes重新赋值,校验不通过则触发我在业务层绑定的事件。
_validate可满足我们的需求。set方法在给attributes对象赋值之前总是会首先调用_validate方法做验证:
bubuko.com,布布扣
验证不通过则直接返回。我们看一下_validate方法:
bubuko.com,布布扣
bubuko.com,布布扣
看源码我们得出这样的结论:只要我们在业务层实现validate方法,并为model实例绑定invalid方法,调用set方法时传递参数{validate : true},backbone就会执行我们的验证方法validate,验证失败则触发我们的事件invalid 示例:
bubuko.com,布布扣
bubuko.com,布布扣
输出结果:
bubuko.com,布布扣
 bubuko.com,布布扣
至此,Backbone.Model的核心方法就讲解完了,还有其它一些工具方法如:escape、has、unset、clear等方法比较简单就不讲了。

Model模块,布布扣,bubuko.com

Model模块

标签:des   style   blog   http   使用   os   

原文地址:http://www.cnblogs.com/hellohuman/p/3840852.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!