javascript - getElementById 并动态创建 div？

Question

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

Answer 1

您可能会做出许多改进，无论是在速度、可读性还是可维护性方面。这是我脑海中的一些清单：

1. 如果要重用它，请将 note 元素缓存在变量中。这使您的代码更快，因为您不必再​​次抓取元素来使用它。

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

2. 您可以迭代跟踪您的笔记的东西，而不是重复您的代码。在此示例中，我使用了一个 id 数组和一个包含 id 和注释作为属性值对的对象。

   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数组而不是使用我上面的对象可能会更好。它会更快，但维护工作也会稍微多一些。您还需要为 中的每个元素设置一个，而您目前没有。notesnoteDivsdivnotes

Answer 2

一种不使用 jQuery 或任何此类库的解决方案可能如下所示：

var notes = ["Middle C","C#","D","D#","E","F","F#","G", "G#", "A", "A#", "B", "C"];
var note, div, name;

var myKeys = document.getElementById("myKeys");


for (var i = 0, len = notes.length; i < len; i++) {
    note = notes[i];
    name = note.replace(/\s/g, "").replace(/#/g, "S");
    div = document.createElement("DIV");
    div.className = name;
    div.id = name;
    div.note = note;
    div.appendChild(document.createTextNode(note));
    div.onmouseover = displayIt;
    myKeys.appendChild(div);
}​

你可以在这个 fiddle看到它的作用。

Answer 3

一项改进是将 DOM 元素存储在一个变量中并重新使用它，而不是使用 getElementById 再次找到它。它也更有效率。

如果您使用 jQuery 之类的框架，那么您可以像进行链接一样节省代码。