Question

我有多个<button>，每个人.on('click')都有自己的职责。现在我想知道，哪种算法更标准更好|更快|优化

算法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 }

});

Answer 1

纯粹是偏好和个人风格的问题，视情况而定。我更喜欢将工作划分为函数，但如果我确实使用了第二个例子，我就这样做：

$("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");
    }
});

Answer 2

通过ID查询DOM比标记名称快得多，因此第一个选项应该更快。如果速度很重要，你可以考虑启动jQuery并在vanilla js中做同样的事情。

但在任何一种情况下，对于任何实际使用情况，性能差异都可以忽略不计。

分离的selector-event-（s）VS多个if语句

2 个答案: