Vue中fragment.js使用方法详解


Posted in Javascript onMarch 09, 2017

 大部分内容源自 jQuery,当然,同时也参考了 component/domify ,如果有兴趣去这翻阅原始的代码,可以到 jQuery 中查找 wrapMap;至于 domify,直接到 github 搜索即可,相关项目类容很少,直接看 index.js 就行了。

createDocumentFragment

如果要在一个节点上一次性插入多个元素怎么办,比如说一次插入 10000 个节点?

最简单粗暴的方式就是:

var parent = document.getElementById('parent');
for(var i = 0; i < 10000; i++) {
 var child = document.createElement('div');
 var text = document.createTextNode('' + i);
 child.appendChild(text);
 parent.appendChild(child);
}

不过众所周知的原因,对 DOM 反复操作会导致页面重绘、回流,效率非常低,而且页面可能会被卡死,这段代码基本是没人用的。

如果分段来进行 DOM 操作呢,这样就能避免卡死页面了,js 忍者秘籍里面提到过可以用 setTimeout 来改进:

var i = 0, max = 10000;
setTimeout(function addNodes() {
 for(var step = i + 500; i < step; i++) {
  var child = document.createElement('div');
  child.appendChild(document.createTextNode('' + i));
  div.appendChild(child);
 }
 if(i < max) {
  setTimeout(addNodes, 0);
 }
}, 0);

当然,更多能想到的方式应该是,在内存中直接操作节点,所有节点都凑在一起之后再跟 DOM 树进行交互,把所有节点都串在一个 div 上,然后再把 div 挂到 DOM 树上:

var parent = document.getElementById('parent');
var div = document.createElement('div');
for(var i = 0; i < 10000; i++) {
 var child = document.createElement('div');
 var text = document.createTextNode('' + i);
 child.appendChild(text);
 div.appendChild(child);
}
parent.appendChild(div);

如上,只跟 DOM 树交互一次,性能方面肯定是大有改善的,不过额外插入了一个 div,如果说不是跟div之类的节点进行交互呢,比如在 table 中插入 th、td?

这时候,createDocumentFragment 就该出马了,翻译过来叫“文档片段”,按MDN的描述

DocumentFragments 是一些 DOM 节点。它们不是 DOM 树的一部分。通常的使用场景是创建一个文档片段,然后将创建的 DOM 元素插入到文档片段中,最后把文档片段插入到 DOM 树中。在 DOM 树中,文档片段会被替换为它所有的子元素。

因为文档片段存在与内存中,并不在 DOM 树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此,使用文档片段 document fragments 通常会起到优化性能的作用。

简单来说,就是上面一个例子的不需要 div 中转版本,插入的时候,直接用其子元素替换其本身,非常完美。

虽然说,“好用的都不通用”(特别是针对某公司浏览器),不过这个好用的东西,甚至连 IE6 都支持。

具体代码大概就长这样:

var parent = document.getElementById('parent');
var frag = document.createDocumentFragment();
for(var i = 0; i < 10000; i++) {
 var child = document.createElement('div');
 var text = document.createTextNode('' + i);
 child.appendChild(text);
 frag.appendChild(child);
}
parent.appendChild(frag);

具体性能方面的测试,有兴趣的可以把所有代码都跑一遍。

innerHTML

把一长串字符串转换为对应的 DOM 节点,正常而言,首先想到的肯定是 innerHTML。大概流程就是,先创建一个 div 节点,然后 div.innerHTML = str,根据需要把 div 的 children 取出来放到该放的地方去,div 本身给扔了。

如果想单独生成一个 th 节点呢?

试试上面的流程:

var div = document.createElement('div');
div.innerHTML = '<th>xxx</th>';
console.log(div);

实际输出是(chrome 下):

<div>xxx</div>

并没有得到想要的:

<div><th>xxx</th></div>

对于这样的结果是可以理解的,毕竟一个 th 放到 div 里面,怎么看都不对,直接把外围的标签去掉,内容扔到 div 里面也是相当智能的。

不过架不住,有时候就是要获取一个 th 节点。

其实也好办,写全了不就得了:

var node = document.createElement('div');
node.innerHTML = '<table><tbody><tr><th>xxx</th></tr></tbody></table>';
// 把外面的几层皮扒掉就是想要的 th 了
var depth = 3;
while(depth--) {
 node = node.lastChild;
 }
console.log(node.firstChild);

可以看出,结果正是所想要的。

fragment.js

// 需要单独处理的一些特殊节点
var map = {
 legend : [1, '<fieldset>', '</fieldset>'],
 tr : [2, '<table><tbody>', '</tbody></table>'],
 col : [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],

 _default : [0, '', '']
};
map.td = map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
map.option = map.optgroup = [1, '<select multiple="multiple">', '</select>'];
map.thead = map.tbody = map.colgroup = map.caption = map.tfoot = [1, '<table>', '</table>']
map.text = map.circle = map.ellipse = map.line = map.path = map.polygon = map.polyline = map.rect = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];

var TAG_RE = /<([\w:]+)/;

module.exports = function(templateString) {
 var frag = document.createDocumentFragment(),
  m = TAG_RE.exec(templateString);
 // 单纯字符串的情况
 if(!m) {
  frag.appendChild(document.createTextNode(templateString);
  return frag;
 }

 var tag = m[1],
  wrap = map[tag] || map._default,
  depth = wrap[0],
  prefix = wrap[1],
  suffix = wrap[2],
  node = document.createElement('div');
 // 拼接节点字符串
 node.innerHTML = prefix + templateString.trim() + suffix;
 // 去除外包裹层,只留字符串转化的节点
 while(depth--) node = node.lastChild;
 // 只有一个节点的情况
 if(node.firstChild === node.lastChild) { 
  frag.appendChild(node.firstChild);
  return frag;
 }
 // 多个节点,依序添加到 frag
 var child;
 while(child = node.firstChild) {
  frag.appendChild(child);
 }
 return frag;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery切换显示的效果实例代码
Feb 27 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
详解如何使用router-link对象方式传递参数?
May 02 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
JavaScript编写一个贪吃蛇游戏
Mar 09 #Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 #Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 #Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 #Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 #Javascript
js实现3D图片环展示效果
Mar 09 #Javascript
Vue监听数组变化源码解析
Mar 09 #Javascript
You might like
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
用PHP制作静态网站的模板框架
2006/10/09 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
JS中的phototype详解
2017/02/04 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
Python的缺点和劣势分析
2019/11/19 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
有模特经验的简历自我评价
2013/09/19 职场文书
公司财务自我评价分享
2013/12/17 职场文书
我未来的职业规划范文
2014/01/11 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
双语教学实施方案
2014/03/23 职场文书
讲党性心得体会
2014/09/03 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
选购到合适的激光打印机
2022/04/21 数码科技
Python如何加载模型并查看网络
2022/07/15 Python