讀Zepto源碼之集合操作

pepperwang 發布于2019-08-20 16:43 / 2479人閱讀

摘要：調用來獲取符合條件的集合元素，這在上篇文章讀源碼之神奇的已經有詳細的論述。然后調用方法來合并兩個集合，用內部方法來過濾掉重復的項，方法在讀源碼之內部方法已經有論述。最后也是返回一個集合。

接下來幾個篇章，都會解讀 zepto 中的跟 dom 相關的方法，也即源碼 $.fn 對象中的方法。

讀Zepto源碼系列文章已經放到了github上，歡迎star: reading-zepto

源碼版本

本文閱讀的源碼為 zepto1.2.0

.forEach()

forEach: emptyArray.forEach

因為 zepto 的 dom 集合是類數組，所以這里只是簡單地復制了數組的 forEach 方法。

具體的 forEach 的用法見文檔:Array.prototype.forEach()

.reduce()

reduce: emptyArray.reduce

簡單地復制了數組的 reduce 方法。

具體的 reduce 的用法見文檔:Array.prototype.reduce()

.push()

push: emptyArray.push

簡單地復制了數組的 push 方法。

具體的 push 的用法見文檔:Array.prototype.push()

.sort()

sort: emptyArray.sort

簡單地復制了數組的 sort 方法。

具體的 sort 的用法見文檔:Array.prototype.sort()

.splice()

splice: emptyArray.splice

簡單地復制了數組的 splice 方法。

具體的 splice 的用法見文檔:Array.prototype.splice()

.indexOf()

indexOf: emptyArray.indexOf

簡單地復制了數組的 indexOf 方法。

具體的 indexOf 的用法見文檔:Array.prototype.indexOf()

.get()

get: function(idx) {
  return idx === undefined ? slice.call(this) : this[idx >= 0 ? idx : idx + this.length]
},

這個方法用來獲取指定索引值的元素。

不傳參（idx === undefined）時，不傳參調用數組的 slice 方法，將集合中的所有元素返回。

當傳遞的參數大于或等于零（idx）時，返回相應索引值的元素 this[idx] ，如果為負數，則倒數返回this.[idx + this.length]。

例如 $("li").get(-1) 返回的是倒數第1個元素，也即最后一個元素

.toArray()

toArray: function() { return this.get() }

toArray 方法是將元素的類數組變成純數組。toArray 內部不傳參調用 get 方法，上面已經分析了，當不傳參數時，get 方法調用的是數組方法 slice，返回的自然就是純數組了。

.size()

size: function() {
  return this.length
}

size 方法返回的是集合中的 length 屬性，也即集合中元素的個數。

.concat()

concat: function() {
  var i, value, args = []
  for (i = 0; i < arguments.length; i++) {
    value = arguments[i]
    args[i] = zepto.isZ(value) ? value.toArray() : value
  }
  return concat.apply(zepto.isZ(this) ? this.toArray() : this, args)
},

數組中也有對應的 concat 方法，為什么不能像上面的方法那樣直接調用呢？

這是因為 $.fn 其實是一個類數組對象，并不是真正的數組，如果直接調用 concat 會直接把整個 $.fn 當成數組的一個 item 合并到數組中。

for (i = 0; i < arguments.length; i++) {
  value = arguments[i]
  args[i] = zepto.isZ(value) ? value.toArray() : value
}

這段是對每個參數進行判斷，如果參數是 zepto 的集合（zepto.isZ(value)），就先調用 toArray 方法，轉換成純數組。

return concat.apply(zepto.isZ(this) ? this.toArray() : this, args)

這段同樣對 this 進行了判斷，如果為 zepto 集合，也先轉換成數組。所以調用 concat 后返回的是純數組，不再是 zepto 集合。

.map()

map: function(fn) {
  return $($.map(this, function(el, i) { return fn.call(el, i, el) }))
}

map 方法的內部調用的是 zepto 的工具函數 $.map ，這在之前已經在《讀Zepto源碼之工具函數》做過了分析。

return fn.call(el, i, el)

map 方法對回調也做了包裝，call 的第一個參數為 el ，因此可以在 map 的回調中通過 this 來拿到每個元素。

map 方法對 $.map 返回的數組調用了 $() 方法，將返回的數組再次包裝成 zepto 對象，因此調用 map 方法后得到的數組，同樣具有 zepto 集合中的方法。

.slice()

slice: function() {
  return $(slice.apply(this, arguments))
}

slice 同樣沒有直接用數組的原生方法，也像 map 方法一樣，將返回的數組再次包裝成 zepto 對象。

.each()

each: function(callback) {
  emptyArray.every.call(this, function(el, idx) {
    return callback.call(el, idx, el) !== false
  })
  return this
},

zepto 的 each 方法比較巧妙，在方法內部，調用的其實是數組的 every 方法，every 遇到 false 時就會中止遍歷，zepto 也正是利用 every 這種特性，讓 each 方法也具有了中止遍歷的能力，當 callback 返回的值為布爾值 false 時，中止遍歷，注意這里用了 !==，因為 callback 如果沒有返回值時，得到的值會是 undefined ，這種情況是需要排除的。

同樣，each 的回調中也是可以用 this 拿到每個元素的。

注意，each 方法最后返回的是 this，所以在 each 調用完后，還可以繼續調用集合中的其他方法，這就是 zepto 的鏈式調用，這個跟 map 方法中返回 zepto 集合的原理差不多，只不過 each 返回的是跟原來一樣的集合，map 方法返回的是映射后的集合。

.add()

add: function(selector, context) {
  return $(uniq(this.concat($(selector, context))))
}

add 可以傳遞兩個參數，selector 和 context ，即選擇器和上下文。

add 調用 $(selector, context) 來獲取符合條件的集合元素，這在上篇文章《讀Zepto源碼之神奇的$》已經有詳細的論述。

然后調用 concat 方法來合并兩個集合，用內部方法 uniq 來過濾掉重復的項，uniq 方法在《讀Zepto源碼之內部方法》已經有論述。最后也是返回一個 zepto 集合。

系列文章

讀Zepto源碼之代碼結構

讀 Zepto 源碼之內部方法

讀Zepto源碼之工具函數

讀Zepto源碼之神奇的$

參考

Array.prototype.forEach()

Array.prototype.reduce()

Array.prototype.push()

Array.prototype.sort()

Array.prototype.splice()

Array.prototype.indexOf()

License

最后，所有文章都會同步發送到微信公眾號上，歡迎關注,歡迎提意見：

作者：對角另一面

GPU云服務器云服務器集合類操作優化讀源碼源碼中文說明之 java集合源碼分析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83117.html

讀Zepto源碼之Stack模塊

摘要：讀源碼系列文章已經放到了上，歡迎源碼版本本文閱讀的源碼為改寫原有的方法模塊改寫了以上這些方法，這些方法在調用的時候，會為返回的結果添加的屬性，用來保存原來的集合。方法的分析可以看讀源碼之模塊。 Stack 模塊為 Zepto 添加了 addSelf 和 end 方法。讀 Zepto 源碼系列文章已經放到了github上，歡迎star: reading-zepto 源碼版本本文閱讀的...

crossea 2019-08-21 17:03 評論0 收藏0
讀 Zepto 源碼之集合元素查找

摘要：方法是將集合中不符合條件的元素查找出來。判斷集合中的第一個元素是否匹配指定的選擇器。這個在讀源碼之集合操作有講過，如果集合個數大于零，則表示滿足條件。返回集合中所有元素指定的屬性值。獲取集合中每個元素的前一個兄弟節點。這篇依然是跟 dom 相關的方法，側重點是跟集合元素查找相關的方法。讀Zepto源碼系列文章已經放到了github上，歡迎star: reading-zepto 源碼...

DC_er 2019-08-20 16:53 評論0 收藏0
讀Zepto源碼之Form模塊

摘要：模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數據，另一部分是觸發事件，提交表單。最終返回的結果是一個數組，每個數組項為包含和屬性的對象。否則手動綁定事件，如果沒有阻止瀏覽器的默認事件，則在第一個表單上觸發，提交表單。 Form 模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數據，另一部分是觸發 submit 事件，提交表單。讀 Zepto 源碼系列文章已...

陳江龍 2019-08-21 17:12 評論0 收藏0
讀Zepto源碼之Selector模塊

摘要：如果偽類的參數不可以用轉換，則參數為字符串，用正則將字符串前后的或去掉，再賦值給最后執行回調，將解釋出來的參數傳入回調函數中，將執行結果返回。重寫的方法，改過的調用的是方法，在回調函數中處理大部分邏輯。 Selector 模塊是對 Zepto 選擇器的擴展，使得 Zepto 選擇器也可以支持部分 CSS3 選擇器和 eq 等 Zepto 定義的選擇器。在閱讀本篇文章之前，最好先閱讀《...

Jioby 2019-08-22 11:09 評論0 收藏0
讀 Zepto 源碼之操作 DOM

摘要：輔助方法這個方法遞歸遍歷的子節點，將節點交由回調函數處理。對集合進行遍歷，調用方法，如果為函數，則將回調函數返回的結果作為參數傳給否則，如果為，則將也即包裹元素的副本傳給，否則直接將傳給。這篇依然是跟 dom 相關的方法，側重點是操作 dom 的方法。讀Zepto源碼系列文章已經放到了github上，歡迎star: reading-zepto 源碼版本本文閱讀的源碼為 zepto...

beita 2019-08-20 17:00 評論0 收藏0