我只是想知道如何使这段代码更高效。我觉得这里有很多代码来完成一个简单的任务。但我不确定如何更好?有没有办法动态创建div?或者是否有一种方法可以减少我进行的“getElementById”调用次数?
最佳答案
您可以进行许多改进,无论是在速度、可读性还是可维护性方面。以下是我的一些想法:
如果要重用注释元素,请将其缓存在变量中。这使得您的代码速度更快,因为您不必再次抓取该元素即可使用它。
var noteDiv = document.getElementById("A"); noteDiv.note = notes[9]; noteDiv.onmouseover = displayIt;
您可以迭代一些跟踪笔记的内容,而不是过多地重复代码。在此示例中,我使用一个 ids 数组和一个包含 ids 和注释作为属性值对的对象。
var noteDivs = ["Middle", "D", "E", "F", ... ] // note that the order you put notes in here does not matter var notes = { Middle: "Middle C", D: "D", E: "E", F: "F", ... } function MakingNoise () { for (var i = 0; i < noteDivs.length ; i++) { document.getElementById(noteDivs[i]).note = notes[noteDivs[i]]; document.getElementById(noteDivs[i]).onmouseover = displayIt; } }
box
元素也可以通过全局变量进行缓存。可能不是很好的风格,但这应该比每次从 DOM 获取它要快。var screen=document.getElementById("box"); function displayIt() { if (this.note && screen) { screen.innerHTML += note + " "; } }
将所有内容放在一起,您将得到以下结果:
var screen=document.getElementById("box");
var noteDivs = ["Middle", "D", "E", "F", ... ]
var notes = { Middle: "Middle C",
D: "D",
E: "E",
F: "F",
... }
function MakingNoise () {
for (var i = 0; i < noteDivs.length ; i++) {
var noteDiv = document.getElementById(noteDivs[i]);
noteDiv.note = notes[noteDivs[i]];
noteDiv.onmouseover = displayIt;
}
}
function displayIt() {
if (this.note && screen) {
screen.innerHTML += note + " ";
}
}
最好保留您的 notes
数组,而不是使用上面的 notes
对象,只要您确保顺序与noteDivs
数组。它会更快,但维护工作也会稍微多一些。您还需要为 notes
中的每个元素设置一个 div
,而您目前还没有。
关于javascript - getElementById 并动态创建 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11488748/