jQuery 插件開發(fā)指南

更新時間：2014年11月14日 11:14:06 投稿：hebedich

jQuery憑借其簡潔的API，對DOM強(qiáng)大的操控性，易擴(kuò)展性越來越受到web開發(fā)人員的喜愛，經(jīng)常有人詢問一些技巧，因此干脆寫這么一篇文章給各位jQuery愛好者，算是拋磚引玉吧。

那么首先我們來簡單的看一下最正統(tǒng)的 jQuery 插件定義方式：

(function ($) {     

$.fn.插件名 = function (settings) {         

//默認(rèn)參數(shù)         

var defaultSettings = {

        }         /* 合并默認(rèn)參數(shù)和用戶自定義參數(shù) */        

settings = $.extend(defaultSettings, settings);

return this.each(function () {             //代碼         });   //插件在元素內(nèi)多次出現(xiàn)

} })(jQuery);

先來看模板中的第一行代碼（當(dāng)然我們要把這一行代碼的后半部分給揪出來一起看，不然第一行就完全無意義了）：

復(fù)制代碼代碼如下:

(function ($) {

})(jQuery);

這行代碼其實是用于創(chuàng)建一個匿名函數(shù)。如果你對匿名函數(shù)和閉包不了解，將會對這種代碼非常疑惑，那么強(qiáng)烈建議您閱讀【詳談JavaScript 匿名函數(shù)及閉包】這篇文章。

jQuery 的繼承方法 $.extend —— $.extend 在jQuery 插件開發(fā)中有個很重要的作用，就是用于合并參數(shù)。

復(fù)制代碼代碼如下:

$.fn.tip = function (settings) {     

var defaultSettings = {            

//顏色     

color: 'yellow',        

//延遲        

timeout: 200     }

 /* 合并默認(rèn)參數(shù)和用戶自定義參數(shù) */   

settings = $.extend(defaultSettings, settings);    

alert(settings.input); <br>}

jQuery 插件定義第二種方式：

復(fù)制代碼代碼如下:

(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>　　　　//內(nèi)部實現(xiàn)略.........<br>        return _index;

    }

<br>})(jQuery);<br><br>調(diào)用  $("#team").tabpanel('add',"");