Question

I was looking at the jQuery plugins for Twitter Bootstrap and saw that they were all defined using a pattern like this:

!function($) {
  // code here

  // plugin definition here

} ( window.jQuery || window.ender);

This looks like a variation of the immediately executing anonymous function (anonymous closure):

(function($) {
  // code here

}(jQuery));

Can someone explain what the Bootstrap variation does and why? Is this a better way to write an anonymous closure?

Thanks!

Answer 1

//  |---1. makes the function as part of an expression 
//  |                             so it can be immediately invoked
//  v
    !function($) {
//            ^
//            |___4. references what was passed, window.jQuery or window.ender

      // code here

      // plugin definition here

    } ( window.jQuery || window.ender); // <---2. immediately invoke the function 
//         ^                ^
//         |________________|_______3. pass window.jQuery if it exists, 
//                                                      otherwise window.ender