前言

在開發過程中，我們經常會使用到外掛，其具有方便靈活的特點，但是如果在市面上找不到自己滿意的外掛，或者想自己封裝一個外掛提供給別人使用時，就需要自己編寫一個jQuery外掛了。
按照功能來分類，外掛可以分為以下三類：

1.封裝物件方法的外掛（就是基於DOM元素的jQuery物件，具有區域性性）
2.封裝全域性函式的外掛（全域性性的封裝）
3.選擇器外掛（類似於.find()）

經過這麼長時間的外掛開發，開發者們逐步約定了一些規則，以解決各種因為外掛導致的錯誤和衝突，包括下面的規則：

1. 外掛名推薦使用jquery.[外掛名].js,以免和其他js檔案或者其他庫相沖突；
2. 區域性物件附加到jquery.fn物件上，全域性函式附加在jquery上；
3. 外掛內部，this指向當前的區域性物件；
4. 可以通過this.each來遍歷所有元素；
5. 所有的方法或外掛都必須用分號結尾，避免出現問題；
6. 外掛應該返回的是jquery物件，以保證可鏈式連綴；
7. 避免外掛內部使用$，如果一定要使用，請傳遞jQuery。

下面我們來自定義開發一個簡單的導航外掛。

外掛開發

首先定義一個導航欄：

<ul class="list">
        <!-- html -->
        <li>導航列表
            <ul class="nav">
                <li
 
>導航列表1</li>
                <li>導航列表1</li>
                <li>導航列表1</li>
                <li>導航列表1</li>
                <li>導航列表1</li>
                <li>導航列表1</li>
            </ul>
        </li>
        <li>導航列表
            <ul
 
 class="nav">
                <li>導航列表2</li>
                <li>導航列表2</li>
                <li>導航列表2</li>
                <li>導航列表2</li>
                <li>導航列表2</li>
                <li>導航列表2</li>
            </ul>
        </li>
        <li>導航列表
            <ul class="nav">
                <li>導航列表3</li>
                <li>導航列表3</li>
                <li>導航列表3</li>
                <li>導航列表3</li>
                <li>導航列表3</li>
                <li>導航列表3</li>
            </ul>
        </li>
        <li>導航列表
            <ul class="nav">
                <li>導航列表4</li>
                <li>導航列表4</li>
                <li>導航列表4</li>
                <li>導航列表4</li>
                <li>導航列表4</li>
                <li>導航列表4</li>
            </ul>
        </li>
        <li>導航列表
            <ul class="nav">
                <li>導航列表5</li>
                <li>導航列表5</li>
                <li>導航列表5</li>
                <li>導航列表5</li>
                <li>導航列表5</li>
                <li>導航列表5</li>
            </ul>
        </li>
    </ul>

然後寫css,給導航欄設定一下樣式：

.list {
    list-style: none;
    padding: 0;
    font-style: 13;
    color: #fff;
    width: 500px;
    margin: 50px auto;
}

.list li {
    float: left;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #333;
    cursor: pointer;
}

接下來開始寫外掛js實現部分，先給導航欄設定樣式和下拉特效：

$(".nav").css({
        'list-style' : 'none' ,
        'margin' : 0,
        'padding' :0,
        'display' : 'none'
    });

    $(".nav").parent().hover(function(){
        $(this).find('.nav').slideDown('normal');
    },function(){
        $(this).find('.nav').slideUp('normal');
    })

注意上面的parent()，因為在使用外掛時，我們不知道外部的情況，所以不能直接指定某個標籤或者類來定位，直接指定父元素是肯定不會出錯的。
到這一步已經基本實現了功能，但是你把滑鼠放到父元素的時候會發現，快速的來回導航切換會導致一個類似”波浪的效果”，使用者體驗並不太好，所以我們需要將導航下拉的特效及時的停止，所以要加一個stop()函式。改變後就是：

$(".nav").css({
        'list-style' : 'none' ,
        'margin' : 0,
        'padding' :0,
        'display' : 'none'
    });

    $(".nav").parent().hover(function(){
        $(this).find('.nav').stop().slideDown('normal'); //加上stop函式
    },function(){
        $(this).find('.nav').stop().slideUp('normal'); //加上stop函式
    })

下面我們將其放入jquery.nav.js中封裝好

;(function ($){  //分號為了防止前面程式碼的干擾
    $.extend({
        'nav':function(){
                $(".nav").css({
                    'list-style' : 'none' ,
                    'margin' : 0,
                    'padding' :0,
                    'display' : 'none'
                });

                $(".nav").parent().hover(function(){
                    $(this).find('.nav').stop().slideDown('normal');
                },function(){
                    $(this).find('.nav').stop().slideUp('normal');
                })
                return this;
        }
    })
})(jQuery);

然後在HTML中引入，並在本來的js中呼叫它

$(function(){
    $.nav();
});

這樣就能實現全域性性的導航列表外掛了

如果要實現區域性性外掛功能，就要稍作修改了

;(function ($){
    $.fn.extend({   //加上fn
        'nav':function(){
                $(this).find(".nav").css({    //改為this
                    'list-style' : 'none' ,
                    'margin' : 0,
                    'padding' :0,
                    'display' : 'none'
                });

                $(this).find(".nav").parent().hover(function(){  //改為this
                    $(this).find('.nav').stop().slideDown('normal');
                },function(){
                    $(this).find('.nav').stop().slideUp('normal');
                })
                return this;   
        }
    })
})(jQuery);

然後在js裡面呼叫它

$(function(){
    $('.list').eq(0).nav();   //eq()表示呼叫第幾個，同時nav()中可以傳參，改變其它屬性
});

以上就是全部的內容了，大家要將自定義外掛的過程瞭解清楚，掌握其規則，在自己開發時避免踩到更多的坑。