Custom jQuery plugin (1): Custom jquery plugin

Custom jQuery plugin (1): Custom jquery plugin
Custom jQuery plug-in (1)

Although there are a large number of plug-ins available for us to choose from, in the actual development process, using other plug-ins will inevitably lead to problems, such

• The plug-in is powerful, and the number of lines of code is also surging, but we only use a small part of it.
• Using other people's plug-ins makes it hard to understand other people's code, especially compressed into min. js, which brings serious problems for later maintenance and demand changes.
• It is not that easy to further develop existing plug-ins.
• Force Installation

Therefore, it is necessary to learn about jQuery plug-in development.

Type of custom plug-in

There are two types of custom plug-ins (I guess)

1. Class-level plug-ins

Class-level plug-ins are relatively simple.$.extend()Directly add a static method to jQuery.$.extend()The call method is shown in the following figure:
$.ajax(),$.trim(),$.each().

    <script type="text/javascript">        $.extend({            pluginName: function(str) {                str = (str ? str : 'helloWorld');                alert(str);            }        })        $.pluginName();         $.pluginName('helkyle');     </script>

Two alert events will pop up in the window. Class-level plug-ins are usually suitable for encapsulating methods. More common jQuery plug-ins are object-level plug-ins.

2. Object-level plug-ins

The method of calling an object-level plug-in is to first obtain the object through the jquery selector and add a method to the object, and then encapsulate the method into a plug-in. This plug-in is widely used and easy to use. Shape:

    $("selector").pluginName({                option1: "option1",                 option2: "option2",                 ...    });

The plugin is about long.

    $.fn.pluginName = function(options) {        you code...    }

Our focus is on Object-level plug-in development. We will add a complete plug-in case later (if possible)

Key Points of plug-in development

• The naming rule is usually jQuery. pluginName. js, and the compressed file is jQuery. pluginName. min. js.
• To avoid other code conflicts, jQuery is usually passed as a function parameter.

    (function($) {            your code...        })(jQuery);

• Generally, a semicolon ';' is added before the plug-in starts. The purpose of this operation is to avoid an error when the ';' is not added to the last statement of other files.

    ;(function($) {            your code...        })(jQuery);

• To ensure chained calling, we need the plug-in itself to put back a jQuery object.

    ;(function($) {        $.fn.pluginName = function(options) {            return this...;        }       })(jQuery);

• To avoid the use of class names during user calls.className(A collection may be uploaded). We need to do one more step.

    ;(function($) {        $.fn.pluginName = function(options) {            return this.each(function() {                your code...            });        }       })(jQuery);

• To avoid namespace pollution, it is usually shown that you define a global variable, while others define a variable with the same name during development, which may cause a big problem accidentally, therefore, the plug-in is replaced with an anonymous closure.

    ;(function($) {        var Plugin = function(options) {        }        Plugin.prototype = {            fun1: function() {            },            fun2: function() {            }            your code ...        }        $.fn.pluginName = function(options) {            return this.each(function() {                return new Plugin(options);            });        }       })(jQuery);

• Generally, the default parameters are configured for the plug-in. After the code is executed, this will be configured. defaults and options are merged. If the merging rule is set to options, the value in defaults is replaced. If only the part value is passed, only the part is replaced, and the other part is used the value of defaults, the final merged result is sent to the anonymous variable '{}' and passed to this. options to ensure that the value of ults is not changed.

    ;(function($) {        var Plugin = function(options) {            this.defaults = {            'color': 'red',            'fontSize': '12px',            'textDecoration': 'none'            },           this.options = $.extend({}, this.defaults, options)        }        Plugin.prototype = {            fun1: function() {            },            fun2: function() {            }            your code ...        }        $.fn.pluginName = function(options) {            return this.each(function() {                return new Plugin(options);            });        }       })(jQuery);

Write so much for the moment, because I am afraid that I will forget it, so it is quite cool to write ~~~