Backbone.Model

今天我们先来谈谈Backbone.js MVC 中的 M,Model是backbone的核心部分，包含着页面展示内容的数据，还有围绕着数据操作的各种 转换，校验，计算 ，权限控制，服务端交互等等操作，你可以通过 Backbone.Model.extend() 生成你的model,当然生成的model也可以作为一个基类去向下扩展更多的model

Backbone.Model Api

Backbone.Model 提供了大量方法用于实现一个Model的基本操作，当然其中最基本的还是基于 Backbone.Events 的事件机制，在Model的attributes发生变化的时候，相应的 change:attr事件会被触发，下面是提供的API:

其中有对数据进行服务端操作的方法：

• sync : 包装了Backbone.sync，xhr的基类
• fetch : 用于从服务端获取数据
• save ： 向服务端持久化数据
• destroy： 从服务端删除数据

model中数据操作的方法：

• get ： 从attributes中获取数据
• set ： 向attributes中设置数据
• escape : 对数据进行编码 ，使用的是underscore的 _.escape
• has : attributes中有无对应数据
• unset : 从attributes中删除数据
• clear : 清空attributes数据
• changed : 与上个状态（执行过set，unset），相比变化的值
• toJSON ： 将 attributes 序列化成一个对象
• parse : 当设置项parse为真的时候，初始化/set/unset/fetch等数据操作中会对目标数据进行一个解析返回解析后的对象，此方法为空方法，需要重写覆盖
• hasChanged : 与上个状态(执行过set,unset),相比是否发生过变化
• changeAttributes : 与上个状态(执行过set,相比发生的所有值
• prevIoUs : 前一状态 (执行过set,unset)，该属性对应的值
• prevIoUsAttributes : 与上个状态(执行过set,发生过变化对象的前一个状态的所有值

model中数据校验的方法：

• validate：用于对model中数据进行校验，需要重写覆盖默认方法
• validationError : 返回最近一个invalid时返回的值
• isValid ： 调用_validate方法

下面会针对一些重点的api进行讲解：

构造函数

构造函数主要对初始化的数据和选项进行设置，然后会对生成一个唯一的cid用于标示model,如果options中的parse为true,那么会对初始化数值通过parse方法进行一个解析，调用set方法，所有的初始值会被存入attributes中，调用initialize初始化方法 。model的初始化就完成了。

set

set方法会将值设置进入attribute中，设置时如果设置了slient为true,会触发相应的 change:attr 的事件，最后统一触发change事件，set方法部分代码如下：

<div class="jb51code">
<pre class="brush:js;">
set: function(key,val,options) {
//......

  // key值可以是键值对，也可以是一个字符串,将赋值传入attrs<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>中  
if (typeof key === 'object') {
 attrs = key;
 options = val;
} else {
 (attrs = {})[key] = val;
}

// ....

//对设置的值进行校验 
  if (!this._validate(attrs,options)) return false;
unset = options.unset; // unset为true时会<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>设置的值,unset<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>就是通过 set(key,{unset:true})去实现的

//当对象正在被被设置的时候，不给 prev<a href="https://www.jb51.cc/tag/IoU/" target="_blank" class="keywords">IoU</a>sAttributes 赋值
if (!changing) {
 this._prev<a href="https://www.jb51.cc/tag/IoU/" target="_blank" class="keywords">IoU</a>sAttributes = _.clone(this.attributes);
 this.changed = {};
}

current = this.attributes,prev = this._prev<a href="https://www.jb51.cc/tag/IoU/" target="_blank" class="keywords">IoU</a>sAttributes;

//如果对Id进行了设置，则对对象的id<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>也进行改变
if (this.idAttribute in attrs) this.id = attrs[this.idAttribute];


//进行 设置或者是<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>操作
for (attr in attrs) {
 val = attrs[attr];
 if (!_.isEqual(current[attr],val)) changes.push(attr);
 if (!_.isEqual(prev[attr],val)) {
  this.changed[attr] = val;//为model的changed进行设置
 } else {
  delete this.changed[attr];
 }
 unset ? delete current[attr] : current[attr] = val;//如果unset被设置成true了，则进行<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>操作
}

//在silent不为false 的情况下，进行change:attr事件发送
if (!silent) {
 if (changes.length) this._pending = options;
 for (var i = 0,l = changes.length; i < l; i++) {
  this.trigger('change:' + changes[i],this,current[changes[i]],options);
 }
}


//触发change事件
if (changing) return this;
if (!silent) {
 while (this._pending) {
  options = this._pending;
  this._pending = false;
  this.trigger('change',options);
 }
}
this._pending = false;
this._changing = false;
return this;

}