Collection operation of reading zepto source code

Time:2021-10-22

The following chapters will interpret the following in zeptodomRelated methods, that is, the source code$.fnObject.

The zepto source code series has been posted on GitHub. Welcome to star:reading-zepto

Source version

The source code of this article iszepto1.2.0

.forEach()

forEach: emptyArray.forEach

Because zepto’sdomCollection is an array of classes, so here we simply copy the arrayforEachmethod.

concreteforEachSee the document for the usage of:Array.prototype.forEach()

.reduce()

reduce: emptyArray.reduce

Simply copied the of the arrayreducemethod.

concretereduceSee the document for the usage of:Array.prototype.reduce()

.push()

push: emptyArray.push

Simply copied the of the arraypushmethod.

concretepushSee the document for the usage of:Array.prototype.push()

.sort()

sort: emptyArray.sort

Simply copied the of the arraysortmethod.

concretesortSee the document for the usage of:Array.prototype.sort()

.splice()

splice: emptyArray.splice

Simply copied the of the arraysplicemethod.

concretespliceSee the document for the usage of:Array.prototype.splice()

.indexOf()

indexOf: emptyArray.indexOf

Simply copied the of the arrayindexOfmethod.

concreteindexOfSee the document for the usage of:Array.prototype.indexOf()

.get()

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

This method is used to get the element with the specified index value.

No parameter transmission(idx === undefined)The array is called without parameterssliceMethod to return all elements in the collection.

When the passed parameter is greater than or equal to zero(idx)Returns the element of the corresponding index valuethis[idx], if it is negative, the reciprocal is returnedthis.[idx + this.length]

for example$('li').get(-1)Returns the penultimate element, the last element

.toArray()

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

toArrayThe method is to turn the class array of elements into a pure array.toArrayInternal non parameter callgetMethod, which has been analyzed above. When parameters are not transmitted,getMethod calls an array methodsliceOf course, the returned is a pure number group.

.size()

size: function() {
  return this.length
}

sizeMethod returns the data in the collectionlengthProperty, that is, the number of elements in the collection.

.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)
},

There is also a corresponding in the arrayconcatMethod, why not call it directly like the above method?

that is because$.fnIn fact, it is an array like object, not a real array. If you call it directlyconcatWill directly put the whole$.fnAs an arrayitemMerge into an array.

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

This section judges each parameter. If the parameter iszeptoCollection of(zepto.isZ(value)), call firsttoArrayMethod to convert to a pure array.

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

This paragraph is also truethisJudged ifzeptoCollection, which is also converted into an array first. So callconcatAfter that, it returns a pure array, no longer azeptoSet.

.map()

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

mapMethod is called internallyzeptoTool functions for$.map, this has been done before《Tool function for reading zepto source code》Analyzed.

return fn.call(el, i, el)

mapMethod also wraps the callback,callThe first parameter isel, so you canmapPassed in callbackthisTo get each element.

mapMethod pair$.mapThe returned array called$()Method to wrap the returned array intozeptoObject, so callmapMethod also haszeptoMethods in the collection.

.slice()

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

sliceSimilarly, there are no native methods that directly use arrays, likemapMethod, wrap the returned array again intozeptoObject.

.each()

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

zeptoofeachThe method is ingenious. Inside the method, the array is actually calledeverymethod,everyencounterfalseThe traversal will be aborted when,zeptoIt is also the use ofeveryThis feature makeseachMethod also has the ability to abort traversal whencallbackThe returned value is BooleanfalseStop traversal. Note that it is used here!==BecausecallbackIf there is no return value, the value will beundefined, this situation needs to be eliminated.

Again,eachIt can also be used in callbacksthisGet the of each element.

be careful,eachMethod returnsthis, so ineachAfter calling, you can continue to call other methods in the collection, which iszeptoChain call, this is the same asmapMethodzeptoThe principle of set is similar, buteachIt returns the same set as the original,mapMethod returns the mapped collection.

.add()

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

addTwo parameters can be passed,selectorandcontextThat is, selectors and contexts.

addcall$(selector, context)To get the qualified collection elements, which was in the previous article《The magic of reading zepto source code$》It has been discussed in detail.

Then callconcatMethod to merge two collections, using an internal methoduniqTo filter out duplicate items,uniqMethod in《Internal method of reading zepto source code》It has been discussed. Finally, it returns azeptoSet.

Series articles

  1. Read the code structure of zepto source code

  2. Internal method of reading zepto source code

  3. Tool function for reading zepto source code

  4. The magic of reading zepto source code$

reference resources

License

Finally, all articles will be sent to WeChat official account simultaneously. Welcome to our attention. Welcome to comment:Collection operation of reading zepto source code

Author: the other side of the diagonal