在传统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; }
时间: 2024-10-11 17:43:14