简单了解Backbone.js的Model模型以及View视图的源码

 var People = Backbone.Model.extend({      }); var Man = People.extend({ });

  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) || {};     attrs = _.defaults({}, attrs, _.result(this, 'defaults'));     this.set(attrs, options);     this.changed = {};     this.initialize.apply(this, arguments);   };

model.set(attributes, [options])

  set: function(key, val, options) {     //......      // key值可以是键值对，也可以是一个字符串,将赋值传入attrs属性中      if (typeof key === 'object') {     attrs = key;     options = val;    } else {     (attrs = {})[key] = val;    }   // ....    //对设置的值进行校验       if (!this._validate(attrs, options)) return false;    unset = options.unset; // unset为true时会删除设置的值,unset方法就是通过 set(key,val,{unset:true})去实现的       //当对象正在被被设置的时候，不给 previousAttributes 赋值    if (!changing) {     this._previousAttributes = _.clone(this.attributes);     this.changed = {};    }     current = this.attributes, prev = this._previousAttributes;     //如果对Id进行了设置，则对对象的id属性也进行改变    if (this.idAttribute in attrs) this.id = attrs[this.idAttribute];     //进行 设置或者是删除操作    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了，则进行删除操作    }     //在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', this, options);     }    }    this._pending = false;    this._changing = false;    return this;     }

model.save([attributes], [options])

  save: function(key, val, options) {         // ......      //当设置了wait属性true的时候 , save方法先不执行set方法(不触发change事件),只执行validate    if (attrs && !options.wait) {     if (!this.set(attrs, options)) return false;    } else {     if (!this._validate(attrs, options)) return false;    }    //如果wait为true,设置this.attributes    if (attrs && options.wait) {     this.attributes = _.extend({}, attributes, attrs);    }     // .....       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);     //如果wait为true , 那么会在请求返回之后才进行set操作     if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs);     if (_.isObject(serverAttrs) && !model.set(serverAttrs, options)) {      return false;     }     if (success) success(model, resp, options);     //触发 sync 事件     model.trigger('sync', model, resp, options);    };    //生成XHR onerror 回调函数    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;    //返回xhr对象    return xhr;  }

  var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events']; var View = Backbone.View = function(options) {   this.cid = _.uniqueId('view');   options || (options = {});   _.extend(this, _.pick(options, viewOptions));   this._ensureElement();   this.initialize.apply(this, arguments);   this.delegateEvents(); };

view.setElement(element)   setElement: function(element, delegate) {    if (this.$el) this.undelegateEvents();//如果已经存在this.$el，进行事件解绑    //对$el进行赋值，本质是一个jquery或者是 Lo-Dash and Zepto 对象    this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);    //把dom element 赋值给el    this.el = this.$el[0];     //如果没有显式传值,则进行事件绑定    if (delegate !== false) this.delegateEvents();    return this;   }

  _ensureElement: function() {     //如果已经对el进行设置，直接调用setElement方法    if (!this.el) {//如果没有设置，生成一个元素对象，再调用setElement方法     var attrs = _.extend({}, _.result(this, 'attributes'));     if (this.id) attrs.id = _.result(this, 'id');     if (this.className) attrs['class'] = _.result(this, 'className');     var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);     this.setElement($el, false);    } else {     this.setElement(_.result(this, 'el'), false);    }  }

delegateEvents([events])    // *{"event selector": "callback"}*   //   //   {   //    'mousedown .title': 'edit',   //    'click .button':   'save',   //    'click .open':    function(e) { ... }   //   }   delegateEvents: function(events) {      //如果不存在events,则直接返回      if (!(events || (events = _.result(this, 'events')))) return this;         //先解除所有的事件绑定      this.undelegateEvents();         //处理每个事件      for (var key in events) {       var method = events[key];       //解析回调函数       if (!_.isFunction(method)) method = this[events[key]];       if (!method) continue;          //对选择器进行分析       var match = key.match(delegateEventSplitter);       var eventName = match[1], selector = match[2];       method = _.bind(method, this);          //绑定的事件名都是以 eventName + '.delegateEvents' + cid 组成,       //这么做能够在undelegateEvents的时候选择到这个View的所有事件       eventName += '.delegateEvents' + this.cid;       if (selector === '') {        this.$el.on(eventName, method);       } else {        this.$el.on(eventName, selector, method);       }      }      return this;   }