在传统MVC框架模式中，Model承担业务逻辑的任务。Backbone作为一个mvc框架，主要的业务逻辑交由Model与Collection来实现。Model代表领域对象，今天主要学一下Model源码中几个重要的函数。
我们先看一下Model的构造函数做了哪些事情：
// Create a new model with the specified attributes. A client id (`cid`)
// is automatically generated and assigned for you.
var Model = Backbone.Model = function(attributes, options) {
//对参数的处理
var attrs = attributes || {};
options || (options = {});
this.cid = _.uniqueId(this.cidPrefix);//利用underscore生成一个客户端的唯一标识符cid
this.attributes = {};//this.attributes是backbone中存放所有数据属性的对象
//collection在获取model对应的后端url时使用，在model上设置collection并不会自动将model加入collection
if (options.collection) this.collection = options.collection;
//调用parse方法解析数据
if (options.parse) attrs = this.parse(attrs, options) || {};
//处理defaults默认数据，用attrs覆盖defaults
var defaults = _.result(this, 'defaults');
attrs = _.defaults(_.extend({}, defaults, attrs), defaults);
this.set(attrs, options);//接收attrs将数据处理后放入this.attributes
this.changed = {};//changed属性用来保存修改过的属性数据,第一次set，不需要changed数据
this.initialize.apply(this, arguments);//调用initialize初始化model，这个方法需要子类来覆盖
};Model的构造函数主要做了以下几件事：
- 处理参数
- 处理model的属性：cid、attributes、collection
- 解析数据、处理属性的默认值
- set方法接收处理参数
- 调用initialize做初始化操作
接下来是一个重要的set函数，这个函数是Model最核心的一个方法
// Set a hash of model attributes on the object, firing `"change"`. This is
// the core primitive operation of a model, updating the data and notifying
// anyone who needs to know about the change in state. The heart of the beast.
set: function(key, val, options) {
if (key == null) return this;
// Handle both `"key", value` and `{key: value}` -style arguments.
var attrs;
if (typeof key === 'object') {//{key: value}形式
attrs = key;
options = val;
} else {// key, value, options形式
(attrs = {})[key] = val;
}
options || (options = {});//设置options参数
// Run validation.
//首先验证参数，这里没有直接调用validate方法，而是调用_validate这个私有方法，该方法内部调用validate方法
if (!this._validate(attrs, options)) return false;
// Extract attributes and options.
var unset = options.unset;
var silent = options.silent;
var changes = [];//用来存放所有有变动的key
var changing = this._changing;//this._chaning用来标识set方法是否在处理中，我猜这里的设置跟webworker多线程有关
this._changing = true;//这里代表属性的变动更新开始
// this.changed = {};//不能放在这里，如果val没改变，所有changed都被清空掉了
if (!changing) {//使用_previousAttributes来保留最近一次的attributes
this._previousAttributes = _.clone(this.attributes);
this.changed = {};//每次set时，changed都会被重置的{}，这表示仅保留最近一次的变化
}
var current = this.attributes;
var changed = this.changed;
var prev = this._previousAttributes;
// For each `set` attribute, update or delete the current value.
for (var attr in attrs) {//遍历attrs
val = attrs[attr];
//对于单线程环境，current与_previousAttributes是一样的，这里的处理也应当是应对多线程
if (!_.isEqual(current[attr], val)) changes.push(attr); //changes是本次变化的keys
if (!_.isEqual(prev[attr], val)) {
changed[attr] = val; //存储变化量
} else {
delete changed[attr];
}
//这里根据unset的设置，如果unset为true移除，否则设置attributes中的对应属性
unset ? delete current[attr] : current[attr] = val;
}
// Update the `id`.
//idAttribute的目的是跟后端数据库记录的id保持一致
if (this.idAttribute in attrs) this.id = this.get(this.idAttribute);
// Trigger all relevant attribute changes.
// 在所有赋值结束后，发送事件通知
if (!silent) {
if (changes.length) this._pending = options;
for (var i = 0; i < changes.length; i++) {
this.trigger('change:' + changes[i], this, current[changes[i]], options);
}
}
// You might be wondering why there's a `while` loop here. Changes can
// be recursively nested within `"change"` events.
if (changing) return this; //这里我觉得也是跟多线程有关，如果多个线程同时更新model，最终只发出一个整体的change事件
if (!silent) {
while (this._pending) {//很奇怪的设置
options = this._pending;
this._pending = false;
this.trigger('change', this, options);//触发事件
}
}
this._pending = false;
this._changing = false;
return this;
}来整理一下set方法做的几件事：
- 根据api的参数声明来处理参数
- 声明几个与属性变化相关的变量
- 设置_previousAttributes与changed来保存上次属性和这次的变化数据
- 更新属性，保存本次变化数据和对应的key
- 将发生变化的属性广播出去，change:key形式
- 在model层次上发出change事件
接下来是与后端打交道的save方法：
// Set a hash of model attributes, and sync the model to the server.
// If the server returns an attributes hash that differs, the model's
// state will be `set` again.
// save方法保持客户端与数据库内记录同步，前后端数据可能出现不一致情况，
// 如果options中wait参数为true的话，会用后端返回的数据来更新前端数据
save: function(key, val, options) {
// Handle both `"key", value` and `{key: value}` -style arguments.
var attrs;
if (key == null || typeof key === 'object') {//`{key: value}`
attrs = key;
options = val;
} else {//`"key", value`
(attrs = {})[key] = val;
}
//在方法默认开启验证和解析
options = _.extend({validate: true, parse: true}, options);
var wait = options.wait;
// If we're not waiting and attributes exist, save acts as
// `set(attr).save(null, opts)` with validation. Otherwise, check if
// the model will be valid when the attributes, if any, are set.
// wait为false的话，首先在前端更新model，set中调用验证方法
if (attrs && !wait) {
if (!this.set(attrs, options)) return false;
} else if (!this._validate(attrs, options)) {//否则利用_validate进行验证
return false;
}
// After a successful server-side save, the client is (optionally)
// updated with the server-side state.
var model = this;//保存this关键字
var success = options.success;
var attributes = this.attributes;
options.success = function(resp) {
// Ensure attributes are restored during synchronous saves.
model.attributes = attributes;//这里先确保数据与为同步时保持一致
var serverAttrs = options.parse ? model.parse(resp, options) : resp;
// wait属性为true，利用后端数据更新model的属性
if (wait) serverAttrs = _.extend({}, attrs, serverAttrs);
if (serverAttrs && !model.set(serverAttrs, options)) return false;
// success带表更新成功后的回调函数。
// save方法，将模型数据的同步完全封装起来，开发者只需专注于自身业务逻辑即可！
if (success) success.call(options.context, model, resp, options);
// 触发sync事件
model.trigger('sync', model, resp, options);
};
wrapError(this, options);
// Set temporary attributes if `{wait: true}` to properly find new ids.
//wait 为true，临时更新attributes,目的是下文中将model更新到数据库内
if (attrs && wait) this.attributes = _.extend({}, attributes, attrs);
//根据model是否拥有idAttribute属性，决定是创建还是更新
var method = this.isNew() ? 'create' : (options.patch ? 'patch' : 'update');
if (method === 'patch' && !options.attrs) options.attrs = attrs;
var xhr = this.sync(method, this, options);
// Restore attributes.
this.attributes = attributes;//恢复数据，等到success后利用后端数据结果更新属性
return xhr;
},其中用到的wrapError方法，源码如下：
// Wrap an optional error callback with a fallback error event.
//将options中的error回调函数，变成一个能够触发error事件的回调函数
var wrapError = function(model, options) {
var error = options.error;
options.error = function(resp) {
if (error) error.call(options.context, model, resp, options);
model.trigger('error', model, resp, options);
};
}save方法做的几件事：
- 处理参数
- 如果以客户端为准，则首先跟新model，否则验证需保存的属性
- 声明局部变量，替换options中的success回调函数和error回调
- 如果以后端返回数据为准，则先直接将attributes属性暂时更改，方便sync方法同步model，而后将attributes恢复，等待succes毁掉中利用后端返回结果更新
接下来是销毁model的destroy方法：
// Destroy this model on the server if it was already persisted.
// Optimistically removes the model from its collection, if it has one.
// If `wait: true` is passed, waits for the server to respond before removal.
//destroy方法用来销毁model，当wait属性为true时，等待后台销毁成功时做实际销毁工作
destroy: function(options) {
options = options ? _.clone(options) : {};
var model = this;
var success = options.success;
var wait = options.wait;
var destroy = function() {
model.stopListening();//移除其他代码中监听的model事件
// 触发destroy事件
model.trigger('destroy', model, model.collection, options);
};
// 后台销毁成功后的success回调
options.success = function(resp) {
if (wait) destroy();//销毁操作
// 回调函数，业务逻辑相关
if (success) success.call(options.context, model, resp, options);
//拥有idAttribute属性，则触发sync事件
if (!model.isNew()) model.trigger('sync', model, resp, options);
};
var xhr = false;
if (this.isNew()) {//数据库中并没有该条记录
_.defer(options.success);//underscore函数，延迟调用function直到当前调用栈清空为止
} else {
wrapError(this, options);//包装错误
xhr = this.sync('delete', this, options);// 与后台数据同步
}
if (!wait) destroy(); //无需后台等待的话，直接做销毁操作
return xhr;
}destroy方法做的事情：
- 声明局部变量以及做销毁操作的destroy方法
- 替换options中的success方法
- 如果model未存储于数据库中，直接使用underscore的defer延迟执行success，否则向后台发送删除请求
与验证相关的_validate方法如下：
// Run validation against the next complete set of model attributes,
// returning `true` if all is well. Otherwise, fire an `"invalid"` event.
_validate: function(attrs, options) {
if (!options.validate || !this.validate) return true;
attrs = _.extend({}, this.attributes, attrs);
//backbone希望在验证失败时候，validate方法返回一个error对象
var error = this.validationError = this.validate(attrs, options) || null;
if (!error) return true;
//触发invalid事件，也就是说如果单独调用validate方法不会触发invalid事件
this.trigger('invalid', this, error, _.extend(options, {validationError: error}));
return false;
}
