jQuery 插件开发指南_jquery

那么首先我们来简单的看一下最正统的 jQuery 插件定义方式：

复制代码 代码如下:

(function ($) {    
$.fn.插件名 = function (settings) {        
//默认参数        
var defaultSettings = {
 
        }         /* 合并默认参数和用户自定义参数 */       
 
settings = $.extend(defaultSettings, settings);
 
return this.each(function () {             //代码         });   //插件在元素内多次出现
 
} })(jQuery);

 
先来看模板中的第一行代码（当然我们要把这一行代码的后半部分给揪出来一起看，不然第一行就完全无意义了）：

复制代码 代码如下:

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

 这行代码其实是用于创建一个匿名函数。如果你对匿名函数和闭包不了解，将会对这种代码非常疑惑，那么强烈建议您阅读【详谈JavaScript 匿名函数及闭包】这篇文章。

jQuery 的继承方法 $.extend —— $.extend 在jQuery 插件开发中有个很重要的作用，就是用于合并参数。

复制代码 代码如下:

$.fn.tip = function (settings) {    
var defaultSettings = {           
//颜色    
color: 'yellow',       
//延迟       
timeout: 200     }
 /* 合并默认参数和用户自定义参数 */  
settings = $.extend(defaultSettings, settings);   
alert(settings.input);
}

 jQuery 插件定义第二种方式：

复制代码 代码如下:

（函数（$）{
    // 插件定义--更换名称
    $.fn.tabpanel = 函数（方法）{
        var 方法 = $.fn.tabpanel.methods;
        if (方法[方法]) {
            返回方法[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            returnmethods.init.apply(this,arguments);
        } 其他 {
 
        }
    }
    //支持的方法
    $.fn.tabpanel.methods =
    {
        //初始化
        init: 函数 (p_options) {
            tabpanelBind(p_options, this);
        },
        添加：函数（p_options）{
            addTab(p_options, this);
            tabpanelBind(p_options, this);
            // 调试器
        }    }
    函数添加（p_options）{
        var _defaults = {
            id：“”
        }
   
　　　　// 内部实现策略........................
        返回_index;
    }

})(jQuery);

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

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