1

jQueryを使用するためにいくつかのjavascriptをリファクタリングしていますが、イベントの1つは次のようになります

document.onkeyup = function keyUp(e) {

if (e.keyCode == 70) { // 'f'
    //Do something
}
else if (e.keyCode == 78) { // 'n'
    //Do something else
} ...

残念ながら、ケースで行われることは、この質問の場合ほど類似していないか、単純ではありません。大規模なハードコーディングされた if/else または switch/case ステートメントの代わりに、これを記述するより良い方法はありますか?

4

2 に答える 2

4

それが本当に優れているかどうかはわかりませんが、含める他の専用ファイルに、オブジェクトのキーとしてすべての可能な値をリストすることができます。例えば：

var keyHandlers = {
    "70": function () { /* Do something */ },
    "78": function () { /* Do something else */ }
};

次に、keyupイベントハンドラーで、このオブジェクトの適切なプロパティを参照するだけです。

document.onkeyup = function keyUp(e) {
    keyHandlers[e.keyCode]();
};

ステートメントに対するこのメソッドの注目すべき欠点の1つは、switch複数のキーで同じ機能を実行する場合、見た目が非常に乱雑になることです。を使用するswitchと、これらのケースを通過させることができます。keyHandlersここでは、最初の宣言の後に他のいくつかの割り当てを実行する必要があります。

他のいくつかのポイント...プロパティでaddEventListenerはなく使用する必要があります。現在on...割り当てている関数に名前を付けた理由はありますonkeyupか？名前を付ける唯一の理由は、それ自体の中から参照する必要がある場合です。

于 2013-02-05T07:45:47.510 に答える
2

オブジェクトを使用して、キーコードを関数にマップします。

var keyTable = {
  70: function () { ... },
  78: function () { ... },
  ... etc ...
}

次に、イベントハンドラーは次のようになります。

document.onkeyup = function keyUp(e) {
  keyTable[e.keyCode]();
};
于 2013-02-05T07:46:02.533 に答える