jQuery 外掛程式開發指南，jquery開發指南

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); <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',"");

好了，上面介紹的這2種開發方式都是最常用的，小夥伴們先好好學習下吧，後續我們再介紹的更深入些