Question

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

Answer 1

无论是在速度，可读性还是可维护性方面，您都可以进行一些改进。这是我头脑中的一些清单：

如果您要重复使用，请在变量中缓存note元素。这使您的代码更快，因为您不必再次使用该元素来使用它。
```
var noteDiv = document.getElementById("A");
noteDiv.note = notes[9];
noteDiv.onmouseover = displayIt;
```

您可以迭代一些跟踪笔记的内容，而不是重复代码。在这个例子中，我使用了一个id数组和一个包含id和notes作为属性 - 值对的对象。

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数组相同。它会更快，但维护工作也会稍微多一些。您还需要为div中的每个元素添加一个notes，这是您目前没有的。

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);
}

您可以在this fiddle处看到它。

Answer 3

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

如果您使用像jQuery这样的框架，那么可以保存代码以及您可以进行链接。

getElementById并动态创建div？

3 个答案: