Zepto 源码分析 3 - qsa 实现与工具函数设计

承接第一篇末尾内容，本部分开始进入 zepto 主模块，分析其设计思路与实现技巧（下文代码均进行太重格式化，但代码 Commit 版本同第一部份内容且入口函数不变）：

Zepto 的选择器 zepto.qsa()

//\ Line 262
  zepto.qsa = function(element, selector) {
  };

先从第一个与原型链构造不直接相关的工具函数 qsa 提及，观察 Zepto 的设计思路。

//\ Line 28
  simpleSelectorRE = /^[\w-]*$/,

    //\ Line 337
    var found,
      maybeID = selector[0] == "#",
      maybeClass = !maybeID && selector[0] == ".",
      nameOnly = maybeID || maybeClass ? selector.slice(1) : selector, // Ensure that a 1 char tag name still gets checked
      isSimple = simpleSelectorRE.test(nameOnly);

函数开始部分先定义了几个 Bool 值，用以猜想是否可能为 id 或 class，此时若是多是二者中的一个，那么去除标记部分(. or #)，不然取自身记为 nameOnly。simpleSelectorRE 用于测试可能被剥离了一次标记部分的 selector 是否知足是通常字符串的要求，若是不是，那么可能查询目标是多个条件组合（如 .class1.class2），后面直接放入原生的 querySelectorAll 方法查询。

//\ Line 268
   return element.getElementById && isSimple && maybeID // Safari DocumentFragment doesn't have getElementById
      ? (found = element.getElementById(nameOnly))
        ? [found]
        : []

进入包含一系列判断的 return 阶段，268 行中出现了一个兼容性注释，因为前方的 maybeClass 定义中声明了并不是 id 因此此处不支持 getElementById 方法也将直接陷入原生的 querySelectorAll 方法。若是知足查询条件则发给原生 getElementById` 方法查询，返回数组方式的结果。

//\ Line 6
    var undefined,
    key,
    $,
    classList,
    emptyArray = [],
    concat = emptyArray.concat,
    filter = emptyArray.filter,
    slice = emptyArray.slice,

      //\ Line 270
      : element.nodeType !== 1 &&
        element.nodeType !== 9 &&
        element.nodeType !== 11
      ? []
      : slice.call(
          isSimple && !maybeID && element.getElementsByClassName // DocumentFragment doesn't have getElementsByClassName/TagName
            ? maybeClass
              ? element.getElementsByClassName(nameOnly) // If it's simple, it could be a class
              : element.getElementsByTagName(selector) // Or a tag
            : element.querySelectorAll(selector) // Or it's not simple, and we need to query all
        );

先参照 nodeType 判断了根搜索元素类型，此处采用了和 id 相同的降级策略，并经过调用空数组上方法的方式调用了 Array.prototype 上的 slice 方法完成数组生成，总体 Zepto 库实际上使用了相同的思想利用原型链给予 Z 对象上的操做方法。

Zepto 的几个工具函数设计

Zepto 的数组与对象相关工具函数较类似于 Underscore.js 先行略去，着重列举几个有技巧的实现：

• 类型相关工具函数的例子：

//\ Line 29
  class2type = {},
  toString = class2type.toString,

  //\ Line 401
  // Populate the class2type map
  $.each(
    "Boolean Number String Function Array Date RegExp Object Error".split(" "),
    function(i, name) {
      class2type["[object " + name + "]"] = name.toLowerCase();
    }
  );

  //\ Line 65
  function type(obj) {
    return obj == null ? String(obj) :
      class2type[toString.call(obj)] || "object"
  }

工具函数 type 中出现了 == 运算符，此处利用了 null/undefined == null 的语言特性，并经过 String 包装类进行类型转换获得其类型的字符串表示，若是并不是为这两种类型，则经过 class2type 的映射关系将其转化为对应的字符串类型名。

//\ Line 78
  function likeArray(obj) {
    var length = !!obj && 'length' in obj && obj.length,
      type = $.type(obj)

    return 'function' != type && !isWindow(obj) && (
      'array' == type || length === 0 ||
        (typeof length == 'number' && length > 0 && (length - 1) in obj)
    )
  }

工具函数 likeArray 实际上给出了 Zepto 所认为的数组形式，即：存在正 length 的 Number 型成员变量及 Key 值为 length - 1 的成员变量且并不是是函数的对象。这样定义可使得迭代器模式可使用，且刚好使用了未初始化的数组项为 undefined 类型的语言属性。

• 断定元素与选择器匹配性的函数 matches

与 qsa() 函数相似，Zepto 还给出了一个类型匹配函数 zepto.matches() 用于判断某个元素是否与一个给定的选择器匹配：

//\ Line 33
tempParent = document.createElement('div'),

  //\ Line 51
  zepto.matches = function(element, selector) {
  
    //\ 若是不知足匹配的类型条件，那么返回结果为 False
    if (!selector || !element || element.nodeType !== 1) return false;
    
    //\ Element.prototype.matches() - 断定某个元素是否符合某个选择器
    //\ https://dom.spec.whatwg.org/#dom-element-matches
    var matchesSelector =
      element.matches ||
      element.webkitMatchesSelector ||
      element.mozMatchesSelector ||
      element.oMatchesSelector ||
      element.matchesSelector;
    if (matchesSelector) return matchesSelector.call(element, selector);
    
    //\ 若是当前浏览器未实现 matches API，则降级为使用 qsa 函数完成
    //\ 若是父节点存在，则选取父节点进行 qsa()
    //\ 若是父节点不存在，将目标节点放入预约的父节点中，再在父节点上进行 qsa() 检验是否能够找到子节点
    // fall back to performing a selector:
    var match,
      parent = element.parentNode,
      temp = !parent;
    if (temp) (parent = tempParent).appendChild(element);
    match = ~zepto.qsa(parent, selector).indexOf(element);
    
    //\ 清除可能建立的父节点
    temp && tempParent.removeChild(element);
    return match;
  };

类似的构造父级容器以查询子级元素性质思路在 Zepto 源代码中屡次出现，例如对于另外一个工具函数 defaultDisplay 的实现中。

• 获取当前浏览器下某元素默认 display 值的 defaultDisplay() 函数，因为 DOM 中的元素默认样式值实际上在用户进行更改前即为浏览器赋予节点类型的默认值，所以查询元素的默认值能够变为查询某节点类型的默认值：

//\ Line 8
elementDisplay = {}

  //\ Line 109
  function defaultDisplay(nodeName) {
    var element, display;
    //\ 若是全局 elementDisplay 对象中已经缓存了查询目标 nodeName 的结果那么直接查询，不然陷入逻辑
    if (!elementDisplay[nodeName]) {
      
      //\ 建立一个同类型节点，将其放入 body 下获取它的实时计算值中的 display 属性
      element = document.createElement(nodeName);
      document.body.appendChild(element);
      
      //\ 此处引用了 IE 模块中的 getComputedStyle() 函数降级
      display = getComputedStyle(element, "").getPropertyValue("display");
      
      //\ 删除用于取值的元素对象，若是元素的 display 值为 none 那么将其值设为 block
      //\ 此处将 none 置为 display 的缘由为 $.fn.show() 函数中经过该函数获取一个非隐藏型的默认值
      element.parentNode.removeChild(element);
      display == "none" && (display = "block");
      
      //\ 缓存结果值至全局变量 elementDisplay
      elementDisplay[nodeName] = display;
    }
    return elementDisplay[nodeName];
  }
  
    //\ Line 574
    show: function() {
      return this.each(function() {
        this.style.display == "none" && (this.style.display = "");
        
        //\ defaultDisplay() 获取值为 none 时设定为 block 的缘由
        if (getComputedStyle(this, "").getPropertyValue("display") == "none")
          this.style.display = defaultDisplay(this.nodeName);
      });
     },

Zepto 加载扩展的方法

本节末尾，简单介绍一下扩展 Zepto 的方法。在主模块 Zepto 外，一个未默认编译的模块 Selector 包含了扩展原 qsa() 函数的实现，进入模块代码 src/selector.js，其结构以下：

(function($) {
  var zepto = $.zepto,
    oldQsa = zepto.qsa,
    oldMatches = zepto.matches;

  zepto.qsa = function(node, selector) {
      //\ 扩展的 zepto.qsa 实现
  };

  zepto.matches = function(node, selector) {
      //\ 扩展的 zepto.matches 实现
  };
})(Zepto);

在实际编译中只需将 Selector 在核心模块后编译便可替换原始的 qsa 函数与对应的 matches 函数，所以基于该思路的 Zepto 外挂模块很是简单。在分析核心模块逻辑时，能够经过此方法改写函数，或者尝试基于业务需求配置一个新的数据结构，再利用 Zepto 实现对 DOM 的增删改查。