Backbone Model 源码简谈 （版本：1.1.0 基础部分完毕）

Model工厂

  作为model的主要函数，其实只有12行，特别的简练

 var Model = Backbone.Model = function(attributes, options) {
     var attrs = attributes || {};
     options || (options = {});
     this.cid = _.uniqueId('c');
     this.attributes = {};
     if (options.collection) this.collection = options.collection;
     if (options.parse) attrs = this.parse(attrs, options) || {};//parse 889
     attrs = _.defaults({}, attrs, _.result(this, 'defaults'));//将参数1， _.result(this, 'defaults')对象的属性合并且返回给attr
     this.set(attrs, options);
     this.changed = {};
     this.initialize.apply(this, arguments);
   };

通常情况下，我们在使用Model之前，需要调用extend函数对Model进行自定义扩展后，再new 一下，

 var Man=Backbone.Model.extend({
          initialize:function(){
            this.bind('change:name',function(){
               console.log('change');
            });
          },
          defaults:{name:'jack',sex:'man'},
          sayName:function(){
             console.log(this.get('name'));
          },
          validate:function(attributes){
             if(attributes.name==''){
                console.log('fuck');
             }
          }
       });
       var mm=new Man();

这个过程触发了两个十分重要的函数：

1. this.set(attrs, options);  先调用一次set，将我们extend中的defaults对象的键值对儿设置到Model的attributes中去，set方法在Model中是一个重要方法

2. this.initialize.apply(this, arguments);  调用我们extend中定义的 initialize方法

也和backbone的其他模块有了瓜葛：

1.if (options.collection) this.collection = options.collection;   针对collection

调用extend函数扩展了Model

 花开两朵各表一支，先来说说Model这个模块下的操作：

  从set引出的一串操作：set是一个对象的属性，然后引用了underscore 的 extend方法将这个对象扩展到Model的原型上

set（key,val,options）函数是一个复杂的函数，下面请看源代码：

 set: function(key, val, options) {
       var attr, attrs, unset, changes, silent, changing, prev, current;
       if (key == null) return this;

       // Handle both `"key", value` and `{key: value}` -style arguments.
       if (typeof key === 'object') {
         attrs = key;
         options = val;
       } else {
         (attrs = {})[key] = val;
       }

       options || (options = {});

       // Run validation.
       if (!this._validate(attrs, options)) return false;

       // Extract attributes and options.
       unset           = options.unset;
       silent          = options.silent;
       changes         = [];
       changing        = this._changing;
       this._changing  = true;

       if (!changing) {
         this._previousAttributes = _.clone(this.attributes);
         this.changed = {};
       }
       current = this.attributes, prev = this._previousAttributes;

       // Check for changes of `id`.
       if (this.idAttribute in attrs) this.id = attrs[this.idAttribute];

       // For each `set` attribute, update or delete the current value.
       for (attr in attrs) {
         val = attrs[attr];
         if (!_.isEqual(current[attr], val)) changes.push(attr);
         if (!_.isEqual(prev[attr], val)) {
           this.changed[attr] = val;
         } else {
           delete this.changed[attr];
         }
         unset ? delete current[attr] : current[attr] = val;
       }

       // Trigger all relevant attribute changes.
       if (!silent) {
         if (changes.length) this._pending = true;
         for (var i = 0, l = changes.length; i < l; 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;
       if (!silent) {
         while (this._pending) {
           this._pending = false;
           this.trigger('change', this, options);
         }
       }
       this._pending = false;
       this._changing = false;
       return this;
     }

options参数的一些属性：

unset：如果为true，从attributes中delete掉某个属相

silent： 如果为true，不会触发change事件

validate：如果为true，将允许对set的属性进行验证操作

1.首先进行参数处理前的准备工作：

如果key是字符串一切都好办，把key和val存在attr这个临时对象里。如果key是object，那么val作为options，

2.运行model内置_validate验证函数：该函数功能参看下面的工具函数

3.分拣options中的属性，并且制造changing,其中this._changing属性仅在 set 和 changedAttributes 这两个函数中涉及。

4.开始做真正赋值之前的准备工作：把现有的attributes值存放到 _previousAttributes 中，并生成changed属性，这个操作就注定changed一次性保存属性更改。

5.开始进行循环校验赋值操作，将修改后的值保存到changed属性中。

6.针对options中约束进行处理：

如果options中定义了unset为true，那么从attributes中清除这些属性。

如果定义了silent为true，那么将触发在model-class绑定的 change事件，注意只能是 change事件。接下来执行没有确定属性名称的单纯 change 事件，这就意味着每又一次属性改变就要执行依次 纯change 事件

7.返回当前引用对象 也就是 model-object

set分析完毕。

从set函数分析我们得到的结论：

 1.set所操作的attributes是model-object的attributes，而不是model-class原型上的attributes，这就导致我们在声明model-class extend的attributes毫无用处

2. unset 标注所执行的操作并不会计入到 changed属性中

3. extend方法参数中的default属性，在工厂函数执行的时候就用set方法放到model-object 的attributes中去了。

再说extend函数：

  这个extend函数并没有存在于Model的原型中，而是Model一个私有方法，具体实现方法如下：

 var extend = function(protoProps, staticProps) {
     var parent = this;
     var child;

     // The constructor function for the new subclass is either defined by you
     // (the "constructor" property in your `extend` definition), or defaulted
     // by us to simply call the parent's constructor.
     if (protoProps && _.has(protoProps, 'constructor')) {//检查protoProps是否为原型
       child = protoProps.constructor;
     } else {
       child = function(){ return parent.apply(this, arguments); };
     }

     // Add static properties to the constructor function, if supplied.
     _.extend(child, parent, staticProps);

     // Set the prototype chain to inherit from `parent`, without calling
     // `parent`'s constructor function.
     var Surrogate = function(){ this.constructor = child; };
     Surrogate.prototype = parent.prototype;
     child.prototype = new Surrogate;

     // Add prototype properties (instance properties) to the subclass,
     // if supplied.
     if (protoProps) _.extend(child.prototype, protoProps);

     // Set a convenience property in case the parent's prototype is needed
     // later.
     child.__super__ = parent.prototype;

     return child;
   };

   // Set up inheritance for the model, collection, router, view and history.
   Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend;

这个extend实在有趣，因为它翻来覆去的操作原型链达到扩展对象具有私有原型的目的。看看我们extend一个Model需要进行哪些步骤：
  1.先设立一个child函数，这个child函数返回了 Model自执行时的结果，很显然从前面我们知道这根本没有什么返回值，主要就是为了执行以下Model。

2.使用underscore的extend扩展child，当然这个扩展无非就是把Model的属性和extend第二个参数的属性加到child上。

3.建立一个surrogate函数，function(){ this.constructor = child; };

4.将surrogate函数的原型赋值为Model的原型，就是包含set的那一串

5.然后让child的原型变为 new surrogate;

6.然后再用underscore的extend将我们传个Model.extend函数的第一个参数扩展给child  这是关键的一步

7.返回child，让child成为我们要使用的那个我们自定义的model-class

这么做是为什么呢？它形成了由 model-object  -> model-class原型 -> Model原型 的一条原型链，有了明确的继承与被继承的关系。

Model的验证

从上面的代码我们可以看到，我们在Model的扩展Man中写了验证函数，但是这个验证什么时候被触发呢？那就是在我们调用model-object的save方法的时候。

 save(key,val,options)

save一共做了两档子事，上面是一件，还有一件是做一次ajax提交，还是通过trigger函数触发异步事件。

下面是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: function(key, val, options) {
       var attrs, method, xhr, attributes = this.attributes;

       // Handle both `"key", value` and `{key: value}` -style arguments.
       if (key == null || typeof key === 'object') {
         attrs = key;
         options = val;
       } else {
         (attrs = {})[key] = val;
       }

       options = _.extend({validate: true}, options);

       // 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.
       if (attrs && !options.wait) {
         if (!this.set(attrs, options)) return false;
       } else {
         if (!this._validate(attrs, options)) return false;
       }

       // Set temporary attributes if `{wait: true}`.
       if (attrs && options.wait) {
         this.attributes = _.extend({}, attributes, attrs);
       }

       // After a successful server-side save, the client is (optionally)
       // updated with the server-side state.
       if (options.parse === void 0) options.parse = true;
       var model = this;
       var success = options.success;
       options.success = function(resp) {
         // Ensure attributes are restored during synchronous saves.
         model.attributes = attributes;
         var serverAttrs = model.parse(resp, options);
         if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs);
         if (_.isObject(serverAttrs) && !model.set(serverAttrs, options)) {
           return false;
         }
         if (success) success(model, resp, options);
         model.trigger('sync', model, resp, options);
       };
       wrapError(this, options);

       method = this.isNew() ? 'create' : (options.patch ? 'patch' : 'update');
       if (method === 'patch') options.attrs = attrs;
       xhr = this.sync(method, this, options);

       // Restore attributes.
       if (attrs && options.wait) this.attributes = attributes;

       return xhr;
     },

options的属性：

validate: bool 是否对值进行验证

wait: bool 是否等待异步提交后保存（前提 key不能为空）

parse: bool  默认 true 不明

success: save成功后回调

其余参数：参见 Backbone 上的方法

save的具体执行步骤是这样的：

1.前期对参数处理，同set方法

2.为options附加默认validate 为 true属性，默认对值进行验证

3.重写options的success函数，将原来的success在重写的里面执行

重写增加以下几点内容：整理ajax返回值并将其set到model-object的attributes中，然后执行一次自定义的success，最后再进行一次ajax造成递归ajax请求的递归回调。

4.收集错误并抛出错误：

 // Wrap an optional error callback with a fallback error event.
   var wrapError = function(model, options) {
     var error = options.error;
     options.error = function(resp) {
       if (error) error(model, resp, options);
       model.trigger('error', model, resp, options);
     };
   };

5.判定使用何种协议
6.手动执行sync ajax请求函数

7.返回xhr对象

save源码分析结束

Model获取服务端数据

上面我们提到的save方法涉及了ajax向服务端提交数据做保存，所以跟着ajax获取这条线，我们看看fetch是怎么从服务端获取数据的。

fetch(options)

参数options是一个对象，里面包含了我们fetch函数需要操作的一些配置项，包括：

常用的有：url    success    error

 // Fetch the default set of models for this collection, resetting the
     // collection when they arrive. If `reset: true` is passed, the response
     // data will be passed through the `reset` method instead of `set`.
     fetch: function(options) {
       options = options ? _.clone(options) : {};
       if (options.parse === void 0) options.parse = true;
       var success = options.success;
       var collection = this;
       options.success = function(resp) {
         var method = options.reset ? 'reset' : 'set';
         collection[method](resp, options);
         if (success) success(collection, resp, options);
         collection.trigger('sync', collection, resp, options);
       };
       wrapError(this, options);
       return this.sync('read', this, options);
     },

通过查看源码，我们发现，fetch进行了以下三步重要的工作：

1.根据options的参数决定是否调用set 还是 reset

2.执行success方法

3.通过trigger触发sync 同步事件

4.返回 this.sync('read', this, options)  这是一个对象，这个对象包含各种类似xhr对象的操作，用来干预整个ajax的活动进程。

以上就是model-object操作一个对象一些简要的流程，当然model-object有很多的方法供大家使用：

操作属性方法：

set上面已经提到，跟它相对应的就是unset 和clear 清理对象属性方法

unset(attr,options)

源码如下：

 // Remove an attribute from the model, firing `"change"`. `unset` is a noop
     // if the attribute doesn't exist.
     unset: function(attr, options) {
       return this.set(attr, void 0, _.extend({}, options, {unset: true}));
     },

是不是很简单，直接就套用了 set方法嘛。unset会触发相应的事件change事件
clear(options)

源码如下：

 // Clear all attributes on the model, firing `"change"`.
     clear: function(options) {
       var attrs = {};
       for (var key in this.attributes) attrs[key] = void 0;
       return this.set(attrs, _.extend({}, options, {unset: true}));
     },

也是套用了set方法，同样触发了所有和属性相关的事件。

有set必有get，同样实现方式超级简单：

get(attr)

以下是源码：

 // Get the value of an attribute.
     get: function(attr) {
       return this.attributes[attr];
     },

简单的大快人心
has(attr)

检测是否存在该属性的实现也是操作attributes属性，套用了get

 // Returns `true` if the attribute contains a value that is not null
     // or undefined.
     has: function(attr) {
       return this.get(attr) != null;
     },

关于model的总结：

1.工厂函数传入attributes参数时，并不会触发change事件，只有model-object显示调用 set save 的时候才会触发。

因为model-class虽然在参数初始化attributes的时候虽然调用了set，但是this上并没有_events属性，所以没法触发绑定的方法。

2.set时至少触发2次all事件，save在url有配置的情况下则会至少触发3次all事件：sync 的request一次，回调success中的递归sync 一次，最后sync 中的request一次。

因为 all 事件只要执行 trigger函数 就会触发。

-----------------------------------------Model基础到此结束，下面是Model中的工具函数--------------------------

1._validate(attrs, options)

参数：attrs object  表示需要设置为属性的键值对

options object 该键值对设置时验证方法

作用： 使用model-class 中自定义的validate方法对attrs进行验证处理

原理：首先检查options中及this(model-object)中是否存在validate方法，如果没有返回true，表验证通过

其次将attrs和model-object的 attributes合并，作为被验证的对象

调用this.validate方法进行验证并把返回值放到 error 和 this.validationError中

最后触发 invalid 事件

源码：

  // 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);
       var error = this.validationError = this.validate(attrs, options) || null;
       if (!error) return true;
       this.trigger('invalid', this, error, _.extend(options, {validationError: error}));
       return false;
     }

2.escape(attr)

参数：属性名 string

作用：将该属性进行html转移

原理：调用underscore的escape方法实现。

主要就是讲该对象下的特殊字符进行html转移替换而已：

 var escapeMap = {
     '&': '&',
     '<': '&lt;',
     '>': '&gt;',
     '"': '&quot;',
     "'": ''',
     '`': '`'
   };

源码：

 // Get the HTML-escaped value of an attribute.
     escape: function(attr) {
       return _.escape(this.get(attr));
     },