Является ли более эффективным использование цикла for?

Question

Вот пример кода, который у меня есть на моем веб-сайте ... Это на самом деле продолжается еще 12 итераций. Можно ли использовать цикл for для этого? Есть ли более эффективный способ? Благодаря!

document.getElementById("1").onclick=function(){ 
    lyre[0]=Number(!lyre[0]); 
    document.getElementById("1").innerHTML=String(lyre[0]); 
} 
    document.getElementById("2").onclick=function(){ 
    lyre[1]=Number(!lyre[1]); 
    document.getElementById("2").innerHTML=String(lyre[1]); 
} 
document.getElementById("3").onclick=function(){ 
    lyre[2]=Number(!lyre[2]); 
    document.getElementById("3").innerHTML=String(lyre[2]); 
} 
document.getElementById("4").onclick=function(){ 
    lyre[3]=Number(!lyre[3]); 
    document.getElementById("4").innerHTML=String(lyre[3]); 
} 

Answer 1

В своей основе, вы можете сделать что-то вроде этого:

function attachListener(lyre, lyreIndex, id) { 

    document.getElementById(id).onclick = function() { 
    // assign zero or one based on the current value: 
    lyre[lyreIndex] = !lyre[lyreIndex] ? 0 : 1; 

    // update the display of the value: 
    document.getElementById(id).innerHTML = lyre[lyreIndex]; 
    } 
} 

for(var i = 0; i < lyre.length; i += 1) { 
    attachListener(lyre, i, i + 1); 
} 

Я изменил код, чтобы быть более идиоматически JavaScript. В общем, вам следует избегать примитивных конструкторов (например, Number и String) и использовать их буквальные версии.

Есть и другие способы сделать это более удобным и идиоматичным, но это должно служить вашим потребностям.

Если вы беспокоитесь о производительности, несколько десятков слушателей событий обычно не связаны с чем-то. Однако, если вы имеете дело с более чем тем, вам следует рассмотреть возможность делегирования ваших событий. Это ограничивает количество дискретных слушателей событий при сохранении той же функциональности:

document.getElementById('parent').onclick = function(e) { 
    var node = (e.target || e.srcElement), 
     index = node.id; 

    if(lyre[index] === undefined) { return; } 

    lyre[index] = !lyre[index] ? 1 : 0; 

    node.innerHTML = lyre[index]; 
}; 

Где parent это идентификатор некоторого узла в документе, которые разделяют все элементы. Here's a working JSBin, который иллюстрирует концепцию.

Answer 2

Да, можно использовать for, чтобы сделать то, что вы пытаетесь сделать. Хотя это будет не лучше с точки зрения производительности, так как вы выполните немного больше операций, это намного лучше с точки зрения организации кода. В большинстве случаев разница в производительности не будет ощутимой, поэтому я действительно предлагаю вам использовать цикл для этого.

function setEvent(index) { 
    var id = index + 1; 
    document.getElementById(id).onclick=function(){ 
     lyre[index]=Number(!lyre[index]); 
     document.getElementById(id).innerHTML=String(lyre[index]); 
    } 
} 

for (var i = 0, j = lyre.length; i < j; i++) { 
    setEvent(i); 
} 

Answer 3

Когда бы я ни увидел образец, я бы создал в первую очередь функцию. Тогда я бы использовал «для» (см. Другие ответы, как) ... Это сделает мой код хорошо структурированным и простым в обслуживании.

Но, как говорили другие, это не будет лучше с точки зрения производительности.