jQuery源码研究分析学习笔记-jQuery.buildFragment()(六)
2016-08-02 11:30
851 查看
DocumentFragment是一种特殊的Node,它作为其他节点的一个临时容器,像document节点咿呀,DocumentFragment是独立的,而不是任何其他文档的一部分,它的parentNode总是null。但类似element,它可以有任意的子节点,可以用appendChild()、insertBefore()等方法来操作。通常我们会利用它来创建文档元素,我们可以利用文档片段的特性先把要插入的文档创建在文档片段中然后整体插入,相对于一个一个的插入文档元素而言性能会提高很多,有关文档碎片(document fragment)的用法详解请阅读(http://blog.csdn.net/lfcss/article/details/46438053)
参数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( 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]为文档对象并赋值给doc if ( nodes && nodes[0] ) { doc = nodes[0].ownerDocument || nodes[0]; } // doc依然可能不是文档对象,如果调用jQuery构造函数时第二个参数javascript对象,此时doc是传入的javascript对象而不是文档对象,如果不存在则修正doc为当前文档对象是document if ( !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 = {};
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android Native 绘图方法
- 从源码安装Mysql/Percona 5.5
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果