Binding anonymous functions all over the place

I generally write code that looks like this (but with many more handlers).

$(document).ready(function() {

    $("#next").click(function() {
        doStuff();
    });
开发者_C百科
    $("#prev").click(function() {
        doSomeOtherStuff();
    });

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

Is this the best way of doing this? Should I do it differently? Paul Irish's presentation suggests it's a bad idea. Is that true?

We like to use the object literal pattern and named functions. I'd rewrite your example like this:

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

Why? Well, it makes it easier to reuse event handlers in other places without resorting to triggers. The naming of the function can help self-document your code. Testing/debugging is easier. The object literal only adds one entry to the global namespace, so there is little chance for collisions with other scripts your page might be using.

One reason that it's useful to define your functions the old boring way is that you get names to look at in stack traces.

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

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

It's not safe to use a function name in a function expression:

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

which is sort-of unfortunate but there you go.

This should be fine as long you don't do it in a loop or some other code that runs more than once (i.e. a recurring function call). Otherwise there's not much difference between one anon function and one named function. it's when you have 100 identical anonymous functions that's a problem.

ex:

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

is okay,

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

is not, because you've created 100 anonymous functions instead of one named function.

EDIT

of course, if you're wrapping a single function call in a closure, you're doing it wrong, you can just pass the function itself.