zepto源码研究 - zepto.js-4(常用的工具)

/**
   * 以集合每一个元素作为上下文，来执行回调函数
   * @param elements
   * @param callback
   * @returns {*}
   */
  $.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
  }

/**
     * 删除元素集
     * 原理   parentNode.removeChild
     * @returns {*}
     */
    remove: function(){
      //遍历到其父元素   removeChild
      return this.each(function(){
        if (this.parentNode != null)
          this.parentNode.removeChild(this)
      })
    },

//返回集合中的第1条记录是否与selector匹配
    is: function(selector){
      return this.length > 0 && zepto.matches(this[0], selector)
    }

//排除集合里满足条件的记录，接收参数为：css选择器，function, dom ,nodeList
    not: function(selector){
      var nodes=[]
      //当selector为函数时，safari下的typeof nodeList也是function，所以这里需要再加一个判断selector.call !== undefined
      if (isFunction(selector) && selector.call !== undefined)
        this.each(function(idx){
          //注意这里收集的是selector.call(this,idx)返回结果为false的时候记录
          if (!selector.call(this,idx)) nodes.push(this)
        })
      else {
        //当selector为字符串的时候，对集合进行筛选，也就是筛选出集合中满足selector的记录
        var excludes = typeof selector == ‘string‘ ? this.filter(selector) :
            //当selector为nodeList时执行slice.call(selector),注意这里的isFunction(selector.item)是为了排除selector为数组的情况
            //当selector为css选择器，执行$(selector)
            (likeArray(selector) && isFunction(selector.item)) ? slice.call(selector) : $(selector);
        this.forEach(function(el){
          //筛选出不在excludes集合里的记录，达到排除的目的
          if (excludes.indexOf(el) < 0) nodes.push(el)
        })
      }
      return $(nodes)//由于上面得到的结果是数组，这里需要转成zepto对象，以便继承其它方法，实现链写
    },

/*
     接收node和string作为参数，给当前集合筛选出包含selector的集合
     isObject(selector)是判断参数是否是node，因为typeof node == ‘object‘
     当参数为node时，只需要判读当前记当里是否包含node节点即可
     当参数为string时，则在当前记录里查询selector，如果长度为0，则为false，filter函数就会过滤掉这条记录，否则保存该记录
     */
    has: function(selector){
      return this.filter(function(){
        return isObject(selector) ?
            $.contains(this, selector) :
            $(this).find(selector).size()
      })
    },

/**
 * 获取元素的默认display属性
 * 是为了兼容什么？
 * @param nodeName
 * @returns {*}
 */
function defaultDisplay(nodeName) {
  var element, display
  if (!elementDisplay[nodeName]) {  //缓存里没有

    element = document.createElement(nodeName)
    document.body.appendChild(element)
    display = getComputedStyle(element, ‘‘).getPropertyValue("display")
    element.parentNode.removeChild(element)

    // display == "none"，设置成blaock，即隐藏-显示
    display == "none" && (display = "block")

    elementDisplay[nodeName] = display //TODO:缓存元素的默认display属性，缓存干嘛？
  }
  return elementDisplay[nodeName]
}

/**
     * 展示
     * @returns {*}
     */
    show: function(){
      return this.each(function(){
        //清除内联样式display="none"
        this.style.display == "none" && (this.style.display = ‘‘)
        //计算样式display为none时，重赋显示值
        if (getComputedStyle(this, ‘‘).getPropertyValue("display") == "none")
          this.style.display = defaultDisplay(this.nodeName)
        //defaultDisplay是获取元素默认display的方法
      })
    },

/**
     * 读写样式   写：内联样式  读：计算样式
     *   原理 读：elment[style]/getComputedStyle， 写 this.style.cssText 行内样式设值
     * @param property   String/Array/Fun
     * @param value
     * @returns {*}
     */
    css: function(property, value){
      //只有一个传参，读
      if (arguments.length < 2) {
        var computedStyle, element = this[0]
        if(!element) return
        //getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读
        //读到计算样式
        computedStyle = getComputedStyle(element, ‘‘)
        //设置样式
        if (typeof property == ‘string‘)// 字符串
        //优先读行内样式，再读计算样式，行内样式级别最高？ TODO:似乎有bug，如果设置了!important 呢
          return element.style[camelize(property)] || computedStyle.getPropertyValue(property)
        else if (isArray(property)) {     //数组
          var props = {}
          $.each(property, function(_, prop){     //遍历读取每一条样式，存入JSON，返回
            props[prop] = (element.style[camelize(prop)] || computedStyle.getPropertyValue(prop))
          })
          return props
        }
      }

      //如果是写
      var css = ‘‘
      if (type(property) == ‘string‘) {
        if (!value && value !== 0)  //null，undefined时，删掉样式
          this.each(function(){
            //删除        dasherize是将字符串转换成css属性(background-color格式）
            this.style.removeProperty(dasherize(property))
          })
        else
        //‘-’格式值 + px单位
          css = dasherize(property) + ":" + maybeAddPx(property, value)
      } else {
        for (key in property)     //是对象时
          if (!property[key] && property[key] !== 0)
          //当property[key]的值为null/undefined，删除属性
            this.each(function(){ this.style.removeProperty(dasherize(key)) })
          else
          //‘-’格式值 + px单位
            css += dasherize(key) + ‘:‘ + maybeAddPx(key, property[key]) + ‘;‘
      }

      //设值   //TODO:   this.style.cssText +=  未考虑去重了
      return this.each(function(){ this.style.cssText += ‘;‘ + css })
    },

/**
 * 处理 arg为函数/值
 * 为函数，返回函数返回值
 * 为值，返回值
 * @param context
 * @param arg
 * @param idx
 * @param payload
 * @returns {*}
 */
function funcArg(context, arg, idx, payload) {
  return isFunction(arg) ? arg.call(context, idx, payload) : arg
}

/**
     * 读写元素HTML内容
     * 原理 通过innerHTML读内容,append()写内容
     * @param html
     * @returns {*|string|string|string|string|string}
     */
    html: function(html){
      return 0 in arguments ?
          this.each(function(idx){
            var originHtml = this.innerHTML   //记录原始的innerHTMl
            //如果参数html是字符串直接插入到记录中，
            //如果是函数，则将当前记录作为上下文，调用该函数，且传入该记录的索引和原始innerHTML作为参数
            $(this).empty().append( funcArg(this, html, idx, originHtml) )
          }) :
          (0 in this ? this[0].innerHTML : null)
    },

/**
     * 读写元素文本内容
     * 原理：  通过 textContent 读写文本
     * @param text
     * @returns {*}
     */
    text: function(text){
      return 0 in arguments ?
          this.each(function(idx){                               //传参遍历写入
            var newText = funcArg(this, text, idx, this.textContent)
            this.textContent = newText == null ? ‘‘ : ‘‘+newText
          }) :
          (0 in this ? this[0].textContent : null)   //未传参读
    },