到处绑定匿名函数

Question

我通常编写如下所示的代码（但具有更多处理程序）。

$(document).ready(function() {

    $("#next").click(function() {
        doStuff();
    });

    $("#prev").click(function() {
        doSomeOtherStuff();
    });

    $("#link").hover(function() {
        doSomeTotallyOtherStuff();
    });
});

这是最好的方法吗？我应该采取不同的做法吗？ Paul Irish 的演示表明这是一个坏主意。这是真的吗？

Answer 1

我们喜欢使用对象字面量模式和命名函数。我会这样重写你的例子：

$(function() {
  Example.somegrouping.init();
});

var Example.somegrouping = {
  init: function() {
    // set up listeners
    $("#next").click(this.onNextClick);
    $("#prev").click(this.onPrevClick);
    $("#link").hover(this.onLinkHover);
  },
  onNextClick: function() {
    // do some stuff
  },
  onPrevClick: function() {
    // do some stuff
  },
  onLinkHover: function() {
    // do some stuff
  }    
};

为什么？嗯，它使得在其他地方重用事件处理程序变得更容易，而无需求助于触发器。函数的命名可以帮助自我记录您的代码。测试/调试更容易。对象字面量仅向全局命名空间添加一个条目，因此与页面可能使用的其他脚本发生冲突的可能性很小。

Answer 2

以旧的无聊方式定义函数很有用的原因之一是您可以在堆栈跟踪中查看名称。

$(function() {
  function nextClickHandler() { ... };

  $('#next-button').click(nextClickHandler);
});

在函数表达式中使用函数名是不安全的：

  $('#next-button').click(function nextClickHandler() { // DO NOT DO THIS
  });

这有点不幸，但就是这样。

Answer 3

只要您不在循环或其他运行多次的代码（即重复的函数调用）中执行此操作，这应该没问题。否则，一个匿名函数和一个命名函数之间没有太大区别。当你有 100 个相同的匿名函数时就会出现问题。

ex:

$("#someID").click(function(){})

可以，

for (var i in somelistofIDs) {
    $(i).click(function(){})
}

但不行，因为您创建了 100 个匿名函数而不是一个命名函数。

当然，编辑

，如果您将单个函数调用包装在闭包中，那么您就做错了，您可以只传递函数本身。