读 Zepto 源码系列

虽然最近工作中没有怎么用 zepto ，但是据说 zepto 的源码比较简单，而且网上的资料也比较多，所以我就挑了 zepto 下手，希望能为以后阅读其他框架的源码打下基础吧。

源码版本

本文阅读的源码为 zepto1.2.0

阅读zepto之前需要了解 javascript 原型链和闭包的知识，推荐阅读王福朋的这篇文章:深入理解 Javascript 原型和闭包，写得很详细，也非常易于阅读。

源码结构

整体结构

var Zepto = (function () { ... })() window.Zepto = Zepto window.$ === undefined && (window.$ = Zepto)

如果在编辑器中将 zepto 的源码折叠起来，看到的就跟上面的代码一样。

zepto 的核心是一个闭包，加载完毕后立即执行。然后暴露给全局变量 zepto ，如果 $ 没有定义，也将 $ 赋值为 zepto 。

核心结构

在这部分中，我们先不关注 zepto 的具体实现，只看核心的结构，因此我将zepto中的逻辑先移除，得出如下的核心结构：

var zepto = {}, $ function Z(doms) { var len = doms.length for (var i = 0; i < len; i++) { this[i] = doms[i] } this.length = doms.length } zepto.Z = function(doms) { return new Z(doms) } zepto.init = function(doms) { var doms = ['domObj1','domObj2','domObj3'] return zepto.Z(doms) } $ = function() { return zepto.init() } $.fn = { constructor: zepto.Z, method: function() { return this } } zepto.Z.prototype = Z.prototype = $.fn return $

在源码中，可以看出， $ 其实是一个函数，同时在 $ 身上又挂了很多属性和方法（这里体现在 $.fn 身上，其他的会在后续的文章中谈到）。

我们在使用 zepto 的时候，会用 $ 去获取 dom ，并且在这些 dom 对象身上都有 zepto 定义的各种各样的操作方法。

从上面的伪代码中，可以看到，$ 其实调用了 zepto.init() 方法，在 init 方法中，会获取到 dom 元素集合，然后将集合交由 zepto.Z() 方法处理，而 zepto.Z 方法返回的是函数 Z 的一个实例。

函数 Z 会将 doms 展开，变成实例的属性，key 为对应 domObj 的索引， 并且设置实例的 length 属性。

zepto.Z.prototype = Z.prototype = $.fn

读到这里，你可能会有点疑惑，$ 最终返回的是 Z 函数的实例，但是 Z 函数明明没有 dom 的操作方法啊，这些操作方法都定义在 $.fn 身上，为什么 $ 可以调用这些方法呢？

其实关键在于这句代码 Z.prototype = $.fn ，这句代码将 Z 的 prototype 指向 $.fn ，这样，Z 的实例就继承了 $.fn 的方法。

既然这样就已经让 Z 的实例继承了 $.fn 的方法，那 zepto.Z.prototype = $.fn 又是为什么呢？

如果我们再看源码，会发现有这样的一个方法：

zepto.isZ = function(object) { return object instanceof zepto.Z }

这个方法是用来判读一个对象是否为 zepto 对象，这是通过判断这个对象是否为 zepto.Z 的实例来完成的，因此需要将 zepto.Z 和 Z 的 prototype 指向同一个对象。 isZ 方法会在 init 中用到，后面也会介绍。

 

 

 

 

 

数组方法

定义

var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice = emptyArray.slice

zepto 一开始就定义了一个空数组 emptyArray，定义这个空数组是为了取得数组的 concat、filter、slice 方法

compact

function compact(array) { return filter.call(array, function(item) { return item != null }) }

删除数组中的 null 和 undefined

这里用的是数组的 filter 方法，过滤出 item != null 的元素，组成新的数组。这里删除掉 null 很容易理解，为什么还可以删除 undefined 呢？这是因为这里用了 != ，而不是用 !== ，用 != 时， null 各 undefined 都会先转换成 false 再进行比较。

关于 null 和 undefined 推荐看看这篇文章： undefined与null的区别

flatten

function flatten(array) { return array.length > 0 ? $.fn.concat.apply([], array) : array }

将数组扁平化，例如将数组 [1,[2,3],[4,5],6,[7,[89]] 变成 [1,2,3,4,5,6,7,[8,9]] ,这个方法只能展开一层，多层嵌套也只能展开一层。

这里，我们先把 $.fn.concat 等价于数组的原生方法 concat，后面的章节也会分析 $.fn.concat 的。

这里比较巧妙的是利用了 apply ，apply 会将 array 中的 item 当成参数，concat.apply([], [1,2,3,[4,5]]) 相当于 [].concat(1,2,3,[4,5])，这样数组就扁平化了。

uniq

uniq = function(array) { return filter.call(array, function(item, idx) { return array.indexOf(item) == idx }) }

数组去重。

数组去重的原理是检测 item 在数组中第一次出现的位置是否和 item 所处的位置相等，如果不相等，则证明不是第一次出现，将其过滤掉。

字符串方法

camelize

camelize = function(str) { return str.replace(/-+(.)?/g, function(match, chr) { return chr ? chr.toUpperCase() : '' }) }

将 word-word 的形式的字符串转换成 wordWord 的形式， - 可以为一个或多个。

正则表达式匹配了一个或多个 - ，捕获组是捕获 - 号后的第一个字母，并将字母变成大写。

dasherize

function dasherize(str) { return str.replace(/::/g, '/') .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2') .replace(/([a-z\d])([A-Z])/g, '$1_$2') .replace(/_/g, '-') .toLowerCase() }

将驼峰式的写法转换成连字符 - 的写法。

例如 a = A6DExample::Before

第一个正则表达式是将字符串中的 :: 替换成 / 。a 变成 A6DExample/Before

第二个正则是在出现一次或多次大写字母和出现一次大写字母和连续一次或多次小写字母之间加入 _。a 变成 A6D_Example/Before

第三个正则是将出现一次小写字母或数字和出现一次大写字母之间加上 _。a 变成A6_D_Example/Before

第四个正则表达式是将 _ 替换成 -。a 变成A6-D-Example/Before

最后是将所有的大写字母转换成小写字母。a 变成 a6-d-example/before

我对正则不太熟悉，正则解释部分参考自:zepto源码--compact、flatten、camelize、dasherize、uniq--学习笔记

数据类型检测

定义

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

$.each 函数后面的文章会讲到，这段代码是将基本类型挂到 class2type 对象上。class2type 将会是如下的形式：

class2type = {
  "[object Boolean]": "boolean", "[object Number]": "number" ... } 

type

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

type 函数返回的是数据的类型。

如果 obj == null ，也就是 null 和 undefined，返回的是字符串 null 或 undefined

否则调用 Object.prototype.toString （toString = class2type.toString）方法，将返回的结果作为 class2type 的 key 取值。Object.prototype.toString 对不同的数据类型会返回形如 [object Boolean] 的结果。

如果都不是以上情况，默认返回 object 类型。

isFunction & isObject

function isFunction(value) { return type(value) === 'function' } function isObject(obj) { return type(obj) == 'object' }

调用 type 函数，判断返回的类型字符串，就知道是什么数据类型了

isWindow

function isWindow(obj) { return obj != null && obj == obj.window }

判断是否为浏览器的 window 对象

要为 window 对象首先要满足的条件是不能为 null 或者 undefined， 并且 obj.window 为自身的引用。

isDocument

function isDocument(obj) { return obj != null && obj.nodeType == obj.DOCUMENT_NODE }

判断是否为 document 对象

节点上有 nodeType 属性，每个属性值都有对应的常量。document 的 nodeType 值为 9 ，常量为 DOCUMENT_NODE。

具体见：MDN文档：Node.nodeType

isPlainObject

function isPlainObject(obj) { return isObject(obj) && !isWindow(obj) && Object.getPrototypeof(obj) == Object.prototype }

判断是否为纯粹的对象

纯粹对象首先必须是对象 isObject(obj)

并且不是 window 对象 !isWindow(obj)

并且原型要和 Object 的原型相等

isArray

isArray = Array.isArray || function(object) { return object instanceof Array}

这个方法来用判断是否为数组类型。

如果浏览器支持数组的 isArray 原生方法，就采用原生方法，否则检测数据是否为 Array 的实例。

我们都知道，instanceof 的检测的原理是查找实例的 prototype 是否在构造函数的原型链上，如果在，则返回 true。 所以用 instanceof 可能会得到不太准确的结果。例如：

index.html

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <script>  window.onload = function () {  var fwindow = window.framePage.contentWindow // frame 页面的window对象  var fArray = fwindow.Array // frame 页面的Array  var fdata = fwindow.data // frame 页面的 data [1,2,3]  console.log(fdata instanceof fArray) // true  console.log(fdata instanceof Array) // false  }  </script> <title>Document</title> </head> <body> <iframe id="framePage" src="frame.html" frameborder="0"></iframe> </body> </html>

frame.html

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script>  window.data = [1,2,3]  </script> </head> <body> <p>frame page</p> </body> </html>

由于 iframe 是在独立的环境中运行的，所以 fdata instanceof Array 返回的 false 。

在 MDN 上看到，可以用这样的 ployfill 来使用 isArray

if (!Array.isArray) { Array.isArray = function(arg) { return Object.prototype.toString.call(arg) === '[object Array]' } }

也就是说，isArray 可以修改成这样：

isArray = Array.isArray || function(object) { return Object.prototype.toString.call(object) === '[object Array]'}

为什么 zepto 不这样写呢？知道的可以留言告知下。

likeArray

function likeArray(obj) { var length = !!obj && // obj必须存在 'length' in obj && // obj 中必须存在 length 属性 obj.length, // 返回 length的值 type = $.type(obj) // 调用 type 函数，返回 obj 的数据类型。这里我有点不太明白，为什么要覆盖掉上面定义的 type 函数呢？再定义多一个变量，直接调用 type 函数不好吗？ return 'function' != type && // 不为function类型 !isWindow(obj) && // 并且不为window类型 ( 'array' == type || length === 0 || // 如果为 array 类型或者length 的值为 0，返回true (typeof length == 'number' && length > 0 && (length - 1) in obj) // 或者 length 为数字，并且 length的值大于零，并且 length - 1 为 obj 的 key ) }

判断是否为数据是否为类数组。

类数组的形式如下：

likeArrayData = {
  '0': 0, '1': 1, "2": 2 length: 3 }

可以看到，类数组都有 length 属性，并且 key 为按0,1,2,3 顺序的数字。

代码已经有注释了，这里再简单总结下

首先将 function类型和 window 对象排除

再将 type 为 array 和 length === 0 的认为是类数组。type 为 array 比较容易理解，length === 0 其实就是将其看作为空数组。

最后一种情况必须要满足三个条件：

1. length 必须为数字
2. length 必须大于 0 ，表示有元素存在于类数组中
3. key length - 1 必须存在于 obj 中。我们都知道，数组最后的 index 值为 length -1 ，这里也是检查最后一个 key 是否存在。

 

 

 

Zepto 提供了丰富的工具函数，下面来一一解读。

源码版本

本文阅读的源码为 zepto1.2.0

$.extend

$.extend 方法可以用来扩展目标对象的属性。目标对象的同名属性会被源对象的属性覆盖。

$.extend 其实调用的是内部方法 extend， 所以我们先看看内部方法 extend 的具体实现。

function extend(target, source, deep) { for (key in source) // 遍历源对象的属性值 if (deep && (isPlainObject(source[key]) || isArray(source[key]))) { // 如果为深度复制，并且源对象的属性值为纯粹对象或者数组 if (isPlainObject(source[key]) && !isPlainObject(target[key])) // 如果为纯粹对象 target[key] = {} // 如果源对象的属性值为纯粹对象，并且目标对象对应的属性值不为纯粹对象，则将目标对象对应的属性值置为空对象 if (isArray(source[key]) && !isArray(target[key])) // 如果源对象的属性值为数组，并且目标对象对应的属性值不为数组，则将目标对象对应的属性值置为空数组 target[key] = [] extend(target[key], source[key], deep) // 递归调用extend函数 } else if (source[key] !== undefined) target[key] = source[key] // 不对undefined值进行复制 }

extend 的第一个参数 taget 为目标对象， source 为源对象， deep 表示是否为深度复制。当 deep 为 true 时为深度复制， false 时为浅复制。

1. extend 函数用 for···in 对 source 的属性进行遍历

2. 如果 deep 为 false 时，只进行浅复制，将 source 中不为 undefined 的值赋值到 target 对应的属性中（注意，这里用的是 !==，不是 != ，所以只排除严格为 undefined 的值，不包含 null ）。如果 source 对应的属性值为对象或者数组，会保持该对象或数组的引用。

3. 如果 deep 为 true ，并且 source 的属性值为纯粹对象或者数组时

   3.1. 如果 source 的属性为纯粹对象，并且 target 对应的属性不为纯粹对象时，将 target 的对应属性设置为空对象

   3.2. 如果 source 的属性为数组，并且 target 对应属性不为数组时，将 target 的对应属性设置为空数组

   3.3. 将 source 和 target 对应的属性及 deep 作为参数，递归调用 extend 函数，以实现深度复制。

现在，再看看 $.extend 的具体实现

$.extend = function(target) { var deep, args = slice.call(arguments, 1) if (typeof target == 'boolean') { deep = target target = args.shift() } args.forEach(function(arg) { extend(target, arg, deep) }) return target }

在说原理之前，先来看看 $.extend 的调用方式，调用方式如下：

$.extend(target, [source, [source2, ...]]) 或 $.extend(true, target, [source, ...])

在 $.extend 中，如果不需要深度复制，第一个参数可以是目标对象 target, 后面可以有多个 source 源对象。如果需要深度复制，第一个参数为 deep ，第二个参数为 target ，为目标对象，后面可以有多个 source 源对象。

$.extend 函数的参数设计得很优雅，不需要深度复制时，可以不用显式地将 deep 置为 false。这是如何做到的呢？

在 $.extend 函数中，定义了一个数组 args，用来接受除第一个参数外的所有参数。

然后判断第一个参数 target 是否为布尔值，如果为布尔值，表示第一个参数为 deep ，那么第二个才为目标对象，因此需要重新为 target 赋值为 args.shift() 。

最后就比较简单了，循环源对象数组 args， 分别调用 extend 方法，实现对目标对象的扩展。

$.each

$.each 用来遍历数组或者对象，源码如下：

$.each = function(elements, callback) { var i, key if (likeArray(elements)) { // 类数组 for (i = 0; i < elements.length; i++) if (callback.call(elements[i], i, elements[i]) === false) return elements } else { // 对象 for (key in elements) if (callback.call(elements[key], key, elements[key]) === false) return elements } return elements }

先来看看调用方式：$.each(collection, function(index, item){ ... })

$.each 接收两个参数，第一个参数 elements 为需要遍历的数组或者对象，第二个 callback 为回调函数。

如果 elements 为数组，用 for 循环，调用 callback ，并且将数组索引 index 和元素值 item 传给回调函数作为参数；如果为对象，用 for···in 遍历属性值，并且将属性 key 及属性值传给回调函数作为参数。

注意回调函数调用了 call 方法，call 的第一个参数为当前元素值或当前属性值，所以回调函数的上下文变成了当前元素值或属性值，也就是说回调函数中的 this 指向的是 item 。这在dom集合的遍历中相当有用。

在遍历的时候，还对回调函数的返回值进行判断，如果回调函数返回 false （if (callback.call(elements[i], i, elements[i]) === false)） ，立即中断遍历。

$.each 调用结束后，会将遍历的数组或对象（ elements ）返回。

$.map

可以遍历数组（类数组）或对象中的元素，根据回调函数的返回值，将返回值组成一个新的数组，并将该数组扁平化后返回，会将 null 及 undefined 排除。

$.map = function(elements, callback) { var value, values = [], i, key if (likeArray(elements)) for (i = 0; i < elements.length; i++) { value = callback(elements[i], i) if (value != null) values.push(value) } else for (key in elements) { value = callback(elements[key], key) if (value != null) values.push(value) } return flatten(values) }

先来看看调用方式： $.map(collection, function(item, index){ ... })

elements 为类数组或者对象。callback 为回调函数。当为类数组时，用 for 循环，当为对象时，用 for···in 循环。并且将对应的元素（属性值）及索引（属性名）传递给回调函数，如果回调函数的返回值不为 null 或者 undefined ，则将返回值存入新数组中，最后将新数组扁平化后返回。

$.camelCase

该方法是将字符串转换成驼峰式的字符串

$.camelCase = camelize

$.camelCase 调用的是内部方法 camelize ,该方法在前一篇文章《读Zepto源码之内部方法》中已有阐述，本篇文章就不再展开。

$.contains

用来检查给定的父节点中是否包含有给定的子节点，源码如下：

$.contains = document.documentElement.contains ? function(parent, node) { return parent !== node && parent.contains(node) } : function(parent, node) { while (node && (node = node.parentNode)) if (node === parent) return true return false }

先来看看调用：$.contains(parent, node)

参数 parent 为父子点，node 为子节点。

$.contains 的主体是一个三元表达式，返回的是一个匿名函数。三元表达式的条件是 document.documentElement.contains， 用来检测浏览器是否支持 contains 方法，如果支持，则直接调用 contains 方法，并且将 parent 和 node 为同一个元素的情况排除。

否则，返回另一外匿名函数。该函数会一直向上寻找 node 元素的父元素，如果能找到跟 parent 相等的父元素，则返回 true， 否则返回 false

$.grep

该函数其实就是数组的 filter 函数

  $.grep = function(elements, callback) { return filter.call(elements, callback) }

从源码中也可以看出，$.grep 调用的就是数组方法 filter

$.inArray

返回指定元素在数组中的索引值

 $.inArray = function(elem, array, i) { return emptyArray.indexOf.call(array, elem, i) }

先来看看调用 $.inArray(element, array, [fromIndex])

第一个参数 element 为指定的元素，第二个参数为 array 为数组， 第三个参数 fromIndex 为可选参数，表示从哪个索引值开始向后查找。

$.inArray 其实调用的是数组的 indexOf 方法，所以传递的参数跟 indexOf 方法一致。

$.isArray

判断是否为数组

$.isArray = isArray

$.isArray 调用的是内部方法 isArray ，该方法在前一篇文章《读Zepto源码之内部方法》中已有阐述。

$.isFunction

判读是否为函数

$.isFunction = isFunction

$.isFunction 调用的是内部方法 isFunction ，该方法在前一篇文章《读Zepto源码之内部方法》中已有阐述。

$.isNumeric

是否为数值

$.isNumeric = function(val) { var num = Number(val), // 将参数转换为Number类型 type = typeof val return val != null && type != 'boolean' && (type != 'string' || val.length) && !isNaN(num) && isFinite(num) || false }

判断是否为数值，需要满足以下条件

1. 不为 null
2. 不为布尔值
3. 不为NaN(当传进来的参数不为数值或如'123'这样形式的字符串时，都会转换成NaN)
4. 为有限数值
5. 当传进来的参数为字符串的形式，如'123' 时，会用到下面这个条件来确保字符串为数字的形式，而不是如 123abc 这样的形式。(type != 'string' || val.length) && !isNaN(num) 。这个条件的包含逻辑如下：如果为字符串类型，并且为字符串的长度大于零，并且转换成数组后的结果不为NaN，则断定为数值。（因为 Number('') 的值为 0）

$.isPlainObject

是否为纯粹对象，即以 {} 常量或 new Object() 创建的对象

$.isPlainObject = isPlainObject

$.isPlainObject 调用的是内部方法isPlainObject ，该方法在前一篇文章《读Zepto源码之内部方法》中已有阐述。

$.isWindow

是否为浏览器的 window 对象

$.isWindow = isWindow

$.isWindow 调用的是内部方法 isWindow ，该方法在前一篇文章《读Zepto源码之内部方法》中已有阐述。

$.noop

空函数

$.noop = function() {}

这个在需要传递回调函数作为参数，但是又不想在回调函数中做任何事情的时候会非常有用，这时，只需要传递一个空函数即可。

$.parseJSON

将标准JSON格式的字符串解释成JSON

if (window.JSON) $.parseJSON = JSON.parse

其实就是调用原生的 JSON.parse， 并且在浏览器不支持的情况下，zepto 还不提供这个方法。

$.trim

删除字符串头尾的空格

$.trim = function(str) { return str == null ? "" : String.prototype.trim.call(str) }

如果参数为 null 或者 undefined ，则直接返回空字符串，否则调用字符串原生的 trim 方法去除头尾的空格。

$.type

类型检测

$.type = type

$.type 调用的是内部方法 type ，该方法在前一篇文章《读Zepto源码之内部方法》中已有阐述。

能检测的类型有 "Boolean Number String Function Array Date RegExp Object Error"

 

 

 

 

经过前面三章的铺垫，这篇终于写到了戏肉。在用 zepto 时，肯定离不开这个神奇的 $ 符号，这篇文章将会看看 zepto 是如何实现 $ 的。

读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto

源码版本

本文阅读的源码为 zepto1.2.0

zepto的css选择器 zepto.qsa

我们都知道，很多时候，我们都用$ 来获取DOM对象，这跟 zepto.qsa 有很大的关系。

源码

zepto.qsa = function(element, selector) { var found, // 已经找的到DOM maybeID = selector[0] == '#', // 是否为ID maybeClass = !maybeID && selector[0] == '.', // 是否为class nameOnly = maybeID || maybeClass ? selector.slice(1) : selector, // 将id或class前面的符号去掉 isSimple = simpleSelectorRE.test(nameOnly) // 是否为单个选择器 return (element.getElementById && isSimple && maybeID) ? ((found = element.getElementById(nameOnly)) ? [found] : []) : (element.nodeType !== 1 && element.nodeType !== 9 && element.nodeType !== 11) ? [] : slice.call( isSimple && !maybeID && element.getElementsByClassName ? maybeClass ? element.getElementsByClassName(nameOnly) : element.getElementsByTagName(selector) : element.querySelectorAll(selector) ) }

以上是 qsa 的所有代码，里面有用到一个正则表达式 simpleSelectorRE，先将这个正则消化下。

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

看到这个正则其实是匹配 a-z、A-Z、0-9、下划线、连词符 组合起来的单词，这其实就是单个 id 和 class 的命名规则。

从 return 中可以看出，qsa 其实是根据不同情况分别调用了原生的 getElementById、getElementsByClassName、getElementsByTagName 和 querySelectorAll 的方法。

为什么要这么麻烦，不直接调用 querySelectorAll 方法呢？这是出于性能的考虑。这里有个简单的测试。这个测试里，页面上只有一个元素，如果比较复杂的时候，差距更加明显。

好了，开始逐行分析代码。

参数

• element 开始查找的元素
• selector 选择器

变量

• found： 已经找到的元素
• maybeID = selector[0] == '#'： 判断选择器的第一个字符是否为 #， 如果是 # ，则可能是 id 选择器
• maybeClass = !maybeID && selector[0] == '.' 如果不是 id 选择器，并且选择器的第一个字符为 . ，则可能是 class选择器
• nameOnly = maybeID || maybeClass ? selector.slice(1) : selector ，如果为 id 选择器或者 class 选择器，则将第一个字符去掉
• isSimple = simpleSelectorRE.test(nameOnly) 是否为单选择器，即 .single 的形式，不是 .first .secend 等形式

element.getElementById

(element.getElementById && isSimple && maybeID) 这是采用 element.getElementById 的条件。

首先要确保 element 具有 getElementById 的方法。getElementById 的方法是在 document 上的，Chrome等浏览器上，element 可能并不具有 geElementById 的方法，具体可以看看这篇文章：各浏览器对document.getElementById等方法的实现差异解析

然后要确保选择器为单选择器，并且为 id 选择器。

返回值为 ((found = element.getElementById(nameOnly)) ? [found] : [])， 如果能查找到元素，则将元素以数组的形式返回，否则返回空数组

排除不合法的element

element.nodeType !== 1 && element.nodeType !== 9 && element.nodeType !== 11 。1 对应的是 Node.ELEMENT_NODE ，10 对应的是 Node.DOCUMENT_TYPE_NODE ， 11 对应的是 Node.DOCUMENT_FRAGMENT_NODE ，如果不为以上三种类型，直接返回 []。

终极三元表达式

slice.call( isSimple && !maybeID && element.getElementsByClassName ? // 如果为单选择器并且不为id选择器并且存在getElementsByClassName方法，进入下一个三元表达式判断 maybeClass ? element.getElementsByClassName(nameOnly) : // 如果为class选择器，则采用getElementsByClassName element.getElementsByTagName(selector) : // 否则采用getElementsByTagName方法 element.querySelectorAll(selector) // 以上情况都不是，则用querySelectorAll )

这里用了 slice.call 处理所获取到的集合，这样，获取到的DOM集合就可以直接使用数组的方法了。

zepto.Z 函数

从第一篇代码结构中我们已经知道，其实实现 $ 函数的核心是 zepto.init ，而 zepto.init 最终返回的是 zepto.Z 的结果。那就先来看看 zepto.Z

zepto.Z = function(dom, selector) { return new Z(dom, selector) }

zepto.Z 的代码很简单，返回的是 Z 函数的实例。那接下来再看看 Z 函数：

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 || '' }

Z 函数做的事情也很简单，就是将 dom 数组转化为类数组的形式，并设置对应的 length 属性和 selector 属性。

zepto.isZ

zepto.isZ = function(object) { return object instanceof zepto.Z }

既然看了 Z 函数，就顺便也将 isZ 也一起看了吧。isZ 函数用来判断参数 object 是否为 Z 的实例，这在 init 中会用到。

$的实现 zepto.init 函数

$的实现

$ = function(selector, context) { return zepto.init(selector, context) }

可以看到，其实 $ 调用的就是 zepto.init 这个内部方法。

zepto.init

zepto.init = function(selector, context) { var dom // dom 集合 if (!selector) return zepto.Z() // 分支1 else if (typeof selector == 'string') { // 分支2 selector = selector.trim() if (selector[0] == '<' && fragmentRE.test(selector)) dom = zepto.fragment(selector, RegExp.$1, context), selector = null else if (context !== undefined) return $(context).find(selector) else dom = zepto.qsa(document, selector) } else if (isFunction(selector)) return $(document).ready(selector) // 分支3 else if (zepto.isZ(selector)) return selector // 分支4 else { // 分支5 if (isArray(selector)) dom = compact(selector) else if (isObject(selector)) dom = [selector], selector = null 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) } return zepto.Z(dom, selector) }

这个 init 方法代码量不多，但是有大量的 if else， 希望我可以说得清楚

$的用法

$(selector, [context])   ⇒ collection  // 用法1 $(<Zepto collection>) ⇒ same collection // 用法2 $(<DOM nodes>) ⇒ collection // 用法3 $(htmlString) ⇒ collection // 用法4 $(htmlString, attributes) ⇒ collection v1.0+ // 用法5 Zepto(function($){ ... }) // 用法6

不传参调用

直接调用 $() 时，对应的是分支1的情况： if (!selector) return zepto.Z() ，返回的是空的 Z 对象

selector 为 String 时

当 selector 为 string 时，对应的代码在分支2，对应的用法是用法1、用法4和用法5

在这个分支里，又有三个子分支。一一来看一下：

第一个的判断条件为 selector[0] == '<' && fragmentRE.test(selector) 。selector 的第一个字符为 < ，并且为html标签 。fragmentRE 的定义如下 fragmentRE = /^\s*<(\w+|!)[^>]*>/ ，这个其实就是用来判断字符串是否为标签。 我对正则也不太熟，这里就不再展开。

如果满足条件，则执行如下代码：dom = zepto.fragment(selector, RegExp.$1, context), selector = null。 zepto.fragment其实是通过 htmlString 返回一个dom集合。这个函数稍后会说到，这里先不展开。这里对应的是用法4和用法5。

如果不满足第一个判断条件，则再判断 context !== undefined (上下文是否存在)。如果存在，则查找 context 下选择器为 selector 的所有子元素: $(context).find(selector) 。这个分支对应的是用法1

否则，调用 zepto.qsa 方法，查找 document 下的所有 selector ： dom = zepto.qsa(document, selector)。这里对应的是用法1。

selector 为 Function 时

对应的代码在分支3，对应的用法是用法6

这个分支很简单，在页面加载完毕后，再执行回调方法：$(document).ready(selector)

用过 zepto 的应该都熟悉这种用法: $(function() {})。其实走的就是这个分支

selector 为 Z 对象时

对应的代码在分支4，对应的用法是用法2

如果参数已经为 Z 对象（zepto.isZ(selector)），则不需要做任何事情，直接原对象返回就可以了。

selector 为其他情况

如果为数组时（isArray(selector)）, 将数组展平(dom = compact(selector))

如果为对象时（isObject(selector)），将对象包裹成数组（dom = [selector]）。

以上两种情况对应的是用法3，将dom对象或dom集合转化为 z 对象

如果为标签（fragmentRE.test(selector)），执行跟分支1一模一样的代码。这里判断在上面已经做过了，为什么要再来一次呢？我也不太明白，有明白的可以跟我说下。

经过一轮又一轮的判断和 selector 重置，现在终于可以调用 z 函数了: zepto.Z(dom, selector) ，init 的最后，将收集到的 dom 集合和对应的 selector 传入 Z 函数，返回 Z 对象。

zepto.fragment

zepto.fragment = function(html, name, properties) { var dom, nodes, container if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1)) if (!dom) { if (html.replace) html = html.replace(tagExpanderRE, "<$1></$2>") if (name === undefined) name = fragmentRE.test(html) && RegExp.$1 if (!(name in containers)) name = '*' container = containers[name] container.innerHTML = '' + html dom = $.each(slice.call(container.childNodes), function() { container.removeChild(this) }) } if (isPlainObject(properties)) { nodes = $(dom) $.each(properties, function(key, value) { if (methodAttributes.indexOf(key) > -1) nodes[key](value) else nodes.attr(key, value) }) } return dom }

fragment 的作用的是将html片断转换成dom数组形式。

首先判断是否为标签的形式 singleTagRE.test(html) （如<div></div>）, 如果是，则采用该标签名来创建dom对象 dom = $(document.createElement(RegExp.$1))，不用再作其他处理。singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/。

如果尚未获取到 dom，接着进行：

if (html.replace) html = html.replace(tagExpanderRE, "<$1></$2>")

这段是对 html 进行修复，如<p class="test" /> 修复成 <p class="test" /></p> 。正则表达式为 tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig

if (name === undefined) name = fragmentRE.test(html) && RegExp.$1

如果没有指定标签名，则获取标签名。如传入 <div>test</div> ，获取到的 name 为 div

if (!(name in containers)) name = '*' container = containers[name] container.innerHTML = '' + html dom = $.each(slice.call(container.childNodes), function() { container.removeChild(this) }) } // containers 已经开头定义，如下 table = document.createElement('table'), tableRow = document.createElement('tr'), containers = { 'tr': document.createElement('tbody'), 'tbody': table, 'thead': table, 'tfoot': table, 'td': tableRow, 'th': tableRow, '*': document.createElement('div') }

检测 name 是否为特殊的元素，如 tr 要用 tbody 包裹，其他的元素用 div 包裹。包裹元素的 childNodes 即为所需要获取的 dom 。

if (isPlainObject(properties)) { nodes = $(dom) $.each(properties, function(key, value) { if (methodAttributes.indexOf(key) > -1) nodes[key](value) else nodes.attr(key, value) }) } // methodAttributes 在上面已经定义，定义如下 methodAttributes = ['val', 'css', 'html', 'text', 'data', 'width', 'height', 'offset']

如果属性值为纯对象，则给元素设置属性。

如果所需设置的属性，zepto已经定义了相应的方法，则调用zepto对应的方法，否则统一调用zepto的attr 方法设置属性。

最后将 dom 返回

 

 

 

 

接下来几个篇章，都会解读 zepto 中的跟 dom 相关的方法，也即源码 $.fn 对象中的方法。

读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto

.forEach()

forEach: emptyArray.forEach

因为 zepto 的 dom 集合是类数组，所以这里只是简单地复制了数组的 forEach 方法。

具体的 forEach 的用法见文档:Array.prototype.forEach()

.reduce()

reduce: emptyArray.reduce

简单地复制了数组的 reduce 方法。

具体的 reduce 的用法见文档:Array.prototype.reduce()

.push()

push: emptyArray.push

简单地复制了数组的 push 方法。

具体的 push 的用法见文档:Array.prototype.push()

.sort()

sort: emptyArray.sort

简单地复制了数组的 sort 方法。

具体的 sort 的用法见文档:Array.prototype.sort()

.splice()

splice: emptyArray.splice

简单地复制了数组的 splice 方法。

具体的 splice 的用法见文档:Array.prototype.splice()

.indexOf()

indexOf: emptyArray.indexOf

简单地复制了数组的 indexOf 方法。

具体的 indexOf 的用法见文档:Array.prototype.indexOf()

.get()

get: function(idx) { return idx === undefined ? slice.call(this) : this[idx >= 0 ? idx : idx + this.length] },

这个方法用来获取指定索引值的元素。

不传参（idx === undefined）时，不传参调用数组的 slice 方法，将集合中的所有元素返回。

当传递的参数大于或等于零（idx）时，返回相应索引值的元素 this[idx] ，如果为负数，则倒数返回this.[idx + this.length]。

例如 $('li').get(-1) 返回的是倒数第1个元素，也即最后一个元素

.toArray()

toArray: function() { return this.get() }

toArray 方法是将元素的类数组变成纯数组。toArray 内部不传参调用 get 方法，上面已经分析了，当不传参数时，get 方法调用的是数组方法 slice， 返回的自然就是纯数组了。

.size()

size: function() { return this.length }

size 方法返回的是集合中的 length 属性，也即集合中元素的个数。

.concat()

concat: function() { var i, value, args = [] for (i = 0; i < arguments.length; i++) { value = arguments[i] args[i] = zepto.isZ(value) ? value.toArray() : value } return concat.apply(zepto.isZ(this) ? this.toArray() : this, args) },

数组中也有对应的 concat 方法，为什么不能像上面的方法那样直接调用呢？

这是因为 $.fn 其实是一个类数组对象，并不是真正的数组，如果直接调用 concat 会直接把整个 $.fn 当成数组的一个 item 合并到数组中。

for (i = 0; i < arguments.length; i++) { value = arguments[i] args[i] = zepto.isZ(value) ? value.toArray() : value }

这段是对每个参数进行判断，如果参数是 zepto 的集合（zepto.isZ(value)），就先调用 toArray 方法，转换成纯数组。

return concat.apply(zepto.isZ(this) ? this.toArray() : this, args)

这段同样对 this 进行了判断，如果为 zepto 集合，也先转换成数组。所以调用 concat 后返回的是纯数组，不再是 zepto集合。

.map()

map: function(fn) { return $($.map(this, function(el, i) { return fn.call(el, i, el) })) }

map 方法的内部调用的是 zepto 的工具函数 $.map ，这在之前已经在《读Zepto源码之工具函数》做过了分析。

return fn.call(el, i, el)

map 方法对回调也做了包装，call 的第一个参数为 el ，因此可以在 map 的回调中通过 this 来拿到每个元素。

map 方法对 $.map 返回的数组调用了 $() 方法，将返回的数组再次包装成 zepto 对象，因此调用 map 方法后得到的数组，同样具有 zepto 集合中的方法。

.slice()

slice: function() { return $(slice.apply(this, arguments)) }

slice 同样没有直接用数组的原生方法，也像 map 方法一样，将返回的数组再次包装成 zepto 对象。

.each()

each: function(callback) { emptyArray.every.call(this, function(el, idx) { return callback.call(el, idx, el) !== false }) return this },

zepto 的 each 方法比较巧妙，在方法内部，调用的其实是数组的 every 方法，every 遇到 false 时就会中止遍历，zepto也正是利用 every 这种特性，让 each 方法也具有了中止遍历的能力，当 callback 返回的值为布尔值 false 时，中止遍历，注意这里用了 !==，因为 callback 如果没有返回值时，得到的值会是 undefined ，这种情况是需要排除的。

同样，each 的回调中也是可以用 this 拿到每个元素的。

注意，each 方法最后返回的是 this， 所以在 each 调用完后，还可以继续调用 集合中的其他方法，这就是 zepto 的链式调用，这个跟 map 方法中返回 zepto 集合的原理差不多，只不过 each 返回的是跟原来一样的集合，map 方法返回的是映射后的集合。

.add()

add: function(selector, context) { return $(uniq(this.concat($(selector, context)))) }

add 可以传递两个参数，selector 和 context ，即选择器和上下文。

add 调用 $(selector, context) 来获取符合条件的集合元素，这在上篇文章《读Zepto源码之神奇的$》已经有详细的论述。

然后调用 concat 方法来合并两个集合，用内部方法 uniq 来过滤掉重复的项，uniq 方法在《读Zepto源码之内部方法》已经有论述。最后也是返回一个 zepto 集合。