为什么在附加documentFragment时需要使用cloneNode? [英] Why does cloneNode need to be used when appending a documentFragment?

查看:180
本文介绍了为什么在附加documentFragment时需要使用cloneNode?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在使用Backbone.js应用程序中的documentFragments,并且想知道为什么在将documentFragment附加到父DOM元素时使用cloneNode的示例。



here 可以看到一个例子。如果您看不起DocumentFragment部分,那么您将看到:

  oFrag = document.createDocumentFragment(); 
for(var i = 0,imax = aElms.length; i< imax; i ++){
oFrag.appendChild(aElms [i]);
}

o.innerHTML ='';
o.appendChild(oFrag.cloneNode(true));

为什么oFrag被克隆而不是附加?另一个博客文章不使用cloneNode(作为比较)。

解决方案

您的第一个链接是指博客帖子,其中autor使用 document.getElementsByTagName 而不是 document.getElementById ,就像在测试用例中一样。如果你想要一个多个元素(即:div)被赋予相同的 documentFragment ,你必须克隆它:


如果child是对文档中现有节点的引用,appendChild将其从当前位置移动到新位置(即没有要求将其从父节点删除,然后再将其附加到一些其他节点)。



这也意味着节点不能同时在文档的两点。因此,如果节点已经有一个父节点,那么它首先被删除,然后被添加到新的位置。


通过MDN



很可能是作者(或某人否则)复制粘贴代码,而不考虑这一点。尝试一下 - 您可以使用 appendChild 而不使用 cloneNode ,一切正常。


$另一种可能性是,在jsperf上创建了这个测试用例的人没有太多准备代码的工作原理,并且担心第一个测试将被清空 aElms 数组,它将不再工作了。 事实上,在每次定时迭代之前都会执行准备代码,所以没有必要担心它的内容。



最后一件事情可能是性能问题。如果您真的想测试真实插入,则需要克隆该节点。否则,您将重新测试树重新附加(请参阅上面的MDN链接)。



另请注意,克隆破坏事件侦听器



快乐碎片! ;)


I've been looking at using documentFragments in a Backbone.js app and was wondering why I see examples where "cloneNode" is used when appending the documentFragment to the parent DOM element.

An example can be seen here. If you look down at the DocumentFragment section you'll see this:

oFrag = document.createDocumentFragment();
for (var i = 0, imax = aElms.length; i < imax; i++) {
 oFrag.appendChild(aElms[i]);
}

o.innerHTML = '';
o.appendChild(oFrag.cloneNode(true));

Why does "oFrag" get cloned instead of just appending it? Another blog post doesn't use "cloneNode" (as a comparison).

解决方案

Your first link refers to the blog post where the autor uses document.getElementsByTagName instead of document.getElementById, like in test case. If you want a multiple elements (namely: divs) to be given the same documentFragment, you must clone it:

If child is a reference to an existing node in the document, appendChild moves it from its current position to the new position (i.e. there is no requirement to remove the node from its parent node before appending it to some other node).

This also means that a node can't be in two points of the document simultaneously. So if the node already has a parent, it is first removed, then appended at the new position.

via MDN

Most likely the author (or someone else) copy-pasted the code without taking this into consideration. Try it yourself - you can use appendChild without cloneNode and everything works fine.

Another possibility is that someone who created this test case on jsperf didn't get much how preparation code works and was worried that the very first test will empty aElms array and it won't work anymore. In fact preparation code is executed before each timed iteration, so there's no need to be worried about its contents.

The last thing may the performance concern. If you really want to test the real insertion, you need to clone the node. Otherwise, you'll test tree reattachment instead (see MDN link above).

Also please note that cloning destroys event listeners.

Happy fragmentin'! ;)

这篇关于为什么在附加documentFragment时需要使用cloneNode?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆