I am just starting out with writing jQuery plugins. I wrote three small plugins but I have been simply copying the line into all my plugins without actually knowing what it means. Can someone tell me a little more about these? Perhaps an explanation will come in handy someday when writing a framework 🙂

What does this do? (I know it extends jQuery somehow but is there anything else interesting to know about this)

(function($) {

})(jQuery);

What is the difference between the following two ways of writing a plugin:

Type 1:

(function($) {
    $.fn.jPluginName = {

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

Type 2:

(function($) {
    $.jPluginName = {

        }
})(jQuery);

Type 3:

(function($){

    //Attach this new method to jQuery
    $.fn.extend({ 

        var defaults = {  
        }  

        var options =  $.extend(defaults, options);  

        //This is where you write your plugin's name
        pluginname: function() {

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

I could be way off here and maybe all mean the same thing. I am confused. In some cases, this doesn’t seem to be working in a plugin that I was writing using Type 1. So far, Type 3 seems the most elegant to me but I’d like to know about the others as well.

6 Answers
6

Leave a Reply

Your email address will not be published. Required fields are marked *