Model模块

一、应用场景

模型层通常是MVC架构的核心。通过监听模型层数据的变化驱动界面的开发,从而解耦视图层,是MVC的精髓。

适用于:

(1)交互型应用。交互比较复制比如邮箱、购物车、网盘等应用。

(2)CRUD应用。企业信息系统,大多为列表的增删改查。backbone的模型提供数据操作的API(save、fetch、destroy)可以同基于restful思想设计的接口服务通信。

二、构造函数。主要做了以下几件事儿。

(1)、model实例上新增实例属性:cid、attributes、changed等

(2)、将this.defaults,如果 this.defaults未定义则通过原型链查找到this.prototype.defaults对象扩展到临时对象attrs上

(3)、调用set方法将defaults对象的属性扩展到实例属性:attributes、_previousAttributes对象上。示例:

以上语句执行之后,打印出的model实例如下图:

(4)、最后调用你自定义的initialize方法,这也是你自定义的initialize方法无需手动调用的原因,new的过程中initialize方法会执行。如:

new M2012.Mpost.MyMagazine.Model()后框架会调用你自定义的initialize方法,完成初始化工作。

三、核心方法 set

set方法主要做以下几件事:

(1)、新增实例属性_previousAttributes,将当前实例属性attributes克隆到实例属性_previousAttributes中,用传进来的键值对修改实例属性attributes

(2)、触发实例对象上绑定的change事件

(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 绑定在模型层的回调函数会执行,渲染各自的界面。

2、参数options.silent

myMagazineModel .set(‘change:contentType‘, 2) 修改为 myMagazineModel .set(‘change:contentType‘, 2,{silent : true});

语句执行后,myMagazineModel.attributes.contentType的值被改成了2,但是change:contentType事件并没有触发.

3、参数options.unset

通过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事件也触发了。

四、通过对set方法剖析,我们可以总结一下实例属性:attributes、_previousAttributes、changed以及局部变量:changes都有哪些作用。

通过以上源码可知:

1、attributes除了扩展用户自定义的defaults属性,调用set方法为不存在的属性赋值也会往attributes对象中添加新属性。

示例:

以上代码自定义的defaults属性中并没有viewType,调用set方法:

var myMagazineModel = new M2012.Mpost.MyMagazine.Model();

myMagazineModel.set({viewType : 1});

console.log(myMagazineModel);

输出结果:

可以看到,

attributes对象中已经有了属性viewType,接下来我们就可以为viewType绑定change事件,监听值的变化:

myMagazineModel.on(‘change:viewType‘, function(){});

2、_previousAttributes 维护修改前的属性值。在调用set方法改变attributes中的属性值时,首先克隆一份值保存到_previousAttributes中:

提供以下方法访问_previousAttributes 中的值:

3、changed 维护改变过的属性值。

提供以下方法访问 changed  中的值:

4、局部变量changes比较重要。每一次调用set方法,changes初始化为空数组[],判断属性是否有变化,将变化的属性push到changes中,遍历changes数组触发change事件。

五、get方法。比较简单,返回attributes实例属性对应的键值。

六、与服务端通讯的相关方法:

Backbone.Model.prototype提供了与服务端RESTful接口通讯的相关方法。关于RESTful的介绍,戳这里RESTful

(1)、fetch方法:

注释写的比较清楚:

从服务端获取数据,用数据覆盖model实例对象的attributes属性,如果attributes的当前值与获取数据的对应值不一致,则触发绑定的change事件。

(2)、save方法:

注释写的比较清楚:

从服务端获取数据,用数据覆盖model实例对象的attributes属性,如果attributes的当前值与获取数据的对应值不一致,则触发绑定的change事件。

(3)、destroy方法

注释:

向服务端发送一条删除数据的请求,如果传递了参数‘wait: true’则等待服务端成功响应后再将model实例从其所属的Collection集合中删掉,否则立即删掉。

fetch 、save等方法要求服务端的接口设计符合RESTful规范。ajax请求调用了Backbone.sync模块(其它系列会单独讲解该模块),而sync模块最终调用jquery的ajax方法发送http请求。

通常我们的应用由于某些特殊的需求场景,比如:拦截请求添加统一的头部,报文格式的转换,日志上报等等,我们会封装自己的通讯层,并不会使用jQuery提供的通讯方法。因此,上面那些方法在139邮箱中使用较少。

七、_validate方法。

考虑以下应用场景:

我们在调用set方法时希望对数据进行校验,校验通过则对attributes重新赋值,校验不通过则触发我在业务层绑定的事件。

_validate可满足我们的需求。set方法在给attributes对象赋值之前总是会首先调用_validate方法做验证:

验证不通过则直接返回。我们看一下_validate方法:

看源码我们得出这样的结论:只要我们在业务层实现validate方法,并为model实例绑定invalid方法,调用set方法时传递参数{validate : true},backbone就会执行我们的验证方法validate,验证失败则触发我们的事件invalid 示例:

输出结果:

至此,Backbone.Model的核心方法就讲解完了,还有其它一些工具方法如:escape、has、unset、clear等方法比较简单就不讲了。

Model模块

时间: 07-11

Model模块的相关文章

Backbone事件机制核心源码(仅包含Events、Model模块)

一.应用场景 为了改善酷版139邮箱的代码结构,引入backbone的事件机制,按照MVC的分层思想搭建酷版云邮局的代码框架.力求在保持酷版轻量级的基础上提高代码的可维护性. 二.遗留问题 1.backbone的升级问题,新的特性无法引入 2.backbone中的潜在BUG,若官方已修复则无法同步更新 解决办法: 关注backbone官网的更新记录. http://github.com/documentcloud/backbone/ 三.核心源码 /** * @裁剪版backbone,仅包含Ev

Django的model模块

在Django项目部分之Model Model模块是数据库与用户的交互模块 一般而言我们都会选择Mysql数据库进行操作,那我们怎样将Django项目与mysql数据库连接起来呢? 1.首先,按如图所示添加Mysql数据库 2.添加好数据库后在setting.py文件中修改DATABASE DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME':'mysite',# 要连接的数据库,连接前需要创建好 'USE

hdwiki中model模块的应用

control中调用model原则是这样的,如果你的这个model在本control中大部分方法中都要用到,那么,就写在构造函数里面.例如,名字为doc的control的构造函数如下: function control(& $get,& $post){        $this->base( & $get,& $post);        $this->load("doc");        $this->load("cate

游戏开发手记:游戏逻辑模块组织及数据同步

这周工作主要分两部分,一是服务器这边的基础模块搭建,二是服务器与客户端通信模式以及数据同步等方案的协定和验证.总体来说进展不错. 服务器采用actor模式来构建,目前暂时把服务器上运行着的actor叫做service,每个service维护一个请求队列.一个goroutine不断取出请求并进行处理.一组负责处理消息的逻辑模块.游戏服务器里的每个玩家都是一个service,不隶属玩家的功能模块也作为service运行(如排行榜.聊天.公会),还有其他全局模块也作为独立的service运行(如玩家i

python笔记22-常用模块

模块就是一个python文件,用哪个模块就要import哪个模块 1.调用模块 # import model #import的本质就是把这个python从头到尾执行一遍## model.run1()#调用model模块下的run1函数# model.run2()# model.run() 2.调用模块下函数 # from model import run,run1 (方法1)# #只导入某个函数的时候,只导入run,run1函数# run()# run1() # from model impor

QT MVC 技术Model/View初探

Model/View实现表格技术 [+] 一.简介 Model/View结构使数据管理与相应的数据显示相互独立,并提供了一系列标准的函数接口和用于Model模块与View模块之间的通信.它从MVC演化而来,MVC由三种对象组成,Model是应用程序对象,View是它的屏幕表示,Controller定义了用户界面如何对用户输入进行响应.把MVC中的View和Controller合在一起,就形成了Model/View结构. 二.运行图 (1)为了灵活对用户的输入进行处理,引入了Delegate,Mo

Spring+Spring MVC+Mybatis+Maven搭建多模块项目(二)

基于第一篇文章<Spring+Spring MVC+Mybatis+Maven搭建多模块项目(一)>的基础上,写一个完整的示例,从页面到Dao层的整个过程 1.先在bug.model模块下创建com.bug.model.user包,在包中创建UserVO对象 package com.bug.model.user; public class UserVO { private String userId; private String userName; private String passwo

Spring+Spring MVC+Mybatis+Maven搭建多模块项目(一)

Spring+Spring MVC+Mybatis+Maven搭建多模块项目(一) 标签:               springmvcspring mvcmybatismaven 2016-11-22 22:27             4425人阅读             评论(1)             收藏              举报 .embody { padding: 10px 10px 10px; margin: 0 -20px; border-bottom: solid

model操作涉及的所有字段(API)

一旦 数据模型 创建完毕, 自然会有存取数据的需要.本文档介绍了由 models 衍生而来的数据库抽象API,及如何创建,得到及更新对象. 贯穿本参考, 我们都会引用下面的民意测验(Poll)应用程序: class Poll(models.Model): slug = models.SlugField(unique_for_month='pub_date') question = models.CharField(maxlength=255) pub_date = models.DateTime