读 zepto 源码之工具函数

对角另一面

读 zepto 源码之工具函数

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

时为浅复制。

extend

函数用

for···in

对

source

的属性进行遍历

如果

deep

为

false

时，只进行浅复制，将

source

中不为

undefined

的值赋值到

target

对应的属性中（注意，这里用的是

!==

，不是

!=

，所以只排除严格为

undefined

的值，不包含

null

）。如果

source

对应的属性值为对象或者数组，会保持该对象或数组的引用。

如果

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
}

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

不为

null

不为布尔值

不为NaN(当传进来的参数不为数值或如

'123'

这样形式的字符串时，都会转换成NaN)

为有限数值

当传进来的参数为字符串的形式，如

'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 源码之内部方法

数组方法

定义

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

其实就是将其看作为空数组。

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

length

必须为数字

length

必须大于

0

，表示有元素存在于类数组中

key

length - 1

必须存在于

obj

中。我们都知道，数组最后的

index

值为

length -1

，这里也是检查最后一个

key

是否存在。