读 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 时为浅复制。

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"

系列文章

1. 读Zepto源码之代码结构
2. 读 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 其实就是将其看做为空数组。

最后一种状况必需要知足三个条件：

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