你的位置:首页 > 软件开发 > Java > jQuery.buildFragment源码分析以及在构造jQuery对象的作用

jQuery.buildFragment源码分析以及在构造jQuery对象的作用

发布时间:2015-05-14 23:00:51
这个方法在jQuery源码中比较靠后的位置出现,主要用于两处。1是构造jQuery对象的时候使用 2.是为DOM操作提供底层支持,这也就是为什么先学习它的原因。之前的随笔已经分析过jQuery的构造函数了,也提到了有12个分支,其中有一个分支就是通过jQuery.buildF ...

这个方法在jQuery源码中比较靠后的位置出现,主要用于两处。1是构造jQuery对象的时候使用 2.是为DOM操作提供底层支持,这也就是为什么先学习它的原因。之前的随笔已经分析过jQuery的构造函数了,也提到了有12个分支,其中有一个分支就是通过jQuery.buildFragment方法来处理的,什么情况呢?就是在处理复杂html标签的时候,例如$('<div>123</div>')这样的形式,在构造函数内部通过ret变量判断是不是简单标签,如果是就调用js的createElement方法直接创建元素如果不是呢就通过这个方法处理相关讲解可以参考字符串情况分类分析。本文主要是讨论此方法在构造jQuery对象上的作用。

了解文档片段documentFragment

Javascript中有documentFragment方法用于创建文档片段,什么是文档片段呢?就是创建出来的元素表示文档的一部分但是却不属于文档树。可以简单的理解为缓存的文档元素,通常我们会利用它来创建文档元素,我们可以利用文档片段的特性先把要插入的文档创建在文档片段中然后整体插入,相对于一个一个的插入文档元素而言性能会提高很多。这里引用一个例子:

 

//假如想创建十个段落,使用常规的方式可能会写出这样的代码:var i = 0 ; i < 10; i ++) {  var p = document.createElement("p");  var oTxt = document.createTextNode("段落" + i);  p.appendChild(oTxt);  document.body.appendChild(p);}当然,这段代码运行是没有问题,但是他调用了十次document.body.appendChild(),每次都要产生一次页面渲染。这时碎片就十分有用了:var oFragment = document.createDocumentFragment();for(var i = 0 ; i < 10; i ++) {  var p = document.createElement("p");  var oTxt = document.createTextNode("段落" + i);  p.appendChild(oTxt);  oFragment.appendChild(p);<br>}  document.body.appendChild(oFragment);  first = args[ 0 ];

doc就是修正文档对象的,显然上一个方法不太给力只处理了DOM元素的情况,紧接着这一段就是处理不是DOM元素的情况,如果不存在createDocumentFragment的方法说明不是DOM元素就直接让doc等于document,这里doc修正完毕会始终是创建文档片段的文档对象。

  // Only cache "small" (1/2 KB) HTML strings that are associated with the main document  // Cloning options loses the selected state, so don't cache them  // IE 6 doesn't like it when you put <object> or <embed> elements in a fragment  // Also, WebKit does not clone 'checked' attributes on cloneNode, so don't cache  // Lastly, IE6,7,8 will not correctly reuse cached fragments that were created from unknown elems #10501  if ( args.length === 1 && typeof first === "string" && first.length < 512 && doc === document &&    first.charAt(0) === "<" && !rnocache.test( first ) &&    (jQuery.support.checkClone || !rchecked.test( first )) &&    (jQuery.support.html5Clone || !rnoshimcache.test( first )) ) {    cacheable = true;    cacheresults = jQuery.fragments[ first ];    if ( cacheresults && cacheresults !== 1 ) {      fragment = cacheresults;    }  }

原标题:jQuery.buildFragment源码分析以及在构造jQuery对象的作用

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录