承接第三篇末尾内容,本篇结合官方 API 进入对 Zepto 核心的分析,开始难度会比较大,需要重点理解几个核心对象的关系,方能找到线索。
$()
与 Z 对象创建
Zepto Core API 的首个方法 $()
按照其官方解释:
Create a Zepto collection object by performing a CSS selector, wrapping DOM nodes, or creating elements from an HTML string.
通过使用 CSS 选择器,或包装 DOM 节点,或从 HTML 片段中创建一个 Zepto 集合对象。该处即为核心模块的入口,对应 src/zepto.js
中的如下调用:
//\ Line 231
$ = function(selector, context) {
return zepto.init(selector, context);
};
//\ Line 186
zepto.init = function(selector, context) {
//\ 该函数的几种出口
/*\ 1 */ return zepto.Z();
/*\ 2 */ return $(context).find(selector);
/*\ 3 */ return $(document).ready(selector);
/*\ 4 */ return selector;
/*\ 5 */ return $(context).find(selector);
/*\ 6 */ return zepto.Z(dom, selector);
};
$
是一个收紧入口的 zepto.init
别名,这样的函数传递使得 zepto.init
的具值参数最多为 2 个。进入 zepto.init
函数,先忽略中间的处理细节,注意到最终出口共有如上列举的六种,第 1 种与第 6 种陷入一个名为 Z
的对象创建过程,下文中发现 $.fn
对象将 constructor
指向了 zepto.Z
且设定了 Z
对象的原型,此处正是 Zepto 的结构组织方式所在:
//\ Line 172
zepto.Z = function(dom, selector) {
return new Z(dom, selector);
};
//\ Line 408
$.fn = {
constructor: zepto.Z,
//\ ...
}
//\ Line 938
zepto.Z.prototype = Z.prototype = $.fn;
加载 Zepto 代码后,可在浏览器中进行如下调试即可初步认识 Z 对象的生成:
//\ 创建任意一个 Zepto 对象,他的原型均指向 $.fn
> $().__proto__ === $.fn
true
//\ $ 对象中包含了 Zepto 包级别的工具函数,主要用于扩展 Zepto 功能,以 $.func 方式对外暴露
> Object.keys($)
(22) ["extend", "contains", "type", ... ]
//\ $.fn 对象包含了 Zepto 对外暴露的操作 API,面向对象均为通过 zepto.Z 函数创建的 Z 对象
> Object.keys($.fn)
(75) ["constructor", "length", "forEach", "reduce", ... ]
//\ 因此 Z 对象上的函数调用指向其原型 $.fn 上的同名函数
> $().hasClass === $.fn.hasClass
true
继续调试过程,分析 Z 对象的实质:
//\ 创建一个空的 Z 对象,发现 Chrome 将其识别为一个“数组”
> $()
Z [selector: ""]
//\ 但其实际并不是 Array 包装类的一个实例
> $() instanceof Array
false
> $() instanceof Zepto.zepto.Z
true
//\ Zepto 通过 "扩展数组" 这种方式使得其对外体现为一个对外包含成员变量 selector 的数组,对内可以进行函数式运算的灵活数据结构
> Object.keys($())
(2) ["length", "selector"]
这样 "扩展数组" 生成的方法在于这个非常简明的函数,这里也揭示了下文中 this
的指向为一个 Z
对象:
//\ Line 128
//\ Z 对象的 Constructor
function Z(dom, selector) {
var i,
len = dom ? dom.length : 0;
for (i = 0; i < len; i++) this[i] = dom[i];
this.length = len;
this.selector = selector || "";
}
因此,回归 zepto.init
方法,其实质即为调用该构造函数生成 Z 对象(2/3/5 出口返回的是在某个 Z 对象下操作生成的 Z 对象,4 出口实际上传入的是 Z 对象因此直接返回自身)。Z 对象 构造函数读入的两个参数 dom
与 selector
在 Zepto 中也有明确的规范,用以保证 Z 构造函数的简单性。
dom
的生成与 selector
的取值范围
dom
的生成严格依赖于以下的几个正则表达式以及其生成函数 zepto.fragment
,该步骤比较晦涩,简而言之功能为映射原生 dom 结构至相应 Z 对象的关系:
//\ Line 10
//\ 用以匹配普通的 HTML 片段,这里面 Group 1 (\w+|!) 用来拿标签类型,例如: div
fragmentRE = /^\s*<(\w+|!)[^>]*>/,
//\ 用以匹配单标签或两个闭合标签间没有内容的情况,如: /
singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,
//\ 用以匹配不应自闭合的标签,Group 1 / Gruop 2 均为 Group 1 判断条件约束的非自闭和标签
tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,
//\ Line 140
zepto.fragment = function(html, name, properties) {
var dom, nodes, container;
//\ 如果满足 singleTagRE 就调用 document 创建该元素,再通过 $() 初始化
if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1));
if (!dom) {
//\ 如果声明 replace 将 html 标签修复
if (html.replace) html = html.replace(tagExpanderRE, "<$1>$2>");
//\ name 如果不指定,默认取标签类型
if (name === undefined) name = fragmentRE.test(html) && RegExp.$1;
//\ 如果 name 不在全局变量 containers 内,取 *
if (!(name in containers)) name = "*";
//\ 从 containers 拿具体标签,创建 html 内容
container = containers[name];
container.innerHTML = "" + html;
//\ 将 container 中每个子节点的内容删除,此时 dom 剩余部分是一个 Z 元素
//\ 参考:https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
dom = $.each(slice.call(container.childNodes), function() {
container.removeChild(this);
});
}
//\ 如果传入第三个参数为普通对象
if (isPlainObject(properties)) {
//\ 根据 dom 创建 Z 对象,再将 properties 中定义的属性挂载到 $(dom) 上
nodes = $(dom);
$.each(properties, function(key, value) {
if (methodAttributes.indexOf(key) > -1) nodes[key](value);
else nodes.attr(key, value);
});
}
//\ 返回 dom
return dom;
};
分析期间的几个疑问:
- 为什么有三个正则用于测试:
为了保证下三种调用方式生成的结果相同(实际上描述的也是同一个空标签):
> $.zepto.fragment("")
Z [div, selector: ""]
> $.zepto.fragment("")
Z [div, selector: ""]
> $.zepto.fragment("")
Z [div, selector: ""]
-
container
与 containers
:
containers
用于当以 name
为某个标签写为 innerHTML
时其父元素是合理的,这里仅在是表格元素的情况下替换了父容器,其他情况下默认采用 div
.
//\ Line 22
containers = {
tr: document.createElement("tbody"),
tbody: table,
thead: table,
tfoot: table,
td: tableRow,
th: tableRow,
"*": document.createElement("div")
},
-
isObject
与 isPlainObject
:
本函数中判定第三个参数类型时,采用了 isPlainObject
而不仅仅是 isObject
是为了避开数组等其他可能被识别为 Object 的情况,此处校验该对象的原型。
//\ Line 74
function isPlainObject(obj) {
return (
isObject(obj) &&
!isWindow(obj) &&
Object.getPrototypeOf(obj) == Object.prototype
);
}
selector
较 DOM 要简单得多,如果不引入额外的 Selector 模块,其取值范围就是 Document.querySelectorAll()
这一浏览器原生方法支持的选择器的取值范围。(注意 Zepto 源代码中 selector
多用于标识形参,这里提到的 selector
实际上是 Z 对象中的 selector
属性)
zepto.init
的六种出口
有了上面的铺垫,终于可以进入 zepto.init
,解析其六种出口对应的 Z 对象创建或操作过程:
zepto.init = function(selector, context) {
var dom
//\ 出口 1: 当第一个入参为 Falsy 值,那么直接返回一个空的 Z 对象(该出口行为为创建)
//\ 例如: $() / $(undfined)
if (!selector) return zepto.Z()
//\ 如果 selector 形参是字符串
else if (typeof selector == 'string') {
//\ 当 selector 形参第一个字符为 '<' 且符合 fragmentRE 的匹配结果,那么传入 zepto.fragment 方法,创建 Z 对象,例如:$("")
//\ 跳至出口 6
if (selector[0] == '<' && fragmentRE.test(selector))
dom = zepto.fragment(selector, RegExp.$1, context), selector = null
//\ 出口 2: 如果传入的 context 不为空,那么基于 context 创建一个 Z 对象并返回包含 context 的 Z 对象(该出口行为为选择)
//\ 例如 $("p", { text:"Hello", id:"greeting", css:{color:'darkblue'} })
else if (context !== undefined) return $(context).find(selector)
//\ 出口3:如果没有 context 要求,则直接在全文 qsa(该出口行为为选择)
//\ 例如 $("p#grt")
else dom = zepto.qsa(document, selector)
}
//\ 出口4:如果 selector 形参为函数,那将其挂载在 ready 方法内(该出口行为为逻辑 Defer)
//\ 例如 $(() => alert("DONE))
else if (isFunction(selector)) return $(document).ready(selector)
//\ 出口 5: 当第一个入参已经为 Z 对象时直接返回自身(该出口行为为提供兼容)
//\ 例如 JSON.stringify($($('p'))) === JSON.stringify($('p'))
else if (zepto.isZ(selector)) return selector
//\ 如果前方判断条件全部失败,进入最终的类型判断
else {
//\ 如果传入的 Selector 是数组,那么去除 Falsy 值合并,例如 $([$('div'), $('body')])
if (isArray(selector)) dom = compact(selector)
//\ 此处为降级条件,跳入出口 6
else if (isObject(selector))
dom = [selector], selector = null
//\ 剩余部分参考出口 2/3 处理方式
else if (fragmentRE.test(selector))
dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null
else if (context !== undefined) return $(context).find(selector)
else dom = zepto.qsa(document, selector)
}
//\ 出口 6,以上文处理规范的 dom / selector 创建 Z 对象(该出口行为为创建)
return zepto.Z(dom, selector)
}
此时,也可以给出 dom
对象与 Z 对象的真正关系,dom
是用于 Z 对象生成过程中的中间 Z 对象;zepto.init
与 zepto.fragment
必须合并起来才能真正理解 $()
可以多类型进,单类型出的设计技巧及真实意图,这也是 Zepto 的精华所在。