讀 Zepto 源碼之內部方法
數組方法
定義
var emptyArray = []
concat = emptyArray.concat
filter = emptyArray.filter
slice = emptyArray.slicezepto 一開始就定義了一個空數組 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是否存在。
系列文章
- 讀Zepto源碼之代碼結構
參考
- MDN文檔：Array.isArray()
- MDN文檔：Function.prototype.apply()
- MDN文檔：Node.nodeType
- undefined與null的區別
- zepto源碼--compact、flatten、camelize、dasherize、uniq--學習筆記
讀 Zepto 源碼之內部方法