章节
问答
课签
笔记
评论
占位
占位

核心buildFragment

DOM原生的接口是即简单又单一,参数类型确定,也不会重载,每次只会处理一个元素。在看jQuery完全反其道而行之参数复杂多样,接口重载厉害。如果一次传递N多的节点元素那么在处理上要优化就必须引入文档碎片了。

我们知道用文档碎片无非就是先创建:

fragment = context.createDocumentFragment()

然后把所有需要处理的dom节点给appendChild进去:

buildFragment对于文档碎片的创建,可以看到被切分了2个部分:

先看第一部分代码,收集节点元素:

var $newdiv1 = $('<div id="object1"/>'),
    newdiv2 = document.createElement('div'),
    existingdiv1 = document.getElementById('foo');
$('body').append($newdiv1, [newdiv2, existingdiv1,'<td>慕课网</td>','文本','<script>alert(1)'])

这段代码包含了六种不同的类型的参数,基本覆盖了所有了buildFragment的处理其实很简单,我们只需要把不同类型的参数分解后,压入到文档碎片就可以了,当然因为类型的不同处理的方式也有不同。

比如常见的几个问题:

IE对字符串进行trimLeft操作,其余是用户输入处理, 很多标签不能单独作为DIV的子元素, td、th、tr、tfoot、tbody等等,需要加头尾:

<td>慕课网</td>

jQuery通过wrapMap转化成,否则有些会当成普通文本来解释:

"<table><tbody><tr><td>慕课网</td></tr></tbody></table>"

我们参考右边的代码,整个流程如下:

  1.  分解类型,jQuery对象,节点对象,文本,字符串,脚本
  2.  引入nodes收集各种分解的类型数据
  3.  针对html节点,兼容IE的处理,先过滤空白,然后补全tr,td等
  4.  创建文档碎片的div包含节点,把html结构给innerHTML进去
  5.  取出创建的节点,jQuery.merge(nodes, tmp.childNodes),因为靠div包装过

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?