Questions about jQuery patterns

So i decided to finally learn something about jQuery and as i needed a simple function for one of my projects, i started to search for a good pattern.

I began with the official guide but soon found many other possible templates. I will reference two of them to ask my questions:

First one

Second one

The first pattern seems to be a lot more cleaner to me, i like the idea of the namespace very much. But, how is this used? Do i write my whole functions as methods of the namespace, then calling all of them in the init() and finally just call this one method init() in the IIFE, or should i call the necessary methods directly in the IIFE?

I feel like this question is very idiotic, but i just can't understand the usage.

The second pattern i even more complicated to me. Have a look at this:

;(function ( $, window, document, undefined ) {
    //...
})( jQuery, window, document );

What are all these parameters, where do i set them and why are they needed? What is the disadvantage of the wrapper in the first sample?

The diversity of possibilities is overwhelming, i don't know where to start or how to figure ot the right thing for me.

Upvotes: 1

Answers (3)

Jai

Reputation: 74738

From the Docs of Plugins/Authoring - jQuery Wiki

To write a jQuery plugin, start by adding a new function property to the jQuery.fn object where the name of the property is the name of your plugin:

jQuery.fn.myPlugin = function() {
  // Do your awesome plugin stuff here
};

The above one is the simplest of the plugin making. Although there is a specific steps to follow, using a closure is the best practice to avoid any $ dollar sign conflict with any other libraries like mootools, prototype etc.

To make sure that your plugin doesn't collide with other libraries that might use the dollar sign, it's a best practice to pass jQuery to an IIFE (Immediately Invoked Function Expression) that maps it to the dollar sign so it can't be overwritten by another library in the scope of its execution.

 (function( $ ) {
   $.fn.myPlugin = function() {
    // Do your awesome plugin stuff here
   };
})(jQuery);

Now within that closure, we can use the dollar sign in place of jQuery as much as we like.

Namespacing :

Properly namespacing your plugin is a very important part of plugin development. Namespacing correctly assures that your plugin will have a very low chance of being overwritten by other plugins or code living on the same page. Namespacing also makes your life easier as a plugin developer because it helps you keep better track of your methods, events and data.

Plugin Methods

(function( $ ){
  $.fn.tooltip = function( options ) { 
    // THIS
  };
  $.fn.tooltipShow = function( ) {
    // IS
  };
  $.fn.tooltipHide = function( ) { 
    // BAD
  };
  $.fn.tooltipUpdate = function( content ) { 
    // !!!  
  };
})(jQuery);

This is a discouraged because it clutters up the $.fn namespace. To remedy this, you should collect all of your plugin's methods in an object literal and call them by passing the string name of the method to the plugin.

 (function( $ ){
     var methods = {
        init : function( options ) { 
              // THIS 
        },
        show : function( ) {
              // IS
        },
        hide : function( ) { 
              // GOOD
        },
        update : function( content ) { 
              // !!! 
        }
     };

  $.fn.tooltip = function( method ) {
   // Method calling logic
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    
   };
 })( jQuery );

// calls the init method
 $('div').tooltip(); 

 // calls the init method
 $('div').tooltip({
    foo : 'bar'
 });

Upvotes: 0