讀 Zepto 原始碼之內部方法

對角發表於2017-04-12

陣列方法

定義

var emptyArray = []
    concat = emptyArray.concat
    filter = emptyArray.filter
    slice = emptyArray.slice複製程式碼

zepto 一開始就定義了一個空陣列 emptyArray,定義這個空陣列是為了取得陣列的 concatfilterslice 方法

compact

function compact(array) {
  return filter.call(array, function(item) {
    return item != null
  })
}複製程式碼

刪除陣列中的 nullundefined

這裡用的是陣列的 filter 方法,過濾出 item != null 的元素,組成新的陣列。這裡刪除掉 null 很容易理解,為什麼還可以刪除 undefined 呢?這是因為這裡用了 != ,而不是用 !== ,用 != 時, nullundefined 都會先轉換成 false 再進行比較。

關於 nullundefined 推薦看看這篇文章: 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 的。

這裡比較巧妙的是利用了 applyapply 會將 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 ,也就是 nullundefined,返回的是字串 nullundefined

否則呼叫 Object.prototype.toStringtoString = 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 屬性,每個屬性值都有對應的常量。documentnodeType 值為 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 為 arraylength === 0 的認為是類陣列。type 為 array 比較容易理解,length === 0 其實就是將其看作為空陣列。

最後一種情況必須要滿足三個條件:

  1. length 必須為數字
  2. length 必須大於 0 ,表示有元素存在於類陣列中
  3. key length - 1 必須存在於 obj 中。我們都知道,陣列最後的 index 值為 length -1 ,這裡也是檢查最後一個 key 是否存在。

系列文章

  1. 讀Zepto原始碼之程式碼結構

參考

最後,所有文章都會同步傳送到微信公眾號上,歡迎關注,歡迎提意見:

讀 Zepto 原始碼之內部方法

相關文章