jQuery 插件开发解析

浏览数：17 / 时间：2015年06月09日

那么首先我们来简单的看一下最正统的 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); <br>}

jQuery 插件定义第二种方式：

(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: ""
        }
    <br>　　　　//内部实现略.........<br>        return _index;
    }
<br>})(jQuery);<br><br>调用  $("#team").tabpanel(‘add‘,"");