要了解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函数,判断是直接设置内容还是函数设置内容。
以上都是个人理解,可能有不正确的地方,欢迎大家指正和讨论。