jQuery plug-in development guide_jquery

So first, let’s take a brief look at the most orthodox jQuery plug-in definition method:

Copy code The code is as follows:

(function ($) { 
$.fn.Plug-in name = function (settings) {                                                //Default parameters 
var defaultSettings = {

                                                                                                                                                                                                                                                                                      /* Merge default parameters and user-defined parameters
settings = $.extend(defaultSettings, settings);

return this.each(function () {                                                                                                                                                                                                                                                                                              
} })(jQuery);



Let’s first look at the first line of code in the template (of course we have to pull out the second half of this line of code and read it together, otherwise the first line will be completely meaningless):

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

})(jQuery);



This line of code is actually used to create an anonymous function. If you don’t understand anonymous functions and closures, you will be very confused about this kind of code, so it is strongly recommended that you read this article [

Talk about JavaScript anonymous functions and closures in detail].

jQuery’s inheritance method $.extend —— $.extend plays a very important role in jQuery plug-in development, which is used to merge parameters.

Copy code The code is as follows: $.fn.tip = function (settings) { 

var defaultSettings = {                                              //Color 

color: 'yellow', 
//delay
timeout: 200 }
/* Merge default parameters and user-defined parameters */
settings = $.extend(defaultSettings, settings);
alert(settings.input);
}



jQuery plugin defines the second way:

Copy code

The code is as follows:

(function ($) {
    //插件定义--更换名字
    $.fn.tabpanel = function (method) {
        var methods = $.fn.tabpanel.methods;
        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 {
 
        }
    }
    //支持的方法
    $.fn.tabpanel.methods =
    {
        //初始化
        init: function (p_options) {
            tabpanelBind(p_options, this);
        },
        add: function (p_options) {
            addTab(p_options, this);
            tabpanelBind(p_options, this);
            // debugger
        }    }
    function add(p_options) {
        var _defaults = {
            id: ""
        }
   
　　　　//内部实现略.........
        return _index;
    }

})(jQuery);

调用  $("#team").tabpanel('add',"");

好了，上面介绍的这2种开发方式都是最常用的，小伙伴们先好好学习下吧，后续我们再介绍的更深入些