分離的選擇器事件 - 與多個if語句

我有多個<button>，它們各自在.on('click')上都有自己的職責。現在我想知道，哪種算法更標準|更好|更快|優化？分離的選擇器事件 - 與多個if語句

算法1：

$("#btn1").click(function(e) { // do stuff for btn1 }); 
$("#btn2").click(function(e) { // do stuff for btn2 }); 
$("#btn3").click(function(e) { // do stuff for btn3 });

算法2：

$("button").click(function(e) { 

    var id = $(this).attr('id'); 

    if  (id == '#btn1') { // do stuff for btn1 } 
    elseif (id == '#btn2') { // do stuff for btn2 } 
    elseif (id == '#btn2') { // do stuff for btn3 } 

});

來源

2015-12-07 stack

如果有任何性能差異，它是微不足道的。這是個人偏好和代碼組織的問題。我更喜歡綁定事件到特定的按鈕（通過ID）。所以我可以清楚地看到哪個按鈕做什麼。如果有多個按鈕的重複代碼，我創建一個函數。 –

@VictorLevin你是對的。 tnx – stack

[jQuery綁定點擊事件最佳實踐]可能的重複（http://stackoverflow.com/questions/11552174/jquery-binding-click-event-best-practices） –

純粹的偏好，並根據形勢的個人風格的問題。我喜歡有工作劃分爲功能，但如果我沒有使用第二個例子，我會做這樣的：

$("button").click(function(e) { 
    switch (this.id) { 
    case 'btn1': // do stuff for btn1 
     break 
    case 'btn2': // do stuff for btn2 
     break 
    case 'btn3': // do stuff for btn3 
     break 
    default: console.log(this.id, "has no behavior"); 
    } 
});

來源

2015-12-07 14:49:51

我明白了。謝謝你的解釋。 +1。只有一件事，爲什麼你的答案是*社區wiki *？甚至那是什麼？你是版主嗎？ – stack

@stack：不，我只是這樣做，任何人都可以隨時進行改進。我並不真正在意rep的分數。 –

哇鼓掌...！ – stack

查詢通過ID的DOM比標籤名快得多，所以第一個選項應快點。如果速度很重要，你可以考慮引導jQuery並在香草js中做同樣的事情。

但是在任何一種情況下，對於任何真實世界的使用情況，性能差異都可以忽略不計。

來源

2015-12-07 14:53:33 flemcito

如果性能確實是一個問題，jQuery將是第一個被淘汰的（至少部分）。 +1 –

分離的選擇器事件 - 與多個if語句

回答

相關問題