jquery核心buildFragment

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

核心buildFragment

DOM原生的接口是即简单又单一,参数类型确定,也不会重载,每次只会处理一个元素。在看jQuery完全反其道而行之参数复杂多样,接口重载厉害。如果一次传递N多的节点元素那么在处理上要优化就必须引入文档碎片了。
我们知道用文档碎片无非就是先创建:
fragment = context.createDocumentFragment()
然后把所有需要处理的dom节点给appendChild进去:
buildFragment对于文档碎片的创建,可以看到被切分了2个部分:
先看第一部分代码,收集节点元素:

  1. var $newdiv1 = $('<div id="object1"/>'), 
  2.     newdiv2 = document.createElement('div'), 
  3.     existingdiv1 = document.getElementById('foo'); 
  4. $('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>"
 
我们参考右边的代码,整个流程如下:
 分解类型,jQuery对象,节点对象,文本,字符串,脚本
 引入nodes收集各种分解的类型数据
 针对html节点,兼容IE的处理,先过滤空白,然后补全tr,td等
 创建文档碎片的div包含节点,把html结构给innerHTML进去
 取出创建的节点,jQuery.merge(nodes, tmp.childNodes),因为靠div包装过
http://www.aseoe.com/ true jquery核心buildFragment http://www.aseoe.com/show-13-600-1.html report 1675 核心buildFragmentDOM原生的接口是即简单又单一,参数类型确定,也不会重载,每次只会处理一个元素。在看jQuery完全反其道而行之参数复杂多样,接口重载厉害。如果一次传递N多的节点元素那么在处理上要优化就必须
TAG:jquery buildFragment
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-13-600-1.html
[ 扫一扫,在手机上阅读 ]

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)