Backbone源碼研究 - Backbone.Model

Steve_Wang_ 發(fā)布于2019-08-20 13:57 / 2751人閱讀

摘要：用到了一個小技巧來防止誤傳入的覆蓋掉默認的值。的精粹都在這個函數(shù)里面。看到這，給各種打補丁就有了可行性，支持就用，不支持的則降級到走的這種方式。

前言

都因為 IE8 不支持 Object.defineProperty，但是業(yè)務(wù)還不能脫離 IE7 和 IE8，故研究下 Backbone.Model 的實現(xiàn)機制，找機會給主流的 MVVM 框架補丁

偽代碼

先來看看 Model 的構(gòu)造函數(shù)

var Model = Backbone.Model = function(attributes, options) {
    var attrs = attributes || {};
    options || (options = {});
    
    // 鉤子
    this.preinitialize.apply(this, arguments);
    
    // 每個實例分配一個唯一的 cid
    this.cid = _.uniqueId(this.cidPrefix);
    // 數(shù)據(jù)對象
    this.attributes = {};
    
    // 不重要的內(nèi)容
    if (options.collection) this.collection = options.collection;
    if (options.parse) attrs = this.parse(attrs, options) || {};
    
    // 獲取預(yù)設(shè)在 defaults 字段中的初始鍵值對或匿名函數(shù)
    // 這里使用 _.result() 來兼容函數(shù)和對象兩種類型
    var defaults = _.result(this, "defaults");
    
    // 避免 attrs 中的 undefined 值覆蓋掉 defaults 中的默認值
    attrs = _.defaults(_.extend({}, defaults, attrs), defaults);
    
    // 初始化賦值
    this.set(attrs, options);
    this.changed = {};
    
    // 鉤子
    this.initialize.apply(this, arguments);
  };

很簡單的代碼，做了一些初始化賦值的事情。

用到了一個小技巧 attrs = _.defaults(_.extend({}, defaults, attrs), defaults); 來防止誤傳入的 undefined 覆蓋掉默認的 defaults 值。

Backbone 的精粹都在 set(){} 這個函數(shù)里面。

set: function(key, val, options) {
  if (key == null) return this;

  // 統(tǒng)一 "key", "val" 和 {key:val} 這兩種形式
  // attrs 最終為變動的對象
  var attrs;
  if (typeof key === "object") {
    attrs = key;
    options = val;
  } else {
    (attrs = {})[key] = val;
  }

  options || (options = {});

  // 規(guī)則驗證.
  if (!this._validate(attrs, options)) return false;

  var unset      = options.unset;
  var silent     = options.silent;
  var changes    = [];
  var changing   = this._changing;
  this._changing = true;

  // 預(yù)留上一次的值
  if (!changing) {
    this._previousAttributes = _.clone(this.attributes);
    this.changed = {};
  }

  // 備份一個當前的數(shù)據(jù)對象
  var current = this.attributes;
  var changed = this.changed;
  var prev    = this._previousAttributes;

  // 遍歷傳入的新數(shù)據(jù)對象
  for (var attr in attrs) {
    val = attrs[attr];
    
    // 如果新數(shù)據(jù)與當前不一致，則標記變動的鍵名
    if (!_.isEqual(current[attr], val)) changes.push(attr);
    
    // 如果新數(shù)據(jù)與舊數(shù)據(jù)不一致，則更新已變動的數(shù)據(jù)備份
    if (!_.isEqual(prev[attr], val)) {
      changed[attr] = val;
    } else {
      delete changed[attr];
    }
    
    // 真正干活的代碼，更新數(shù)據(jù)或者刪除數(shù)據(jù)
    unset ? delete current[attr] : current[attr] = val;
  }

  // 更新 id 字段
  if (this.idAttribute in attrs) this.id = this.get(this.idAttribute);

  if (!silent) {
    if (changes.length) this._pending = options;
    
    // 遍歷變動清單，并且逐個觸發(fā) `change:` 事件
    for (var i = 0; i < changes.length; i++) {
      this.trigger("change:" + changes[i], this, current[changes[i]], options);
    }
  }

  if (changing) return this;
  if (!silent) {

    // 觸發(fā)一個總的 `change` 事件
    // 注釋說這里用 while 是確保嵌套場景也只觸發(fā)一個 `change` 事件
    while (this._pending) {
      options = this._pending;
      this._pending = false;
      this.trigger("change", this, options);
    }
  }
  this._pending = false;
  this._changing = false;
  return this;
},

整個 set 里面，實際干活的就是 unset ? delete current[attr] : current[attr] = val; 。

沒看明白 this._changing 和 this._pending 的使用場景，感覺是一個當多個 set 同時執(zhí)行時候的一個標記位，但是 JS 是單線程執(zhí)行，里面又都是 for 語句，按理說可以不用這兩個標記位。又或者是我的理解有誤。

more

看到這，給各種Observer打補丁就有了可行性，支持 Object.defineProperty 就用 Object.defineProperty，不支持的則降級到走 Backbone 的這種 for in 方式。

同步更新博客

https://www.mxgw.info/a/backb...