Understanding the Enigmatic jQuery IIFE Pattern

Introduction

When delving into jQuery plugin development, one often encounters a cryptic code snippet:

(function($) {})(jQuery);

This enigmatic expression holds great significance in the realm of jQuery plugins. Let's unravel its purpose and explore the nuances of plugin construction.

The Execution of a Function with an Argument

The code block essentially executes an anonymous function that receives the jQuery object as an argument. This technique, known as an Immediately Invoked Function Expression (IIFE), serves multiple purposes:

• Immediately executes the specified code without polluting the global scope.
• Allows for the encapsulation of local variables and function definitions.
• Provides a clean way to provide arguments to the function upon execution.

Comparison of Plugin Writing Styles

Beyond this fundamental use, there are several approaches to writing jQuery plugins. Let's examine the differences between three common styles:

Type 1: Extending the jQuery Selector

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

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

This approach extends the jQuery selector with a custom method, but it's not technically a plugin. It adds new functionality to the existing methods of jQuery's function prototype.

Type 2: Extending the jQuery Core

(function($) {
    $.jPluginName = {

        }
})(jQuery);

Similar to Type 1, this does not create a plugin but extends the jQuery core. It's useful for adding new traversal methods to jQuery's arsenal.

Type 3: Extending the Prototype of jQuery's Function

(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);

Type 3 is the preferred method for creating jQuery plugins. It allows for the creation of custom methods that can be called on any jQuery selector. By extending the prototype of jQuery's function, the plugin's functionality becomes accessible through all selector instances.

The above is the detailed content of Why Use an IIFE When Developing jQuery Plugins?. For more information, please follow other related articles on the PHP Chinese website!