0

どうすればこのコードをより効率的にできるのだろうかと思っています。ここには、単純なタスクを実行するためのコードがたくさんあるように感じます。しかし、私はそれを改善する方法がわかりませんか？div を動的に作成する方法はありますか? または、私が行う「getElementById」呼び出しの数を減らす方法はありますか?

4

3 に答える 3

3

速度、可読性、または保守性の点で、改善できる点はたくさんあります。ここに私の頭の上からいくつかのリストがあります：

  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のオブジェクトを使用する代わりに、配列を保持することをお勧めします。高速になりますが、維持する作業が少し増えます。また、現在持っていない の要素ごとに 1 つ必要です。notesnoteDivsdivnotes

于 2012-07-15T02:29:18.190 に答える
1

jQuery やそのようなライブラリを使用しない 1 つのソリューションは、次のようになります。

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で実際に動作しているのを見ることができます。

于 2012-07-15T03:02:40.753 に答える
0

改善の 1 つは、getElementById を使用して再度検索する代わりに、DOM 要素を変数に格納して再利用することです。それもより効率的です。

jQuery のようなフレームワークを使用すると、コードを節約できるだけでなく、チェーン化も可能になります。

于 2012-07-15T01:46:57.650 に答える