zepto中的属性设置

时间:2021-10-10 00:27:42

上次看zepto的init方法时,有一段属性设置的代码,先来看看其表现:

if (isPlainObject(properties)) {
nodes = $(dom)
$.each(properties, function(key, value) {
if (methodAttributes.indexOf(key) > -1) nodes[key](value)
else nodes.attr(key, value)
})
}

在分析这里的时候,一直很困惑,为什么实例化dom之后,对nodes进行属性设置会导致dom也有了属性设置的结果。回想了一下,在javascript中,对象是引用,而不是赋值,而dom不是zepto对象就是Dom对象,假如是zepto对象的话,那么nodes其实就是dom,因为在zepto的init方法中,传入参数是zepto对象的话则直接返回该对象。而如果是其他对象的话,则将其设置为数组的第一个元素返回该数组。

zepto.init = function(selector, context) {
var dom
...
else if (typeof selector == 'string') {
...
}
...
else if (zepto.isZ(selector)) return selector
else {
...
else if (isObject(selector))
dom = [selector], selector = null
....
}
// create a new Zepto collection from the nodes found
return zepto.Z(dom, selector)
}

那么dom = [selector],是不是相当于dom[0] = selector;也是一个引用呢?

zepto中的属性设置

实验结果也就是一个引用。

那么言归正传,我们接下来看$.each函数

$.each = function(elements, callback){
var i, key
if (likeArray(elements)) {
for (i = 0; i < elements.length; i++)
if (callback.call(elements[i], i, elements[i]) === false) return elements
} else {
for (key in elements)
if (callback.call(elements[key], key, elements[key]) === false) return elements
} return elements
}

该函数事实上并没有什么特别,对于传入的第一个参数为要迭代的数组或对象,第二个为回调函数,如果迭代过程中有一个元素或属性返回false,则返回传入的第一个参数,否则迭代完再返回第一个参数。

然后就是attr方法了。

attr: function(name, value){
var result
return (typeof name == 'string' && !(1 in arguments)) ?
(0 in this && this[0].nodeType == 1 && (result = this[0].getAttribute(name)) != null ? result : undefined) :
this.each(function(idx){
if (this.nodeType !== 1) return
if (isObject(name)) for (key in name) setAttribute(this, key, name[key])
else setAttribute(this, name, funcArg(this, value, idx, this.getAttribute(name)))
})
},

该方法首先判断传入的第一个参数是否为一个字符串,并判断是否有第二个参数,然后根据条件返回读取属性的值。

如果传入的是其他情况,则调用each方法,注意,这里的each是$.fn.each,与上面的$.each不同。

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

each方法传入一个回调函数,并调用数组的every方法对this(则zepto对象)进行迭代,并将对象的属性作为回调函数的上下文进行调用。

那么attr方法中,传入的回调函数,则是首先判断this的nodeType是否为1,nodeType可以参考这里nodeType。若是,则调用setAttribute方法直接将传入的key-value对象设置为属性,否则就通过一个funcArg函数来设置其属性name的值。

function funcArg(context, arg, idx, payload) {
return isFunction(arg) ? arg.call(context, idx, payload) : arg
}