數(shù)組方法

定義

var emptyArray = []
    concat = emptyArray.concat
    filter = emptyArray.filter
    slice = emptyArray.slice

zepto 一開始就定義了一個(gè)空數(shù)組 emptyArray，定義這個(gè)空數(shù)組是為了取得數(shù)組的 concat、filter、slice 方法

compact

function compact(array) {
  return filter.call(array, function(item) {
    return item != null
  })}

刪除數(shù)組中的 null 和 undefined

這里用的是數(shù)組的 filter 方法，過濾出 item != null 的元素，組成新的數(shù)組。這里刪除掉 null 很容易理解，為什么還可以刪除 undefined 呢？這是因?yàn)檫@里用了 != ，而不是用 !== ，用 != 時(shí)， null 各 undefined 都會(huì)先轉(zhuǎn)換成 false 再進(jìn)行比較。

關(guān)于 null 和 undefined 推薦看看這篇文章： undefined與null的區(qū)別

flatten

function flatten(array) {
  return array.length > 0 ? $.fn.concat.apply([], array) : array}

將數(shù)組扁平化，例如將數(shù)組 [1,[2,3],[4,5],6,[7,[89]] 變成 [1,2,3,4,5,6,7,[8,9]] ,這個(gè)方法只能展開一層，多層嵌套也只能展開一層。

這里，我們先把 $.fn.concat 等價(jià)于數(shù)組的原生方法 concat，后面的章節(jié)也會(huì)分析 $.fn.concat 的。

這里比較巧妙的是利用了 apply ，apply 會(huì)將 array 中的 item 當(dāng)成參數(shù)，concat.apply([], [1,2,3,[4,5]]) 相當(dāng)于 [].concat(1,2,3,[4,5])，這樣數(shù)組就扁平化了。

uniq

uniq = function(array) {
  return filter.call(array, function(item, idx) {
    return array.indexOf(item) == idx  })}

數(shù)組去重。

數(shù)組去重的原理是檢測 item 在數(shù)組中第一次出現(xiàn)的位置是否和 item 所處的位置相等，如果不相等，則證明不是第一次出現(xiàn)，將其過濾掉。

字符串方法

camelize

camelize = function(str) {
  return str.replace(/-+(.)?/g, function(match, chr) {
    return chr ? chr.toUpperCase() : ''
  })}

將 word-word 的形式的字符串轉(zhuǎn)換成 wordWord 的形式， - 可以為一個(gè)或多個(gè)。

正則表達(dá)式匹配了一個(gè)或多個(gè) - ，捕獲組是捕獲 - 號(hào)后的第一個(gè)字母，并將字母變成大寫。

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()  }

將駝峰式的寫法轉(zhuǎn)換成連字符 - 的寫法。

例如 a = A6DExample::Before

第一個(gè)正則表達(dá)式是將字符串中的 :: 替換成 / 。a 變成 A6DExample/Before

第二個(gè)正則是在出現(xiàn)一次或多次大寫字母和出現(xiàn)一次大寫字母和連續(xù)一次或多次小寫字母之間加入 _。a 變成 A6D_Example/Before

第三個(gè)正則是將出現(xiàn)一次小寫字母或數(shù)字和出現(xiàn)一次大寫字母之間加上 _。a 變成A6_D_Example/Before

第四個(gè)正則表達(dá)式是將 _ 替換成 -。a 變成A6-D-Example/Before

最后是將所有的大寫字母轉(zhuǎn)換成小寫字母。a 變成 a6-d-example/before

我對(duì)正則不太熟悉，正則解釋部分參考自:zepto源碼--compact、flatten、camelize、dasherize、uniq--學(xué)習(xí)筆記

數(shù)據(jù)類型檢測

定義

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 函數(shù)后面的文章會(huì)講到，這段代碼是將基本類型掛到 class2type 對(duì)象上。class2type 將會(huì)是如下的形式：

class2type = {
  "[object Boolean]": "boolean",
  "[object Number]": "number"
  ...}

type

function type(obj) {
  return obj == null ? String(obj) :
  class2type[toString.call(obj)] || "object"}

type 函數(shù)返回的是數(shù)據(jù)的類型。

如果 obj == null ，也就是 null 和 undefined，返回的是字符串 null 或 undefined

否則調(diào)用 Object.prototype.toString （toString = class2type.toString）方法，將返回的結(jié)果作為 class2type 的 key 取值。Object.prototype.toString 對(duì)不同的數(shù)據(jù)類型會(huì)返回形如 [object Boolean] 的結(jié)果。

如果都不是以上情況，默認(rèn)返回 object 類型。

isFunction & isObject

function isFunction(value) {
  return type(value) === 'function'}function isObject(obj) {
  return type(obj) == 'object'}

調(diào)用 type 函數(shù)，判斷返回的類型字符串，就知道是什么數(shù)據(jù)類型了

isWindow

function isWindow(obj) {
  return obj != null && obj == obj.window}

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

要為 window 對(duì)象首先要滿足的條件是不能為 null 或者 undefined， 并且 obj.window 為自身的引用。

isDocument

function isDocument(obj) {
  return obj != null && obj.nodeType == obj.DOCUMENT_NODE}

判斷是否為 document 對(duì)象

節(jié)點(diǎn)上有 nodeType 屬性，每個(gè)屬性值都有對(duì)應(yīng)的常量。document 的 nodeType 值為 9 ，常量為 DOCUMENT_NODE。

具體見：MDN文檔：Node.nodeType

isPlainObject

function isPlainObject(obj) {
  return isObject(obj) && !isWindow(obj) && Object.getPrototypeof(obj) == Object.prototype}

判斷是否為純粹的對(duì)象

純粹對(duì)象首先必須是對(duì)象 isObject(obj)

并且不是 window 對(duì)象 !isWindow(obj)

并且原型要和 Object 的原型相等

isArray

isArray = Array.isArray || 
         function(object) { return object instanceof Array}

這個(gè)方法來用判斷是否為數(shù)組類型。

如果瀏覽器支持?jǐn)?shù)組的 isArray 原生方法，就采用原生方法，否則檢測數(shù)據(jù)是否為 Array 的實(shí)例。

我們都知道，instanceof 的檢測的原理是查找實(shí)例的 prototype 是否在構(gòu)造函數(shù)的原型鏈上，如果在，則返回 true。 所以用 instanceof 可能會(huì)得到不太準(zhǔn)確的結(jié)果。例如：

index.html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <script>
        window.onload = function () {
            var fwindow = window.framePage.contentWindow // frame 頁面的window對(duì)象
            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 是在獨(dú)立的環(huán)境中運(yùn)行的，所以 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) // 調(diào)用 type 函數(shù)，返回 obj 的數(shù)據(jù)類型。這里我有點(diǎn)不太明白，為什么要覆蓋掉上面定義的 type 函數(shù)呢？再定義多一個(gè)變量，直接調(diào)用 type 函數(shù)不好嗎？

  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 為數(shù)字，并且 length的值大于零，并且 length - 1 為 obj 的 key
  )}

判斷是否為數(shù)據(jù)是否為類數(shù)組。

類數(shù)組的形式如下：

likeArrayData = {
  '0': 0,
  '1': 1,
  "2": 2
  length: 3}

可以看到，類數(shù)組都有 length 屬性，并且 key 為按0,1,2,3 順序的數(shù)字。

代碼已經(jīng)有注釋了，這里再簡單總結(jié)下

首先將 function類型和 window 對(duì)象排除

再將 type 為 array 和 length === 0 的認(rèn)為是類數(shù)組。type 為 array 比較容易理解，length === 0 其實(shí)就是將其看作為空數(shù)組。

最后一種情況必須要滿足三個(gè)條件：

  1. length 必須為數(shù)字

  2. length 必須大于 0 ，表示有元素存在于類數(shù)組中

  3. key length - 1 必須存在于 obj 中。我們都知道，數(shù)組最后的 index 值為 length -1 ，這里也是檢查最后一個(gè) key 是否存在。

系列文章