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種開發方式都是最常用的，小夥伴們先好好學習下吧，後續我們再介紹的更深入的一些