gpt4 book ai didi

javascript - appendChild 在作业上下文中如何工作?

转载 作者:行者123 更新时间:2023-12-02 18:02:08 24 4
gpt4 key购买 nike

有几个问题与同一段代码相关,包括这个:Understanding JavaScript Styling同样,这摘自本书Secrets of the JavaScript Ninja

<!DOCTYPE html>
<html>
<head>
<title>Ninja Template</title>
<style>
body { background: #d6d6d6; }
#results li.pass { color: green; }
#results li.fail { color: red; }
</style>
</head>

<body>
<h2>Test Groups</h2>

<script>
(function() {
var results;

this.assert = function assert(value, desc) {
var li = document.createElement("li");
li.className = value ? "pass" : "fail";
li.appendChild(document.createTextNode(desc));
results.appendChild(li);

if(!value) {
li.parentNode.parentNode.className = "fail";
}

return li;
}

this.test = function test(name, fn) {
results = document.getElementById("results");
results = assert(true, name).appendChild( //THIS LINE
document.createElement("ul"));
fn();
}

})();

window.onload = function() {
test("Test Group #1", function() {
assert(true, "First assertion completed");
assert(true, "Second assertion completed");
});

test("Test Group #2", function() {
assert(true, "Third assertion completed");
assert(false, "Fourth assertion completed");
});
}

</script>

<ul id="results"></ul>
</body>

</html>

我这次的问题是关于标有THIS LINE comment的行,我不明白它是如何工作的。根据我的理解, assert() 方法总是返回一个 li 标签,并且提到的 JS 代码行将该 li 分配给父 ul#results 元素,这不会将 ul#results 转换为 li 标签并破坏所需的结构吗? (显然不是,我很困惑为什么会这样)

在纯 JS 中赋值是否可以作为附加操作?

我根本不明白这是如何工作的,真诚感谢任何帮助。

最佳答案

.appendChild 返回子项,在本例中为 ul,因此将 results 设置为新插入的ul

<ul id="results">
<li>
<ul></ul> <!-- this is now results -->
</li>
</ul>

每个test()调用都会将一个li附加到#results;每个 test 内部都有两个 assert 调用,它们现在将生成的 li 元素附加到上面看到的新插入的 ul 中。

this.test = function test(name, fn) {
// new test; set _results_ to the outermost UL, ul#results
results = document.getElementById("results");

// next line appends an LI to #results,
// appends a new UL to that LI, and sets _results_ to the new UL
results = assert(true, name).appendChild(document.createElement("ul"));

// the assert() calls in the callback are now called
// with _results_ referring to the nested UL
fn();
}

DEMO

关于javascript - appendChild 在作业上下文中如何工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20429604/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com