Detailed tutorial on jQuery plug-in development

Extending jQuery plug-ins and methods is very powerful and can save a lot of development time. This article will outline the basics, best practices, and common pitfalls of jQuery plugin development.

1. Getting started

Writing a jQuery plug-in starts by adding a new function attribute to jQuery.fn. The name of the object attribute added here is the name of your plug-in:

Copy the code The code is as follows:

jQuery.fn.myPlugin = function(){

 //Your own plug-in code

};

Where is the $ symbol that users like so much? It still exists, but in order to avoid conflicts with other JavaScript libraries, it is better to pass jQuery to a self-executing closed program, where jQuery is mapped to the $ sign, so as to avoid the $ sign being overwritten by other libraries.

Copy code The code is as follows:

(function ($) {
 $.fn .my​​​Plugin = function () {
             //Your own plug-in code
      };
})(jQuery); Use the $ symbol to represent jQuery functions. 

2. Environment

Now, we can start writing the actual plug-in code. However, before that, we must have an idea of the environment in which the plug-in is located. In the scope of the plug-in, the this keyword represents the jQuery object that the plug-in will execute. A common misunderstanding is easy to occur here, because in other jQuery functions that contain callbacks, the this keyword represents the native DOM element. This often causes developers to mistakenly wrap the this keyword in jQuery unnecessarily, as shown below.

Copy code The code is as follows:

(function ($) {

 $.fn .my​​​Plugin = function () {

                  //There is no need to wrap this in a $ sign like $(this), because this is already a jQuery object                                  . this) is equivalent to $($('#element'));

 this.fadeIn('normal', function () {

 A DOM element

 });

 };
})(jQuery);

$('#element').myPlugin();

3. Basic knowledge

Now that we understand the basics of jQuery plugins, let’s write a plugin that does a few things.

Copy code The code is as follows:(function ($) {

 $.fn.maxHeight = function () {

 var max = 0;

 this.each(function () {
 max = Math.max(max, $ (this).height());
      });

                                                                     ; div').maxHeight(); //Return the height of the div element with the largest height 

This is a simple plug-in that uses .height() to return the height of the div element with the largest height on the page. 

4. Maintain Chainability

Many times the intent of a plugin is simply to modify the collected elements in some way and pass them to the next method in the chain. This is the beauty of jQuery's design and one of the reasons jQuery is so popular. Therefore, to maintain a plugin's chainability, you must ensure that your plugin returns the this keyword.

Copy code

The code is as follows:

(function ($) {

 $.fn.lockDimensions = function (type) {

 return this.each(function () {

 var $this = $(this);

 if (!type || type == 'width') {
 $this.width($this.width());
 }

 if (!type || type == 'height') {
 $this.height($this.height());
 }

 });

 };
})(jQuery);

$('div').lockDimensions('width').CSS('color', 'red');

Since the plugin returns this keyword, it maintains chainability so that elements collected by jQuery can continue to be controlled by jQuery methods such as .css. Therefore, if your plugin does not return an intrinsic value, you should always return the this keyword within its scope. Additionally, you might deduce that parameters passed to a plugin will be passed within the plugin's scope. Therefore, in the previous example, the string 'width' becomes a type parameter of the plugin.

5. Default values and options

For more complex plug-ins that provide many customizable options, it is best to have one that can be expanded when the plug-in is called. Default setting (by using $.extend). So instead of calling a plugin with a bunch of parameters, you can call it with an object parameter containing the settings you want to override.

Copy code The code is as follows:

(function ($) {

 $.fn.tooltip = function (options) {

 //Create some default values ​​and extend any provided options
 var settings = $.extend({
 'location': 'top ',
                                                                                                                                                                                                                                                              . >
 });

 };
})(jQuery);

$('div').tooltip({
 'location': 'left' 
});



In this example, when calling the tooltip plug-in, the location option in the default settings is overwritten, and the background-color option remains at its default value, so the final called setting value is: 

Copy code

The code is as follows:{ 'location': 'left', 'background-color': ' blue'}

This is a very flexible way to provide a highly configurable plugin without requiring the developer to define all available options. 

6. Namespace

Properly naming your plugin is a very important part of plugin development. With the right namespace, you can guarantee that your plugin will have a very low chance of being overwritten by other plugins or other code on the same page. Namespaces also make your life as a plugin developer easier because it helps you better keep track of your methods, events, and data.

7. Plug-in method

Under no circumstances should a single plugin have multiple namespaces within the jQuery.fnjQuery.fn object.

Copy code

The code is as follows:(function ($) { $.fn.tooltip = function (options) { .fn.tooltipHide = function () {

// bad

};
$.fn.tooltipUpdate = function (content) {
// !!!
};

})(jQuery);

This is discouraged because $.fn clutters the $.fn namespace. To solve this problem, you should collect all the plugin's methods in the object text and call them by passing the string name of the method to the plugin.

Copy code The code is as follows:

(function ($) {

 var methods = {
 init: function (options) {
 },
 show: function () // is
 },
 hide: Function () {
 // Good 
}, 
 Update: Function (Content) {
 // !!! 
} 
}; 
 
 $. fn.tooltip = function (method) {

                                                                                                                                                                                                                 // Method call (arguments, 1));
      } else if (typeof method === 'object' || !method) {
               return methods.init.apply(this, arguments); 🎜>                                                                                                                                                         >//Call the init method
$('div').tooltip();

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

//Call the hide method
$('div').tooltip('hide');

//Call the Update method
 $('div').tooltip('update', 'This is the new tooltip content!');



This type of plugin architecture allows you to encapsulate all methods in a parent package and call them by passing the method's string name and additional parameters required by this method. This type of encapsulation and architecture is standard in the jQuery plug-in community, and it is used by countless plug-ins, including plug-ins and widgets in jQuery UI. 



8. Events 


A little-known function of the bind method allows binding event namespaces. If your plugin binds an event, a good practice is to namespace this event. This way, when you unbind, you won't interfere with other events of the same type that may already be bound. You can do this by appending the namespace to the event you need to bind via '.'. 

Copy code

The code is as follows:

(function ($) {

    var methods = {
        init: function (options) {

            return this.each(function () {
                $(window).bind('resize.tooltip', methods.reposition);
            });

        },
        destroy: function () {

            return this.each(function () {
                $(window).unbind('.tooltip');
            })

        },
        reposition: function () {
            //...
        },
        show: function () {
            //...
        },
        hide: function () {
            //...
        },
        update: function (content) {
            //...
        }
    };

    $.fn.tooltip = function (method) {

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

$('#fun').tooltip();
//一段时间之后... ...
$('#fun').tooltip('destroy');

在这个例子中，当tooltip通过init方法初始化时，它将reposition方法绑定到resize事件并给reposition非那方法赋予命名空间通过追加.tooltip。稍后，当开发人员需要销毁tooltip的时候，我们可以同时解除其中reposition方法和resize事件的绑定，通过传递reposition的命名空间给插件。这使我们能够安全地解除事件的绑定并不会影响到此插件之外的绑定。

九、数据

通常在插件开发的时候，你可能需要记录或者检查你的插件是否已经被初始化给了一个元素。使用jQuery的data方法是一个很好的基于元素的记录变量的途径。尽管如此，相对于记录大量的不同名字的分离的data, 使用一个单独的对象保存所有变量，并通过一个单独的命名空间读取这个对象不失为一个更好的方法。

复制代码代码如下:

(function ($) {

    var methods = {
        init: function (options) {

            return this.each(function () {

                var $this = $(this),
                    data = $this.data('tooltip'),
                    tooltip = $('

', {
                        text: $this.attr('title')
                    });

                // If the plugin hasn't been initialized yet
                if (!data) {

                    /*
                     Do more setup stuff here
                     */

                    $(this).data('tooltip', {
                        target: $this,
                        tooltip: tooltip
                    });

                }
            });
        },
        destroy: function () {

            return this.each(function () {

                var $this = $(this),
                    data = $this.data('tooltip');

                // Namespacing FTW
                $(window).unbind('.tooltip');
                data.tooltip.remove();
                $this.removeData('tooltip');

            })

        },
        reposition: function () {
            // ...
        },
        show: function () {
            // ...
        },
        hide: function () {
            // ...
        },
        update: function (content) {
            // ...
        }
    };

    $.fn.tooltip = function (method) {

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

Encapsulating data in an object through a namespace makes it easier to read all plugin properties from a centralized location.

10. Summary and best practices

Writing jQuery plug-ins allows you to make libraries that integrate the most useful functions into reusable code, saving developers time and making development more efficient. When developing jQuery plugins, keep in mind:

1. Always wrapped in a closed plug-in:

Copy code

The code is as follows: (function ($) {/* plugin goes here */})(jQuery);2. Do not redundantly wrap this keyword within the function scope of the plug-in

3. Unless The plugin returns a specific value, otherwise the this keyword is always returned to maintain chainability.

Pass an expandable default object parameter instead of a large number of parameters to the plug-in. 
Do not name different methods multiple times in a plug-in. 
Always namespace methods, events and data. 

Detailed tutorial on jQuery plug-in development_jquery