javascript - getElementById 并动态创建 div？

Question

我只是想知道如何使这段代码更高效。我觉得这里有很多代码来完成一个简单的任务。但我不确定如何更好？有没有办法动态创建div？或者是否有一种方法可以减少我进行的“getElementById”调用次数？

Answer 1

您可以进行许多改进，无论是在速度、可读性还是可维护性方面。以下是我的一些想法:

1. 如果要重用注释元素，请将其缓存在变量中。这使得您的代码速度更快，因为您不必再​​次抓取该元素即可使用它。

   var noteDiv = document.getElementById("A");
   noteDiv.note = notes[9];
   noteDiv.onmouseover = displayIt;
   

2. 您可以迭代一些跟踪笔记的内容，而不是过多地重复代码。在此示例中，我使用一个 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;
       }
   }
   

3. 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，而您目前还没有。