這些Zepto中實用的方法集

謙龍發表於2017-08-26

前言

時間過得可真快，轉眼間2017年已去大半有餘，你就說嚇不嚇人，這一年你成長了多少，是否荒度了很多時光，亦或者天天向上，收穫滿滿。今天主要寫一些看Zepto基礎模組時，比較實用的部分內部方法，在我們日常工作或者學習中也會用的到。

原始碼倉庫
原文連結

1. 將陣列鋪平(flatten)

面試或者工作中經常遇到要將多維陣列鋪平成一維陣列。例如將[1, 2, [3], [4], [5]]最後變成[1, 2, 3, 4, 5]

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

這裡先將$.fn.concat理解成原生陣列的concat方法,我們會發現，其實他只能鋪平一層。例如

[1, 2, [3], [4, [5]]] => [1, 2, 3, 4, [5]]複製程式碼

那怎樣才能將多層巢狀的陣列完全鋪平為一層呢？這裡介紹兩種方式。

方式1


let flatten = (array) => {
  return array.reduce((result, val) => {
    return result.concat(Array.isArray(val) ? flatten(val) : val)
  }, [])
}複製程式碼

測試

let testArr1 = [1, 2, 3, 4]
let testArr2 = [1, [2], 3, [4, [5, [6, [7]]]]]

console.log(flatten(testArr1)) // => [1, 2, 3, 4]
console.log(flatten(testArr2)) // => [1, 2, 3, 4, 5, 6, 7]複製程式碼

方式2


let flatten = (array) => {
  let result = []
  let idx = 0

  array.forEach((val, i) => {
    if (Array.isArray(val)) {
      let value = flatten(val)
      let len = value.length
      let j = 0
      result.length += len

      while ( j < len) {
        result[idx++] = value[j++]
      }
    } else {
      result[idx++] = val
    }
  })

  return result
}複製程式碼

同樣和上面得到的結果一致

2. 陣列去重(uniq)

陣列去重可謂是老生常談的話題了，方式有非常多。好久之前寫過一篇關於去重的文章,歡迎檢視。

let uniq = function (array) {
  return filter.call(array, function (item, idx) {
    return array.indexOf(item) == idx
  })
}複製程式碼

結合陣列的filter方法，檢視陣列的某項出現的索引是不是與idx相等，不相等，肯定出現過2次以上，即將其過濾掉。其實結合es6中的Set資料結構，可以很方便的做到陣列去重。

let uniq = (array) => {
  return  [...new Set(array)]
}複製程式碼

測試


let testArr = [1, 1, 2, 3, 0, -1, -1]
console.log(uniq(testArr)) // => [1, 2, 3, 0, -1]複製程式碼

3. 連字元轉駝峰（camelize）

這個方法挺實用的，可以將a-b-c這種形式轉換成aBC,當然下劃線的數量可以是多個，a---b-----c => aBC


let camelize = function (str) {
  return str.replace(/-+(.)?/g, function (match, chr) {
    return chr ? chr.toUpperCase() : ''
  })
}複製程式碼

4. 判斷是否為document物件(isDocument)。

通過dom元素的nodeType屬性可以知道其屬於哪種元素型別。結合下面這張表(developer.mozilla.org/en-US/docs/…)，其實不僅僅可以寫出判斷是否為document物件，還可以判斷是否為元素物件等。


function isDocument (obj) {
  return obj != null && obj.nodeType == obj.DOCUMENT_NODE
}複製程式碼

5. 判斷obj是否為類陣列(likeArray)

什麼是類陣列物件呢？

類陣列物件：

  1. 含有指向物件元素的數字索引下標以及length屬性標誌屬性的個數
  2. 不含有陣列的push、concat等方法

常見的類陣列物件有auguments,document.getElementsByClassName等api獲取的dom集合，符合上述條件的物件等。


function likeArray(obj) {
  // !!obj 直接過濾掉了false，null，undefined，''等值
  // 然後obj必須包含length屬性
  var length = !!obj && 'length' in obj && obj.length,
  // 獲取obj的資料型別
    type = $.type(obj)
  // 不能是function型別，不能是window
  // 如果是array則直接返回true
  // 或者當length的資料型別是number，並且其取值範圍是0到(length - 1)這裡是通過判斷length - 1 是否為obj的屬性
  return 'function' != type && !isWindow(obj) && (
    'array' == type || length === 0 ||
    (typeof length == 'number' && length > 0 && (length - 1) in obj)
  )
}複製程式碼

程式碼上了註釋，主要我們來對比一下underscore中是如何判斷是否為類陣列的。

var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
var getLength = property('length');
var isArrayLike = function(collection) {
  var length = getLength(collection);
  return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
};複製程式碼

underscore中判斷類陣列比較寬鬆一些，MAX_ARRAY_INDEX是JavaScript 中能精確表示的最大數字，主要判斷物件的length屬性是否為數字型別，並且是否大於0且在MAX_ARRAY_INDEX範圍內。

zepto中類陣列判斷就比較嚴格了，因為window和函式其實都有length屬性，這裡把他們給過濾掉了。

6. 判斷是否為window物件

window物件的window屬性指向其本身，我們來直接看下mdn上的解釋。


function isWindow (obj) {
  return obj != null && obj == obj.window
}複製程式碼

但實際上下面的程式碼也會被認為是window物件。

let a = {}
a.window = a

a === a.window // true
isWindow(a) // true複製程式碼

7. 判斷資料型別

利用Object.prototype.toString方法來做資料型別的判斷。

let class2type = {}
let 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()
})複製程式碼

最後class2type會變成

class2type = {
  "[object Boolean]": "boolean",
  "[object Array]": "array",
  "[object Number]": "number"
  ...
}複製程式碼

接著就是type函式的定義了


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

首先如果傳入的obj是null或者undefined，則用String函式返貨null或者undefined,而toString.call(obj)返回的正是形如[object Array],所以再結合上面的class2type變數，正好就可以得到例如。

type([]) => array
type(1) => number複製程式碼

8. 判斷是夠為純粹的物件（isPlainObject）

有時候我們想要符合這樣條件的物件。但是js中沒有直接給到能夠判斷是否為純粹的物件的方法。

// 物件字面量形式
let obj = {
  name: 'qianlongo'
}
// 通過Object建構函式建立
let person = new Object({
  name: 'qianlongo',
  sex: 'boy'
})複製程式碼

zepto中是如何判斷的呢？

// 判斷obj是否為純粹的物件，必須滿足
// 首先必須是物件  --- isObject(obj)
// 不是window物件 --- !isWindow(obj)
// 並且原型要和 Object 的原型相等

function isPlainObject(obj) {
  return isObject(obj) && !isWindow(obj) && Object.getPrototypeOf(obj) == Object.prototype
}複製程式碼

Object.getPrototypeOf() 方法返回指定物件的原型（即, 內部[[Prototype]]屬性的值）,如果沒有繼承屬性，則返回 null 。

9. 判斷是否為空物件(isEmptyObject)

// 判斷是否為空物件
// 使用for in遍歷，只要obj有屬性則認為不是空物件

$.isEmptyObject = function (obj) {
  var name
  for (name in obj) return false
  return true
}複製程式碼

主要是通過走一遍for迴圈，來確定，所以會將以下資料也認為是空物件。

  1. null
  2. undefined
  3. []
  4. ''
  5. 1024(數字)
  6. true or false
  7. {}
  8. new Person() // 自定義的建構函式

所以這裡判斷空物件的初衷到底是不是隻為了判斷形如{},new Object()呢

結尾

暫時就更新這些，後續在閱讀原始碼的過程中會陸續補充

參考資料

讀Zepto原始碼之內部方法

jQuery.isPlainObject

對jQuery.isPlainObject()的理解

Object.getPrototypeOf()

文章記錄

  1. 原來你是這樣的jsonp(原理與具體實現細節)

  2. 誰說你只是"會用"jQuery?

  3. 向zepto.js學習如何手動觸發DOM事件

  4. mouseenter與mouseover為何這般糾纏不清？

相關文章