zepto中的属性设置
上次看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;也是一个引用呢？
实验结果也就是一个引用。
那么言归正传，我们接下来看$.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
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-03-21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读