jQuery object literal vs jQuery plugin notation

Question

I enjoy writing most of my functionality using object literal notation and wondered what other people thought of it in comparison to jQuery.fn plugin notation?

The issue I find with writing code as a jquery 'plugin' is that you then don't get a public 'API' to work with. Take this crude popup box example:

$.fn.popup = function() {

  // insert #popupContainer

  this.each(function() {

    $(this).click(function() {
      $('#popupContainer').show();
    });
  });

});

// DOM ready
$('a.showPopup').popup();

The popup will show when the a.showPopup anchor is clicked. There's no other interface to show the popup without querying the DOM for #popupContainer and manually showing it.

This is why I like object literals as they provide public methods that can be called whenever. Take this example:

var popup = {
   init: function() { 
        // insert #popupContainer
        // bind this.show to $(a.showPopup)
   }
   show: function() { $('#popupContainer').show(); }
}

This is nice because it allows me to call popup.show() whenever I want, I don't have to rely a binding I've made earlier.

This example is a bit rubbish but I hope you can see the idea I'm getting at and its impact when the functionality is more complex.

So what do you prefer? and is there anything I'm missing with jQuery plugins?

I'd be interested to hear any thoughts?

Answer 1

Can you not simply insert the "#popupContainer" element the first time you call popup() in your first example? That way you don't have to call init at all.

Also, in jQuery the standard way to add "global" API functions is to add them to the $ object directly:

(function($) {

    $.myPlugin = function() {
        alert("1");
    }

    $.fn.myPlugin = function() {
        alert(2);
    }

})(jQuery);

So now you can do the following:

$.myPlugin(); // pops up "1"

$("whatever").myPlugin(); // pops up "2"

Answer 2

Another under-utilized option is custom events, for example:

$.fn.popup = function() {    
  // insert #popupContainer    
  return this.each(function() {    
    $(this).bind({
      "open.popup": function() { $('#popupContainer').show(); },
      "click": function() { $(this).triggerHandler("open.popup"); }          
    });
  });    
});

This may not be a good example, but you could do for example:

$('a.showPopup').popup(); //initialize plugin
$('a.showPopup').trigger("open.popup"); //open the popup
$('a.showPopup').click(); //less explicit, but works...no need for the open bind