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是文档中所有元素共享的某个节点的ID。 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

每当我发现一个模式时，我首先会创建一个函数。然后我会使用“for”（参见其他答案）...这将使我的代码结构良好，易于维护。

但是，正如其他人所说，在性能方面它不会更好。

使用for循环更有效吗？

3 个答案: