1：jQuery外掛開發分為類級別開發和物件級別開發，因為類級別開發在真實專案中幾乎不用，下面只對象級別進行探究。



a ， 首先準備好一個架子，如下：

;$(function($){

})(jQuery);
b， 這個架子是你編寫外掛程式碼要寫入的空間，下面簡單解釋一下這個架子：

1）在jQuery環境下封裝自己的外掛，首先為避免與其他庫的衝突，需要在外掛的後面傳一個jQuery引數進去，對應的函式裡面的引數寫入$

2）未避免出現問題，需在外掛的前後加入分號（分號的增加並不會影響程式的執行）



2：再上一個架子



複製程式碼
;(function($){
    $.fn.tab = function
 
(options){

        var defaults = {
            //各種引數，各種屬性
        }


        var options = $.extend(defaults,options);

        this.each(function(){

            //各種功能
        });

        return this;
    }



})(jQuery);
複製程式碼
這個架子是個什麼東西呢？原來他是jQuery官方提供的一個標準化的開發模式，這裡簡單地介紹一下，不作詳要說明，細節有興趣的童鞋可以自己百度一下。

$.fn.tab  這個tab是你這個功能外掛的名字，可任意改變名字，你自己知道就好了。



var
 
 options = $.extend(defaults,options);  這個是利用extend方法把 defaults物件的方法屬性全部整合到 options裡，

也就是options繼承了defaults物件的方法以及屬性。這個defaults和options名字是可以隨意更改的，只要是滿足js的命名規範。



this.each(function(){});就不介紹了，下面會通過一個例項表現它，這裡你只需要知道他是實現功能程式碼的地方就可以啦~

至於return this; 就留到例項結束後面再說，這樣做肯定是有原因的啦，別心急~



3：心細的girls or boys 肯定知道這個例項是什麼啦，沒錯，是tab選項卡~

下面以tab選項卡的方式來explore這個外掛的編寫。



a: 先備好html,

複製程式碼
<div class
 
="tab">
　　<ul class="tab_nav">
　　　　<li class="current">html</li>
　　　　<li>css</li>
　　　　<li>js</li>
　　</ul>

　　<div class="tab_content">
　　　　<div style="display:block;">html</div>
　　　　<div>css</div>
　　　　<div>js</div>
　　</div>
</div>

複製程式碼
b，頁面是這樣的：



c，ok，頁面已經準備就緒，現在可以來寫外掛了,先上程式碼

複製程式碼
;(function($){
    $.fn.tab = function(options){

        var defaults = {
            //各種引數，各種屬性
        }


        var options = $.extend(defaults,options);

        this.each(function(){

            //各種功能  //可以理解成功能程式碼
            var _this = $(this);
            _this.find('.tab_nav>li').click(function(){
                $(this).addClass('current').siblings().removeClass('current');

                var index = $(this).index();
                _this.find('.tab_content>div').eq(index).show().siblings().hide();

            });


        });

        return this;
    }



})(jQuery);
複製程式碼


d，這個時候只需要看this.each下的功能程式碼，學過jQuery的同學都知道程式碼實現，這裡主要就呼叫外掛和配置引數這一塊來進行探究。



4，在html程式碼裡我們只需要：

<script>
        $(function(){
            $('.tab').tab();
        });
</script>
a，找到外部容器，並呼叫你所寫的tab方法（就是你所寫的外掛名字）：

$.fn.tab = function(options){}


b,敏感的童鞋肯定發現了功能程式碼裡面的class元素以及事件是被寫死的，要是我們在另外一個頁面寫的class和事件需求和這個外掛的不同，

除了改外掛原始碼之外這個外掛就沒法用用了，作為可擴充套件性的外掛我們怎麼可以把它寫死呢？嗯哼？當然不可以啦~



好，就讓我們一起來解決它吧：

1）請看下圖：





2) 沒錯，就在這裡配置它，我們可以看到哪些東西被寫死了呢？下圖：



3） 現在我們可以在default物件裡面繪畫你的小空間啦~見下圖：





3）有的同學可能會疑惑為什麼用options呼叫呢？其實上面已經說過啦，因為extends將default物件的屬性以及方法都整合到了options裡。

這時候只需要用options呼叫就可以了。

4）同樣的如果需求是把click事件改為mouseover事件,此時我們需要用到on() or bind() ,這樣就方便我們改事件引數啦，如下：

_this.find(options.tabNav).on('click',function(){}
此時只要在default裡寫入相應的程式碼

eventType:'click'
而後同樣的變化

_this.find(options.tabNav).on(options.eventType,function(){}
5）此時因為需求是mouseover，這是就不需要改外掛原始碼啦，直接在html裡的js程式碼（or你自己的js總檔案裡）進行相應的變化就ok啦，如下：

1
2
3
4
5
6
7
8
9
<script>
        $(function(){
            $('.tab').tab({
                currentClass:'current123',
                eventType:'mouseover'
                                .....
            });
        });
</script>
*此時在這裡更改class和事件就很方便啦，溫馨提示，class改變雖好，可別忘了改對應的css樣式名字哦，要成雙成配呢~



好了，到這裡基本上就要結束啦，哦，對了，return this;還沒說呢,寶寶是不會忘記的~

5：jQuery最強大的特性之一莫過於鏈式操作啦，此時如果你在$('.tab').tab()後面追加操作，你會發現無法實現，如下:

$('.tab').tab().find('.tab_nav>li').css('background','red');
但是當你return this把物件返回出去的時候你會發現又重新實現了~