zepto获取html内容,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函数，判断是直接设置内容还是函数设置内容。

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