Question

I know $() is the jQuery function… but what does $({}) reference/do? I’m looking at Ben Alman’s code in https://gist.github.com/705311

(function(jQuery){
  var o = jQuery({});
  jQuery.each({ 
    "subscribe" : "bind", 
    "unsubscribe" : "unbind", 
    "publish" : "trigger" 
  }, function ( fn, api ) {
    jQuery[ fn ] = function() {
      o[ api ].apply( o, arguments );
    };
  });
})(jQuery);

I’m trying to figure out how this code does what it does. Can someone break it down? Also, what is the jQuery.apply() method? I don’t see it in the jQuery docs – I can only find a 4 year old jQuery apply() plugin, which I doubt is in core now.

There’s a newer, less complicated version at https://gist.github.com/661855, but I’m more curious what/how the 0.X version of this code even worked.

..edit..
I realize that $({}) is an empty object wrapped in jQuery. The question is, why do it, and how does he then end up having created $.subscribe(), $.unsubscribe(), and $.publish() from this tiny snippet of code, especially the o[ api ].apply( o, arguments ); bit?

Answer 1

This code creates an object to use for the observer pattern. Here’s an explanation line by line:

// opening a self-executing anonymous function closure
// assigning global variable jQuery (see last line)
// to local argument jQuery (usually this would be $)
(function(jQuery){

  // creating a jQuery selector object to access the available methods
  // typeof $.unbind == 'undefined'
  // typeof $({}).unbind == 'function'
  // And more importantly this new object will be the container
  // for our observer pattern (see below)
  var o = jQuery({});

  // iterating over an object with new method keys to old method values
  // creating syntactic sugar for an observer pattern (footnote 1)
  jQuery.each({ 
    "subscribe" : "bind", 
    "unsubscribe" : "unbind", 
    "publish" : "trigger" 

  // here fn will be the the new method name and api will be the old one
  }, function ( fn, api ) {

    // a property of the jQuery namespace is created with the new method name
    jQuery[ fn ] = function() {

      // which calls the old method applying given arguments (footnote 2)
      // to our new observer container object
      o[ api ].apply( o, arguments );

    };
  });
})(jQuery);

footnote 1: see http://msdn.microsoft.com/en-us/scriptjunkie/hh201955.aspx

footnote 2: see http://odetocode.com/blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx