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函數，判斷是直接設置內容還是函數設置內容。

以上都是個人理解，可能有不正確的地方，歡迎大家指正和討論。