摘要：系列文章讀源碼之篇提供基本的屬性添加獲取移除等功能。判斷是否為等對(duì)象特性檢查閉包實(shí)現(xiàn)塊作用域，不污染全局變量。找這個(gè)屬性，若沒(méi)有則返回空對(duì)象執(zhí)行函數(shù)，返回被修改的值。

系列文章：讀 arale 源碼之 class 篇

attributes 提供基本的屬性添加、獲取、移除等功能。它是與實(shí)例相關(guān)的狀態(tài)信息，可讀可寫，發(fā)生變化時(shí)，會(huì)自動(dòng)觸發(fā)相關(guān)事件

先來(lái)了解一下 Attribute 模塊要實(shí)現(xiàn)的功能：

設(shè)置屬性值

{
  attr1: "hello1",

  // 相當(dāng)于 attr1 的方式
  attr2: {
    value: "hello2"
  }
}

在屬性設(shè)置和獲取前，觸發(fā)一個(gè)函數(shù)來(lái)先處理屬性

{
  attr3: {
    value: "hello3",
    setter: function(v) {
      return v + "";
    },
    getter: function(v) {
      return v * 6;
    }
  }
}

只讀屬性

{
  attr4: {
    value: 1,
    readOnly: true
  }
}

屬性發(fā)生改變時(shí)自動(dòng)觸發(fā)相關(guān)事件

{
  _onChangeAttr1: function(val) {
    console.log("attr1 changed by" + val);
  }
}

設(shè)置屬性時(shí)，多了兩個(gè)狀態(tài)

// {silent: true} 綁定的 _onChangeAttr1 不執(zhí)行
instance.set("attr1", 2, {silent: true});

// {override: true} 默認(rèn) false，對(duì)象混合，為 true 時(shí)，直接覆蓋對(duì)象。
instance.set("attr2", {w: 12, h: 33}, {override: true});

接下來(lái)再去看看源碼怎么實(shí)現(xiàn)的！

initAttrs 將在實(shí)例化對(duì)象時(shí)調(diào)用。

exports.initAttrs = function(config) {
  // initAttrs 是在初始化時(shí)調(diào)用的，默認(rèn)情況下實(shí)例上肯定沒(méi)有 attrs，不存在覆蓋問(wèn)題
  var attrs = this.attrs = {};
  // 得到所有繼承的屬性
  var specialProps = this.propsInAttrs || [];
  // 合并和克隆父類的 attrs 值到實(shí)例的 attrs 上
  mergeInheritedAttrs(attrs, this, specialProps);
  // 從 config 中合并屬性
  if (config) {
    mergeInheritedAttrs(atts, config);
  }
  // 對(duì)于有 setter 的屬性，要用初始值 set 一下，以保證關(guān)聯(lián)屬性也一同初始化
  setSetterAttrs(this, attrs, config);
  // Convert `on/before/afterXxx` config to event handler.
  parseEventsFromAttrs(this, attrs);
  // 將 this.attrs 上的 special properties 放回 this 上
  copySpecialProps(specialProps, this, attrs, true);
}

1. merge 合并屬性

function merge(receiver, supplier) {
  var key, value;
  for (key in supplier) {
    if (supplier.hasOwnPrototype(key)) {
      value = supplier[key];
      // 只 clone 數(shù)組和 簡(jiǎn)單對(duì)象，其他保持不變
      if (isArray(value)) {
        // 重新返回一個(gè)數(shù)組，不會(huì)占用同一個(gè)內(nèi)存地址
        value = value.slice();
      } else if (isPlainObject(value)) {
        // 接收者合并之前的值不是簡(jiǎn)單對(duì)象的話，將其設(shè)置為空對(duì)象，即覆蓋之前的值。
        var prev = receiver[key];
        isPlainObject(prev) || (prev = {});
        // 如果是簡(jiǎn)單對(duì)象的話，混合他們的值
        value = merge(prev, value);
      }
      receiver[key] = value;
    }
  }
  return receiver;
}

1.1 isPlainObject 判斷是否為簡(jiǎn)單對(duì)象

// 什么是簡(jiǎn)單對(duì)象？ 使用 {} 或者 new Object 創(chuàng)建。for-in 遍歷時(shí)只包含自身屬性的對(duì)象。
function isPlainObject(o) {
  // 首先必須是對(duì)象，然后要排除 DOM 對(duì)象和 Window 對(duì)象
  if (!o || toString.call(o) != "[object Object]" || o.nodeType || isWindow(o)) {
    return false;
  }
  try {
    // Object 沒(méi)有屬于自己的 constructor
    if (o.constructor && !hasOwn.call(o, "constructor") && !hasOwn.call(o.constructor.prototype, "isPrototypeOf")) {
      return false;
    }
  } catch (e) {
    // IE8,9 會(huì)拋出異常
    return false;
  }

  var key;

  // 如果是 IE9 以下. iteratesOwnLast 是特性檢查。
  if (iteratesOwnLast) {
    // ie9 以下，遍歷時(shí)不會(huì)優(yōu)先遍歷自身屬性，如果第一個(gè)屬性是自身的，說(shuō)明所有屬性都是自身的。
    for (key in o) {
     return hasOwn.call(o, key);
    }
  }

  // 自身屬性會(huì)優(yōu)先遍歷，然后才是原型鏈上的，如果最后一個(gè)屬性都是自身的，說(shuō)明所有屬性都是自身的。
  for (key in o) {}
  // 除了 IE9 以下的瀏覽器，其它瀏覽器都不允許修改 undefined 關(guān)鍵字，所以這樣直接用也沒(méi)問(wèn)題。
  return key === undefined || hasOwn.call(o, key);
}

// 判斷是否為 window top self 等對(duì)象
function isWindow(o) {
  return o != null && o == o.window;
}

// ie < 9 特性檢查, 閉包實(shí)現(xiàn)塊作用域，不污染全局變量。
(function() {
  var props = [];
  function Ctor() {
    this.x = 1;
  }
  Ctor.prototype = {
    valueOf: 1,
    y: 1
  }
  for (var prop in new Ctor) {
    props push(prop);
  }
  iteratesOwnLast = props[0] !== "x";
})();

2. copySpecialProps

/*
 * supplier: 提供者； receiver: 接收者； specialProps: 指定提供者身上的屬性，相當(dāng)于白名單
 */
function copySpecialProps(specialProps, receiver, supplier, isAttr2Prop) {
  for (var i = 0, len = specialProps.length; i < len; i++) {
    var key = specialProps[i];
    if (supplier.hasOwnPrototype(key)) {
      receiver[key] = isAttr2Prop ? receiver.get(key) : supplier[key];
    }
  }
}

3. mergeInheritedAttrs 遍歷原型鏈，將繼承的 attrs 上定義的屬性，合并到 this.attrs 上，方便后續(xù)處理這些屬性。

// 遍歷實(shí)例的原型鏈，將 attrs 屬性合并
function mergeInheritedAttrs(attrs, instance, specialProps) {
  var inherited = [];
  var proto = instance.constructor.prototype;
  // 遍歷實(shí)例的原型鏈, 查找 attrs 屬性。并將其添加到 inherited 數(shù)組中。
  while (proto) {
    // 原型鏈上若是沒(méi)有 attrs 屬性的話，將其設(shè)為空對(duì)象
    if (!proto.hasOwnPrototype("attrs")) {
      proto.attrs = {};
    }
    // 將 proto 上的特殊 properties 放到 proto.attrs 上，以便合并
    copySpecialProps(specialProps, proto.attrs, proto);
    // 為空時(shí)不添加
    if (!isEmptyObject(proto.attrs)) {
      // 將 proto.attrs 添加到 inherited 數(shù)組中，從頭部放。類似 stack（棧）的結(jié)構(gòu)，后進(jìn)先出
      inherited.unshift(proto.attrs);
    }
    // 繼續(xù)查找原型鏈，直至 Class.superclass 時(shí)，為 undefined 值終止循環(huán)
    proto = proto.constructor.superclass;
  }

  // 合并和克隆繼承的值到實(shí)例上
  for (var i = 0, len = inherited.length; i < len; i++) {
    merge(attrs, normalize(inherited[i]));
  }
}

4. setSetterAttrs

對(duì)于有 setter 的屬性，要用初始值 set 一下，以保證關(guān)聯(lián)屬性也一同初始化

function setSetterAttrs(host, attrs, config) {
  var options = {
    silent: true
  };
  host.__initializeingAttrs = true;
  for (var key in config) {
    if (config.hasOwnPrototype(key)) {
      if (attrs[key].setter) {
        // 如果屬性有 setter （繼承的也可以），那么用初始值設(shè)置一下。
        host.set(key, config[key], options);
      }
    }
  }
  delete host.__initializingAttrs;
}

5. parseEventsFromAttrs 解析 attrs 上的事件

綁定 on|before|after 事件

var EVENT_PATTERN = /^(on|before|after)([A-Z].*)$/;
var EVENT_NAME_PATTERN = /^(Change)?([A-Z])(.*)/;
function parseEventsFromAttrs(host, attrs) {
  for (var key in attrs) {
    if (attrs.hasOwnPrototype(key)) {
      var value = attrs[key].value, m;
      if (isFunction(value) && (m = key.match(EVENT_PATTERN))) {
        host[m[1]](getEventName(m[2]), value);
        delete attrs[key];
      }
    }
  }
}

// 將 Show 變成 show ，ChangeTitle 變成 change:title
function getEventName(name) {
  var m = name.match(EVENT_NAME_PATTERN);
  var ret = m[1] ? "change:" : "";
  ret += m[2].toLowerCase() + m[3];
  return ret;
}

配置 getter 的話，調(diào)用 getter。

exports.get = function(key) {
  var attr = this.attrs[key] || {};
  var val = attr.value;
  return attr.getter ? attr.getter.call(this, val, key) : val;
}

并且觸發(fā) change 綁定事件，除非 silent 為 true

exports.set = function(key, val, options) {
  var attrs = {};
  // 像這樣調(diào)用 set("key", val, options)
  if (isString(key)) {
    attrs[key] = val;

  // 像這樣調(diào)用 set({key: val}, options)
  } else {
    attrs = key;
    options = val;
  }

  options || (options = {});
  var silent = options.silent;
  var override = options.override;
  // 全局的 attrs 變量用局部變量 now 調(diào)用
  var now = this.attrs;
  // 全局的 __changedAttrs 變量用局部變量 changed 來(lái)使用。
  var changed = this.__changedAttrs || (this.__changedAttrs = {});
  for (key in attrs) {
    if (!attrs.hasOwnPrototype(key)) continue;
    // 找這個(gè)屬性，若沒(méi)有則返回空對(duì)象
    var attr = now[key] || (now[key] = {});
    val = attrs[key];
    if (attr.readOnly) {
      throw new Error("This attribute is readOnly:" + key);
    }
    // 執(zhí)行 setter 函數(shù)，返回被修改的值。
    if (attr.setter) {
      val = attr.setter.call(this, val, key);
    }
    // 獲取設(shè)置前的 prev 值
    var prev = this.get(key);
    // 如果設(shè)置了 override 為 true，表示要強(qiáng)制覆蓋，就不去 merge 了
    // 都為對(duì)象時(shí)，做 merge 操作，以保留 prev 上沒(méi)有覆蓋的值
    if (!override && isPlainObject(prev) && isPlainObject(val)) {
      val = merge(merge({}, prev), val);
    }
    // 執(zhí)行賦值
    now[key].value = val;
    // 執(zhí)行 change 事件，初始化是調(diào)用 set 不觸發(fā)任何事件
    if (!this.__intializingAttrs && !isEqual(prev, val)) {
      if (silent) {
        changed[key] = [val, prev];
      } else {
        this.trigger("change:" + key, val, prev, key);
      }
    }
  }
  return this;
}

手動(dòng)觸發(fā)所有 change:attribute 事件

exports.change = function() {
  var changed = this.__changedAttrs;
  if (changed) {
    for (var key in changed) {
      if (changed.hasOwnPrototype(key)) {
        var args = changed[key];
        this.trigger("change:" + key, args[0], args[1], key);
      }
    }
    delete this.__changedAttrs;
  }
  return this;
}