摘要：在遍歷的時(shí)候，還對(duì)回調(diào)函數(shù)的返回值進(jìn)行判斷，如果回調(diào)函數(shù)返回，立即中斷遍歷。可以遍歷數(shù)組類(lèi)數(shù)組或?qū)ο笾械脑兀鶕?jù)回調(diào)函數(shù)的返回值，將返回值組成一個(gè)新的數(shù)組，并將該數(shù)組扁平化后返回，會(huì)將及排除。

Zepto 提供了豐富的工具函數(shù)，下面來(lái)一一解讀。

本文閱讀的源碼為 zepto1.2.0

$.extend 方法可以用來(lái)擴(kuò)展目標(biāo)對(duì)象的屬性。目標(biāo)對(duì)象的同名屬性會(huì)被源對(duì)象的屬性覆蓋。

$.extend 其實(shí)調(diào)用的是內(nèi)部方法 extend， 所以我們先看看內(nèi)部方法 extend 的具體實(shí)現(xiàn)。

function extend(target, source, deep) {
        for (key in source)  // 遍歷源對(duì)象的屬性值
            if (deep && (isPlainObject(source[key]) || isArray(source[key]))) { // 如果為深度復(fù)制，并且源對(duì)象的屬性值為純粹對(duì)象或者數(shù)組
                if (isPlainObject(source[key]) && !isPlainObject(target[key])) // 如果為純粹對(duì)象
                    target[key] = {}  // 如果源對(duì)象的屬性值為純粹對(duì)象，并且目標(biāo)對(duì)象對(duì)應(yīng)的屬性值不為純粹對(duì)象，則將目標(biāo)對(duì)象對(duì)應(yīng)的屬性值置為空對(duì)象
                if (isArray(source[key]) && !isArray(target[key])) // 如果源對(duì)象的屬性值為數(shù)組，并且目標(biāo)對(duì)象對(duì)應(yīng)的屬性值不為數(shù)組，則將目標(biāo)對(duì)象對(duì)應(yīng)的屬性值置為空數(shù)組
                    target[key] = []
                extend(target[key], source[key], deep) // 遞歸調(diào)用extend函數(shù)
            } else if (source[key] !== undefined) target[key] = source[key]  // 不對(duì)undefined值進(jìn)行復(fù)制
    }

extend 的第一個(gè)參數(shù) taget 為目標(biāo)對(duì)象， source 為源對(duì)象， deep 表示是否為深度復(fù)制。當(dāng) deep 為 true 時(shí)為深度復(fù)制， false 時(shí)為淺復(fù)制。

extend 函數(shù)用 for···in 對(duì) source 的屬性進(jìn)行遍歷

如果 deep 為 false 時(shí)，只進(jìn)行淺復(fù)制，將 source 中不為 undefined 的值賦值到 target 對(duì)應(yīng)的屬性中（注意，這里用的是 !==，不是 != ，所以只排除嚴(yán)格為 undefined 的值，不包含 null ）。如果 source 對(duì)應(yīng)的屬性值為對(duì)象或者數(shù)組，會(huì)保持該對(duì)象或數(shù)組的引用。

如果 deep 為 true ，并且 source 的屬性值為純粹對(duì)象或者數(shù)組時(shí)

3.1. 如果 source 的屬性為純粹對(duì)象，并且 target 對(duì)應(yīng)的屬性不為純粹對(duì)象時(shí)，將 target 的對(duì)應(yīng)屬性設(shè)置為空對(duì)象

3.2. 如果 source 的屬性為數(shù)組，并且 target 對(duì)應(yīng)屬性不為數(shù)組時(shí)，將 target 的對(duì)應(yīng)屬性設(shè)置為空數(shù)組

3.3. 將 source 和 target 對(duì)應(yīng)的屬性及 deep 作為參數(shù)，遞歸調(diào)用 extend 函數(shù)，以實(shí)現(xiàn)深度復(fù)制。

現(xiàn)在，再看看 $.extend 的具體實(shí)現(xiàn)

$.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
    }

在說(shuō)原理之前，先來(lái)看看 $.extend 的調(diào)用方式，調(diào)用方式如下：

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

在 $.extend 中，如果不需要深度復(fù)制，第一個(gè)參數(shù)可以是目標(biāo)對(duì)象 target, 后面可以有多個(gè) source 源對(duì)象。如果需要深度復(fù)制，第一個(gè)參數(shù)為 deep ，第二個(gè)參數(shù)為 target ，為目標(biāo)對(duì)象，后面可以有多個(gè) source 源對(duì)象。

$.extend 函數(shù)的參數(shù)設(shè)計(jì)得很優(yōu)雅，不需要深度復(fù)制時(shí)，可以不用顯式地將 deep 置為 false。這是如何做到的呢？

在 $.extend 函數(shù)中，定義了一個(gè)數(shù)組 args，用來(lái)接受除第一個(gè)參數(shù)外的所有參數(shù)。

然后判斷第一個(gè)參數(shù) target 是否為布爾值，如果為布爾值，表示第一個(gè)參數(shù)為 deep ，那么第二個(gè)才為目標(biāo)對(duì)象，因此需要重新為 target 賦值為 args.shift() 。

最后就比較簡(jiǎn)單了，循環(huán)源對(duì)象數(shù)組 args， 分別調(diào)用 extend 方法，實(shí)現(xiàn)對(duì)目標(biāo)對(duì)象的擴(kuò)展。

$.each 用來(lái)遍歷數(shù)組或者對(duì)象，源碼如下：

$.each = function(elements, callback) {
        var i, key
        if (likeArray(elements)) {  // 類(lèi)數(shù)組
            for (i = 0; i < elements.length; i++)
                if (callback.call(elements[i], i, elements[i]) === false) return elements
        } else { // 對(duì)象
            for (key in elements)
                if (callback.call(elements[key], key, elements[key]) === false) return elements
        }

        return elements
    }

先來(lái)看看調(diào)用方式：$.each(collection, function(index, item){ ... })

$.each 接收兩個(gè)參數(shù)，第一個(gè)參數(shù) elements 為需要遍歷的數(shù)組或者對(duì)象，第二個(gè) callback 為回調(diào)函數(shù)。

如果 elements 為數(shù)組，用 for 循環(huán)，調(diào)用 callback ，并且將數(shù)組索引 index 和元素值 item 傳給回調(diào)函數(shù)作為參數(shù)；如果為對(duì)象，用 for···in 遍歷屬性值，并且將屬性 key 及屬性值傳給回調(diào)函數(shù)作為參數(shù)。

注意回調(diào)函數(shù)調(diào)用了 call 方法，call 的第一個(gè)參數(shù)為當(dāng)前元素值或當(dāng)前屬性值，所以回調(diào)函數(shù)的上下文變成了當(dāng)前元素值或?qū)傩灾担簿褪钦f(shuō)回調(diào)函數(shù)中的 this 指向的是 item 。這在dom集合的遍歷中相當(dāng)有用。

在遍歷的時(shí)候，還對(duì)回調(diào)函數(shù)的返回值進(jìn)行判斷，如果回調(diào)函數(shù)返回 false （if (callback.call(elements[i], i, elements[i]) === false) ） ，立即中斷遍歷。

$.each 調(diào)用結(jié)束后，會(huì)將遍歷的數(shù)組或?qū)ο螅?elements ）返回。

可以遍歷數(shù)組（類(lèi)數(shù)組）或?qū)ο笾械脑兀鶕?jù)回調(diào)函數(shù)的返回值，將返回值組成一個(gè)新的數(shù)組，并將該數(shù)組扁平化后返回，會(huì)將 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)
    }

先來(lái)看看調(diào)用方式： $.map(collection, function(item, index){ ... })

elements 為類(lèi)數(shù)組或者對(duì)象。callback 為回調(diào)函數(shù)。當(dāng)為類(lèi)數(shù)組時(shí)，用 for 循環(huán)，當(dāng)為對(duì)象時(shí)，用 for···in 循環(huán)。并且將對(duì)應(yīng)的元素（屬性值）及索引（屬性名）傳遞給回調(diào)函數(shù)，如果回調(diào)函數(shù)的返回值不為 null 或者 undefined ，則將返回值存入新數(shù)組中，最后將新數(shù)組扁平化后返回。

該方法是將字符串轉(zhuǎn)換成駝峰式的字符串

$.camelCase = camelize

$.camelCase 調(diào)用的是內(nèi)部方法 camelize ,該方法在前一篇文章《讀Zepto源碼之內(nèi)部方法》中已有闡述，本篇文章就不再展開(kāi)。

用來(lái)檢查給定的父節(jié)點(diǎn)中是否包含有給定的子節(jié)點(diǎn)，源碼如下：

$.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
        }

先來(lái)看看調(diào)用：$.contains(parent, node)

參數(shù) parent 為父子點(diǎn)，node 為子節(jié)點(diǎn)。

$.contains 的主體是一個(gè)三元表達(dá)式，返回的是一個(gè)匿名函數(shù)。三元表達(dá)式的條件是 document.documentElement.contains， 用來(lái)檢測(cè)瀏覽器是否支持 contains 方法，如果支持，則直接調(diào)用 contains 方法，并且將 parent 和 node 為同一個(gè)元素的情況排除。

否則，返回另一外匿名函數(shù)。該函數(shù)會(huì)一直向上尋找 node 元素的父元素，如果能找到跟 parent 相等的父元素，則返回 true， 否則返回 false

該函數(shù)其實(shí)就是數(shù)組的 filter 函數(shù)

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

從源碼中也可以看出，$.grep 調(diào)用的就是數(shù)組方法 filter

返回指定元素在數(shù)組中的索引值

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

先來(lái)看看調(diào)用 $.inArray(element, array, [fromIndex])

第一個(gè)參數(shù) element 為指定的元素，第二個(gè)參數(shù)為 array 為數(shù)組， 第三個(gè)參數(shù) fromIndex 為可選參數(shù)，表示從哪個(gè)索引值開(kāi)始向后查找。

$.inArray 其實(shí)調(diào)用的是數(shù)組的 indexOf 方法，所以傳遞的參數(shù)跟 indexOf 方法一致。

判斷是否為數(shù)組

$.isArray = isArray

$.isArray 調(diào)用的是內(nèi)部方法 isArray ，該方法在前一篇文章《讀Zepto源碼之內(nèi)部方法》中已有闡述。

判讀是否為函數(shù)

$.isFunction = isFunction

$.isFunction 調(diào)用的是內(nèi)部方法 isFunction ，該方法在前一篇文章《讀Zepto源碼之內(nèi)部方法》中已有闡述。

是否為數(shù)值

$.isNumeric = function(val) {
        var num = Number(val), // 將參數(shù)轉(zhuǎn)換為Number類(lèi)型
            type = typeof val
        return val != null && 
          type != "boolean" &&
            (type != "string" || val.length) &&
          !isNaN(num) &&
          isFinite(num) 
          || false
    }

判斷是否為數(shù)值，需要滿足以下條件

不為 null

不為布爾值

不為NaN(當(dāng)傳進(jìn)來(lái)的參數(shù)不為數(shù)值或如"123"這樣形式的字符串時(shí)，都會(huì)轉(zhuǎn)換成NaN)

為有限數(shù)值

當(dāng)傳進(jìn)來(lái)的參數(shù)為字符串的形式，如"123" 時(shí)，會(huì)用到下面這個(gè)條件來(lái)確保字符串為數(shù)字的形式，而不是如 123abc 這樣的形式。(type != "string" || val.length) && !isNaN(num) 。這個(gè)條件的包含邏輯如下：如果為字符串類(lèi)型，并且為字符串的長(zhǎng)度大于零，并且轉(zhuǎn)換成數(shù)組后的結(jié)果不為NaN，則斷定為數(shù)值。（因?yàn)?Number("") 的值為 0）

是否為純粹對(duì)象，即以 {} 常量或 new Object() 創(chuàng)建的對(duì)象

$.isPlainObject = isPlainObject

$.isPlainObject 調(diào)用的是內(nèi)部方法 isPlainObject ，該方法在前一篇文章《讀Zepto源碼之內(nèi)部方法》中已有闡述。

是否為瀏覽器的 window 對(duì)象

$.isWindow = isWindow

$.isWindow 調(diào)用的是內(nèi)部方法 isWindow ，該方法在前一篇文章《讀Zepto源碼之內(nèi)部方法》中已有闡述。

空函數(shù)

$.noop = function() {}

這個(gè)在需要傳遞回調(diào)函數(shù)作為參數(shù)，但是又不想在回調(diào)函數(shù)中做任何事情的時(shí)候會(huì)非常有用，這時(shí)，只需要傳遞一個(gè)空函數(shù)即可。

將標(biāo)準(zhǔn)JSON格式的字符串解釋成JSON

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

其實(shí)就是調(diào)用原生的 JSON.parse， 并且在瀏覽器不支持的情況下，zepto 還不提供這個(gè)方法。

刪除字符串頭尾的空格

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

如果參數(shù)為 null 或者 undefined ，則直接返回空字符串，否則調(diào)用字符串原生的 trim 方法去除頭尾的空格。

類(lèi)型檢測(cè)

$.type = type

$.type 調(diào)用的是內(nèi)部方法 type ，該方法在前一篇文章《讀Zepto源碼之內(nèi)部方法》中已有闡述。

能檢測(cè)的類(lèi)型有 "Boolean Number String Function Array Date RegExp Object Error"

讀Zepto源碼之代碼結(jié)構(gòu)

讀 Zepto 源碼之內(nèi)部方法

Zepto中文文檔

Node.contains()

Array.prototype.indexOf()

String.prototype.trim()

最后，所有文章都會(huì)同步發(fā)送到微信公眾號(hào)上，歡迎關(guān)注,歡迎提意見(jiàn)：

作者：對(duì)角另一面