讀 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中文文檔
• Node.contains()
• Array.prototype.indexOf()
• String.prototype.trim()

最後，全部文章都會同步發送到微信公衆號上，歡迎關注,歡迎提意見：

做者：對角另外一面