我正在阅读《Javascript Ninja 的 secret 》这本书,其中大部分代码都是通过使用自定义断言进行演示的。代码如下:
(function () {
var queue = [],
paused = false,
results;
this.test = function test(name, fn) {
queue.push(function () {
results = document.getElementById("results");
results = assert(true, name).appendChild(
document.createElement("ul"));
fn();
});
runTest();
};
this.pause = function () {
paused = true;
};
this.resume = function () {
paused = false;
setTimeout(runTest, 1);
};
function runTest() {
if (!paused && queue.length) {
queue.shift()();
if (!paused) {
resume();
}
}
}
this.assert = function assert(value, desc) {
var li = document.createElement("li");
li.className = value ? "pass" : "fail";
li.appendChild(document.createTextNode(desc));
if (results === undefined) results = document.getElementById("results");
results.appendChild(li);
if (!value) li.parentNode.parentNode.className = "fail";
return li;
};
})();
如您所见,这是一个自调用函数。
我一直在玩它,但我无法理解的是为什么在相同的标签之间,我这样做:
<script type="text/javascript">
... previously shown code ...
window.onload = function(){
assert(true, "this works");
};
</script>
然后,如果我只是像这样进行断言:
<script type="text/javascript">
... previously shown code ...
assert(true, "this does not work");
</script>
当我尝试在不使用 window.onload 事件的情况下执行断言时,我在断言方法的“results.appendChild(li)”行上收到错误“Uncaught TypeError: Cannot call method 'appendChild' to null”。
非常感谢您的帮助。
最佳答案
元素标记(带有 id="results"
)在代码运行时不会被解析,因此尝试使用 getElementById
获取它会返回 null
,这又会使 .appendChild
失败。
当您将代码放入 window.onload
处理程序中时,它(处理程序函数中的代码)保证仅在窗口加载后运行,此时文档标记已完全解析并且该元素也可用。
或者,您可以简单地将脚本元素放在目标元素之后:
<ul id="results"></ul>
<script>
//your code
</script>
由于脚本元素位于目标元素之后,因此保证目标元素在脚本运行时存在。
关于Javascript 函数作用域概念,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11833996/