Javascript

通宵了,就是因为这个BUG

咳咳, 现在是凌晨的两点, 大家都回去休息, 隔壁的Lintel大大和我还在奋斗中.

事情是这样的

我利用DocumentFragment做模板的母版, 再将模板添加到另一个总的DocumentFragment中, 这样可以减轻渲染压力.

一开始是这样的:

1
2
3
4
5
6
7
8
9
var tpl = document.createDocumentFragment(),
	_tpl;
tpl.appendChild($id("frm_wifi"));
var frag = document.createDocumentFragment();
var addDOM = function () {
	_tpl = tpl.cloneNode(true);

	...
}

实现起来完全没有问题, 而且过程非常顺畅.

作为一个不愿意重新造轮子的特懒程序猿, 也把这代码Ctrl+C 过来到另外一边,
这次就不是这样了, 一直报错.
调试了一下,得出意想不到的答案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var addDOM = function () {
	console.log(tpl);
	// 正常, 有子Node(根据输出显示)
	console.log(tpl.cloneNode(true));
	// 正常, 有子Node(根据输出显示)
	console.log(_tpl);
	// 正常, 输出null

	_tpl = tpl.cloneNode(true);

	console.log(tpl);
	// 正常, 有子Node(根据输出显示)
	console.log(tpl.cloneNode(true));
	// 正常, 有子Node(根据输出显示)
	console.log(_tpl);
	// 异常, 只有父Node

	...
}

在Chrome和IE11下也是这样

有点奇怪

1
console.log(_tpl.childNodes.length)

如果我这样的话, 是有输出的, 好吧, 这样我就有机会继续用了

是的, 我绕过它了

好在tpl下, 只有一个node, 所以直接_frmTpl.childNodes[0]就算了

如果你知道更好的解决方法, 可否告诉我呢? -> arylo.open@gmail.com

Arylo Yeung, Typescripter, 暂留在鹅厂
tomail:arylo.open@gmail.com