讀 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 是否存在。