接下来几个篇章,都会解读 zepto 中的跟
相关的方法,也即源码
- dom
对象中的方法。
- $.fn
读 Zepto 源码系列文章已经放到了 github 上,欢迎 star: reading-zepto
本文阅读的源码为 zepto1.2.0
- forEach: emptyArray.forEach
因为 zepto 的
集合是类数组,所以这里只是简单地复制了数组的
- dom
方法。
- forEach
具体的
的用法见文档: Array.prototype.forEach()
- forEach
- reduce: emptyArray.reduce
简单地复制了数组的
方法。
- reduce
具体的
的用法见文档: Array.prototype.reduce()
- reduce
- push: emptyArray.push
简单地复制了数组的
方法。
- push
具体的
的用法见文档: Array.prototype.push()
- push
- sort: emptyArray.sort
简单地复制了数组的
方法。
- sort
具体的
的用法见文档: Array.prototype.sort()
- sort
- splice: emptyArray.splice
简单地复制了数组的
方法。
- splice
具体的
的用法见文档: Array.prototype.splice()
- splice
- indexOf: emptyArray.indexOf
简单地复制了数组的
方法。
- indexOf
具体的
的用法见文档: Array.prototype.indexOf()
- indexOf
- 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]
例如
返回的是倒数第 1 个元素,也即最后一个元素
- $('li').get(-1)
- toArray: function() {
- return this.get()
- }
方法是将元素的类数组变成纯数组。
- toArray
内部不传参调用
- toArray
方法,上面已经分析了,当不传参数时,
- get
方法调用的是数组方法
- get
, 返回的自然就是纯数组了。
- slice
- size: function(){
- return this.length
- }
方法返回的是集合中的
- size
属性,也即集合中元素的个数。
- length
- concat: function(){
- vari,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: function(fn) {
- return $($.map(this,
- function(el, i) {
- return fn.call(el, i, el)
- }))
- }
方法的内部调用的是
- map
的工具函数
- zepto
,这在之前已经在《读 Zepto 源码之工具函数》做过了分析。
- $.map
- return fn.call(el,i,el)
方法对回调也做了包装,
- map
的第一个参数为
- call
,因此可以在
- el
的回调中通过
- map
来拿到每个元素。
- this
方法对
- map
返回的数组调用了
- $.map
方法,将返回的数组再次包装成
- $()
对象,因此调用
- zepto
方法后得到的数组,同样具有
- map
集合中的方法。
- zepto
- slice: function(){
- return $(slice.apply(this,arguments))}
同样没有直接用数组的原生方法,也像
- slice
方法一样,将返回的数组再次包装成
- map
对象。
- zepto
- 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: function(selector,context){
- return $(uniq(this.concat($(selector,context))))}
可以传递两个参数,
- add
和
- selector
,即选择器和上下文。
- context
调用
- add
来获取符合条件的集合元素,这在上篇文章《读 Zepto 源码之神奇的 $》已经有详细的论述。
- $(selector, context)
然后调用
方法来合并两个集合,用内部方法
- concat
来过滤掉重复的项,
- uniq
方法在《读 Zepto 源码之内部方法》已经有论述。最后也是返回一个
- uniq
集合。
- zepto
来源: http://www.cnblogs.com/hefty/p/6887780.html