Question

I see the following two patterns quite often. What is the difference between the two? When is each appropriate?

$.pluginName = function(){}

and

$.fn.pluginName = function(){}

Answer 1

Very simple:

$.fn.pluginName is a function callable on all jQuery.init* objects. This is useful for making chain-able functions to use with objects:

Example:

$.fn.foo = function(){...};

$('#bar').foo(); 

To continue chaining objects, you need to return another jQuery.init object (could be the original one, or a filtered one):

$.fn.foo = function(){ return this; };

---

$.pluginName is a function callable as $.pluginName(). This is useful for making utility functions, or storing a particular plugin’s default states.

Example:

$.foo = function(){...};

bar = $.foo();

_{*The jQuery factory function (jQuery() or $()) actually returns a new jQuery.init object}