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
  }