Question

我通常编写看起来像这样的代码（但有更多的处理程序）。

$(document).ready(function() {

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

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

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

这是最好的方法吗？我应该采用不同的方式吗？ Paul Irish's presentation表明这是一个坏主意。这是真的吗？

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

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

例如：

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

没关系，

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

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

修改

当然，如果你在一个闭包中包装一个函数调用，你做错了，你可以自己传递函数。

Answer 3

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

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

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

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

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

这有点不幸，但你去了。

将匿名函数绑定到所有地方

3 个答案: