快捷導(dǎo)航

Vue中fragment.js使用方法詳解

更新時(shí)間：2017年03月09日 16:01:29 作者：duiel

這篇文章主要為大家詳細(xì)介紹了Vue中fragment.js的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

大部分內(nèi)容源自 jQuery，當(dāng)然，同時(shí)也參考了 component/domify ，如果有興趣去這翻閱原始的代碼，可以到 jQuery 中查找 wrapMap；至于 domify，直接到 github 搜索即可，相關(guān)項(xiàng)目類(lèi)容很少，直接看 index.js 就行了。

createDocumentFragment

如果要在一個(gè)節(jié)點(diǎn)上一次性插入多個(gè)元素怎么辦，比如說(shuō)一次插入 10000 個(gè)節(jié)點(diǎn)？

最簡(jiǎn)單粗暴的方式就是：

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);
}

不過(guò)眾所周知的原因，對(duì) DOM 反復(fù)操作會(huì)導(dǎo)致頁(yè)面重繪、回流，效率非常低，而且頁(yè)面可能會(huì)被卡死，這段代碼基本是沒(méi)人用的。

如果分段來(lái)進(jìn)行 DOM 操作呢，這樣就能避免卡死頁(yè)面了，js 忍者秘籍里面提到過(guò)可以用 setTimeout 來(lái)改進(jìn)：

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);

當(dāng)然，更多能想到的方式應(yīng)該是，在內(nèi)存中直接操作節(jié)點(diǎn)，所有節(jié)點(diǎn)都湊在一起之后再跟 DOM 樹(shù)進(jìn)行交互，把所有節(jié)點(diǎn)都串在一個(gè) div 上，然后再把 div 掛到 DOM 樹(shù)上：

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 樹(shù)交互一次，性能方面肯定是大有改善的，不過(guò)額外插入了一個(gè) div，如果說(shuō)不是跟div之類(lèi)的節(jié)點(diǎn)進(jìn)行交互呢，比如在 table 中插入 th、td？

這時(shí)候，createDocumentFragment 就該出馬了，翻譯過(guò)來(lái)叫“文檔片段”，按MDN的描述：

DocumentFragments 是一些 DOM 節(jié)點(diǎn)。它們不是 DOM 樹(shù)的一部分。通常的使用場(chǎng)景是創(chuàng)建一個(gè)文檔片段，然后將創(chuàng)建的 DOM 元素插入到文檔片段中，最后把文檔片段插入到 DOM 樹(shù)中。在 DOM 樹(shù)中，文檔片段會(huì)被替換為它所有的子元素。

因?yàn)槲臋n片段存在與內(nèi)存中，并不在 DOM 樹(shù)中，所以將子元素插入到文檔片段時(shí)不會(huì)引起頁(yè)面回流(對(duì)元素位置和幾何上的計(jì)算)。因此，使用文檔片段 document fragments 通常會(huì)起到優(yōu)化性能的作用。

簡(jiǎn)單來(lái)說(shuō)，就是上面一個(gè)例子的不需要 div 中轉(zhuǎn)版本，插入的時(shí)候，直接用其子元素替換其本身，非常完美。

雖然說(shuō)，“好用的都不通用”（特別是針對(duì)某公司瀏覽器），不過(guò)這個(gè)好用的東西，甚至連 IE6 都支持。

具體代碼大概就長(zhǎng)這樣：

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);

具體性能方面的測(cè)試，有興趣的可以把所有代碼都跑一遍。

innerHTML

把一長(zhǎng)串字符串轉(zhuǎn)換為對(duì)應(yīng)的 DOM 節(jié)點(diǎn)，正常而言，首先想到的肯定是 innerHTML。大概流程就是，先創(chuàng)建一個(gè) div 節(jié)點(diǎn)，然后 div.innerHTML = str，根據(jù)需要把 div 的 children 取出來(lái)放到該放的地方去，div 本身給扔了。

如果想單獨(dú)生成一個(gè) th 節(jié)點(diǎn)呢？

試試上面的流程：

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

實(shí)際輸出是（chrome 下）：

<div>xxx</div>

并沒(méi)有得到想要的：

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

對(duì)于這樣的結(jié)果是可以理解的，畢竟一個(gè) th 放到 div 里面，怎么看都不對(duì)，直接把外圍的標(biāo)簽去掉，內(nèi)容扔到 div 里面也是相當(dāng)智能的。

不過(guò)架不住，有時(shí)候就是要獲取一個(gè) th 節(jié)點(diǎn)。

其實(shí)也好辦，寫(xiě)全了不就得了：

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);

可以看出，結(jié)果正是所想要的。

fragment.js

// 需要單獨(dú)處理的一些特殊節(jié)點(diǎn)
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');
 // 拼接節(jié)點(diǎn)字符串
 node.innerHTML = prefix + templateString.trim() + suffix;
 // 去除外包裹層，只留字符串轉(zhuǎn)化的節(jié)點(diǎn)
 while(depth--) node = node.lastChild;
 // 只有一個(gè)節(jié)點(diǎn)的情況
 if(node.firstChild === node.lastChild) { 
  frag.appendChild(node.firstChild);
  return frag;
 }
 // 多個(gè)節(jié)點(diǎn)，依序添加到 frag
 var child;
 while(child = node.firstChild) {
  frag.appendChild(child);
 }
 return frag;
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: