jQuery源码研究分析学习笔记-jQuery.buildFragment()（六）

DocumentFragment是一种特殊的Node,它作为其他节点的一个临时容器，像document节点咿呀，DocumentFragment是独立的，而不是任何其他文档的一部分，它的parentNode总是null。但类似element,它可以有任意的子节点，可以用appendChild()、insertBefore()等方法来操作。通常我们会利用它来创建文档元素，我们可以利用文档片段的特性先把要插入的文档创建在文档片段中然后整体插入，相对于一个一个的插入文档元素而言性能会提高很多，有关文档碎片（document fragment）的用法详解请阅读(http://blog.csdn.net/lfcss/article/details/46438053)

jQuery.buildFragment( args, context, scripts );

参数args：数组，含有待转换为DOM元素的HTML代码。
参数nodes:数组，含有文档对象、jQuery对象或DOM元素，用于修正创建文档片段DocumentFragment的文档对象
参数scripts: 数组，用于存放HTML代码中的script元素。

方法jQuery.buildFragment( args, context, scripts )先创建一个文档片段DocumentFragment,然后调用方法jQuery.clean()将HTML代码转换为DOM元素，并存在创建的文档片段中
方法执行步骤：

如果HTML代码符合缓存条件，则尝试从缓存对象jQuery.fragments中读取缓存的DOM元素。
创建文档片段DocumentFragment,
调用方法jQuery.clean(elems,context,fragment,scripts)将HTML代码转换为DOM元素，并存储在创建的文档片段中。
如果HTML代码符合缓存条件，则把转换后的DOM元素放入缓存对象jQuery，fragments.
最后返回文档片段和缓存状态{ fragment: fragment, cacheable: cacheable }


jQuery.buildFragment = function( args, nodes, scripts ) {//定义局部变量var fragment, cacheable, cacheresults, doc,first = args[ 0 ];// 修改文档对象doc,数组nodes可能包含一个明确的文档对象可以可能包含jQuery对象或DOM元素，// 尝试读取nodes[0]的属性ownerDocument并赋值给doc，ownerDocument表示DOM元素所在的文档对象// 如果nodes[0].ownerDocument不存在，则假定nodes[0]为文档对象并赋值给docif ( nodes && nodes[0] ) {doc = nodes[0].ownerDocument || nodes[0];}// doc依然可能不是文档对象，如果调用jQuery构造函数时第二个参数javascript对象，此时doc是传入的javascript对象而不是文档对象，如果不存在则修正doc为当前文档对象是documentif ( !doc.createDocumentFragment ) {doc = document;}// 数组args的长度为1，且第一个元素是字符串，即数组args中只含有一段html代码// html代码长度小于512（1/2KB），否则可能会导致缓存占用的内存过大// 文档对象doc是当前文档对象，即只缓存为当前文档创建的DOM元素，不缓存其他框架的// HTML代码以左尖括号开头，只缓存DOM元素，不缓存文本节点// HTML代码中不能含有以下标签：<script>、<object>、<embed>、<optin>、<style>//当前浏览器可以正确地复制单选按钮和复选框的选中状态checked,或者html代码中的单选按钮和复选按钮没有被选中//当前浏览器可以正确地复制html5元素，或者html代码中不含有html5标签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;}}if ( !fragment ) {fragment = doc.createDocumentFragment();jQuery.clean( args, doc, fragment, scripts );}if ( cacheable ) {//如果html代码符合缓存条件，则把转换后的DOM元素放入缓存对象jQuery.fragment中，第一次转换后设置缓存值为1；第二次转换后设置为文档片段；第三次开始则从缓存中读取jQuery.fragments[ first ] = cacheresults ? fragment : 1;}//返回文档片段和缓存状态：文档片段fragment中包含了转换后的DOM元素，缓存状态cacheable则指示了如何使用这些DOM元素return { fragment: fragment, cacheable: cacheable };
};
jQuery.fragments = {};

jQuery源码研究分析学习笔记-jQuery.buildFragment()（六）相关推荐

jQuery源码研究分析学习笔记-jQuery.extend()、jQuery.fn.extend()(八)
jQuery.extend().jQuery.fn.extend()主要用于编写插件和处理函数参数. jQuery.extend(deep,target,objdect1 [,objectN]) jQ ...
jQuery源码研究分析学习笔记-jQuery.fn.init()（五）
$()=jQuery(),二者即是返回的构造函数jQuery.fn.init()实例对象 jQuery = function( selector, context ) {return new jQue ...
jQuery源码研究分析学习笔记-jQuery.deferred()(12)
JS是单线程语言,把每一件事情(包括GUI事件和渲染)都放在一个线程里来处理是一个很好的程序模型,因为这样就无需再考虑线程同步这些复杂问题. 但js暴露了应用开发中的一个严重问题,单线程环境看起来对用 ...
jQuery源码研究分析学习笔记-静态方法和属性（10）
jQuery源码中定义了一些重要的静态属性和方法,它们是其他模块实现的基础,整体的源码结构如下 //把window.jQuery和winow.$备份到局部变量_jQuery和_$_jQuery = w ...
jQuery源码研究分析学习笔记-回调函数（11）
回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件 ...
jQuery源码研究学习笔记（二）
jQuery总体架构: jQuery模块可以大致分为三部分:入口模块.底层支持模块.功能模块. 参考jQuery技术内幕解析 jquery源码总体架构: (function(window,undefi ...
jQuery源码逐行分析学习01(jQuery的框架结构简化)
最近在学习jQuery源码,在此,特别做一个分享,把所涉及的内容都记录下来,其中有不妥之处还望大家指出,我会及时改正.望各位大神不吝赐教!同时,这也是我的第一篇前端技术博客,对博客编写还不是很熟悉,美 ...
javascript arguments对象研究--针对jquery源码研究再研究
外部插件: $.fn.tinytip = function(text, customOptions) { debugger; if (text && typeo ...
jQuery源码学习第二天--jQuery的extend扩展
Jquery中的extend扩展一.看下常见的extend扩展: 1: jQuery.extend({ 2: noConflict: function( deep ) { 3: if ( windo ...

jQuery源码研究分析学习笔记-jQuery.buildFragment()（六）

jQuery源码研究分析学习笔记-jQuery.buildFragment()（六）相关推荐

最新文章

热门文章