zepto源码之html()方法

要了解html()方法的实现，首先了解它的用法和参数。

定义和用法

html() 方法设置或返回被选元素的内容（innerHTML）。

当该方法用于返回内容时，则返回第一个匹配元素的内容。

当该方法用于设置内容时，则重写所有匹配元素的内容。

返回内容：

$(selector).html()

设置内容：

$(selector).html(content)

使用函数设置内容：

$(selector).html(function(index,currentcontent))

参数	描述
content	必需。规定被选元素的新内容（可包含 HTML 标签）。
function(index,currentcontent)	可选。规定返回被选元素的新内容的函数。 index - 返回集合中元素的 index 位置。 currentcontent - 返回被选元素的当前 HTML 内容。

因为 html() 函数内部使用到了zepto中自定义的函数funcArg(),所以先看一下funcArg()的有什么作用。

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

funcArg函数用来判定第二个参数arg(就是传进来的html)是否是一个函数（通过上面参数的学习，我们知道参数可以为一个函数），如果是一个函数，则让this指向context（html()调用时传进的是this，其实就是当前当前调用html()方法的元素），否则返回arg ，看完了这个函数，就可以来看html()的内部实现。

  html: function(html){
      return 0 in arguments ?
        this.each(function(idx){
          var originHtml = this.innerHTML
          $(this).empty().append( funcArg(this, html, idx, originHtml) )
        }) :
        (0 in this ? this[0].innerHTML : null)
    }

首先这个方法内是用了一个三元运算符来实现的，0 in arguments这里用来检测参数(不知道in操作符的小伙伴补下习哦)，当0 in arguments为假时，也就是参数为空，说明是返回html内容，然后判断当前this(也就是当前调用html()方法的元素为不为空)，不为空返回就是它的innerHTML，否则返回null。当0 in arguments为真时，则有参数说明是设置内容，因为this获取的元素可能不止一个，所以要each每一个获取的元素，先把老的innerHTML获取备用，再清空插入新的html。此时就用到funcArg函数，判断是直接设置内容还是函数设置内容。

以上都是个人理解，可能有不正确的地方，欢迎大家指正和讨论。