jquery外掛開發大概有三種方式:
1,$.extend()-在jquery名稱空間即jquery本身上新增靜態方法;呼叫,例如:$.myPlugin();而非$('ele').myPlugin();
2,$.fn.extend()-

3,$.widget()-

$.extend({
    createNum:function(name){
        return 'hello '+(name?name:'andy');
    }
});

console.log($.createNum());//hello andy
console.log($.createNum('jack'));// hello jack
 

html:

    <div id="ex-div">
        <p><b>劉德華</b></p>
        <p><b>張學友</b></p>
        <p><b>黎明</b></p>
        <p><b>郭富城</b></p>
    </div>

以上程式碼通過$.extend()方法想jquery新增的,直接通過$呼叫;
但是,發現這種擴充套件方式無法通過DOM選擇器來觸發,這個時候我們就需要考慮$.fn
 
.extend()的擴充套件方式了;
如下,基本格式:

$.fn.sayHello= function(){
    // to do
};

/*
現在我們將頁面中的字改變顏色
* */
$.fn.changeColor = function(){
    this.css('color','red');// this 即選中的元素;當前指$('p')
};
// 呼叫如下:
$('#ex-div p').changeColor();

當然,其實在外掛程式碼裡我們經常處理某個具體的元素,而不是一個元素的集合
上面的程式碼,this指的是jquery選擇器返回的集合,我們可以通過jquery中的$.each()方法處理集合中的每個元素了;
但是,在each方法內部,this指代的就是普通的DOM元素了,如果需要呼叫jquery的方法那就需要用$來重新包裝一下;
現在我們來處理,在每個p標籤裡面加上一個i標籤,內容為-香港

$.fn.changeConts = function(){
    //這裡對this是用jquery選中的元素\
    var _html = '<i>-香港</i>'
    this.css('color','red');
    this.each(function(){
        //對每個元素進行操作
        $(this).append(_html);
    });
};
$('#ex-div p').changeConts();

我們又豐富了外掛,接下來我們繼續接受引數的延伸

為了讓外掛支援鏈式呼叫,我們需要return一下;

$.fn.changeConts = function(){
    //這裡對this是用jquery選中的元素\
    var _html = '<i>-香港</i>'
    this.css('color','red');
    return this.each(function(){
        //對每個元素進行操作
        $(this).append(_html);
    });
};
$('#ex-div').css('border','1px solid red').find('p').changeConts();

接下來,我們就處理引數的部分;
比如現在我們處理字型的顏色,由使用者來定義顏色,如果使用者沒有定義,我們就取預設值
說明一點:
在處理外掛引數的接收上,通常使用jquery的extend方法,上面也提及過,但那是給extend方法傳遞單個物件的情況下,
這個物件會合併到jquery身上,所以我們就可以在jquery身上呼叫新合併物件裡包含的方法了,如上面的例子;
當給extend方法傳遞一個以上的引數時,它會將所有到引數物件合併到第一個裡.
同時,如果物件中有同名的屬性,合併後後面的引數會覆蓋前面的;

利用這一點,我們可以在外掛裡定義一個儲存外掛引數預設值的物件,同時將接收來的引數物件合併到預設物件上,
最後便實現了使用者指定引數使用的值,未指定的引數使用預設值;

我們定義下font-size,允許外掛呼叫的時候設定字型;

$.fn.extend({
    changeConts: function (options) {
        var defaults = {
            'color':'red',
            'fontSize':'12px'
        };
        var setting = $.extend(defaults,options);
        return this.css({
            'color':setting.color,
            'fontSize':setting.fontSize
        });
    }
});
//未指定字型大小的時候,預設值為12px
$('#ex-div p').changeConts({
    'color':'blue'
});
//我們來指定字型大小
$('#ex-div p').changeConts({
    'color':'red',
    'fontSize':'20px'
});

雖然實現了引數的傳遞,但是我們沒有保護包引數

我們可以看到呼叫extend時,會將defaults的值改變,這樣不是我們期望的,我們希望它維持原樣,方便其它呼叫;

一個好的做法是,將一個新的空物件作為$.extend的第一個引數,defaults和使用者傳遞的引數緊跟其後,
這樣做的好處就是所有值都合併到這個空物件上,保護了外掛裡面到預設值;

$.fn.extend({
    changeConts:function(options){
        var defaults = {
            'color':'red',
            'fontSize':'12px'
        };
        var setting = $.extend({},defaults,options);
        return this.css({
            'color':setting.color,
            'fontSize':setting.fontSize
        });
    }
});
$('#ex-div p').changeConts({
    'color':'blue',
    'fontSize':'20px'
});

至此,外掛可以接受引數和處理引數後,就可以愉快的編寫外掛了;
若要編寫一個龐大的優雅的外掛,我們需要將外掛包裝到一個物件上,用面向物件的思維進行開發;
如果將需要的重要變數定義到物件的屬性上,函式變成物件的方法,當我們需要的時候通過物件獲取,
一來方便管理,二來不會影響外部名稱空間,因為這些所有的變數名和方法名都是在物件內部;
接下來,我們來優化程式碼

// 定義Slipactive的建構函式;
function Slipactive(ele,opt){
    this.$element = ele;
    this.dafaults = {
        'color':'red',
        'fontSize':'12px',
        'textDecoration':'none'
    };
    this.options = $.extend({},this.dafaults,opt)
}
Slipactive.prototype = {
    constructor:Slipactive,
    slipactive:function(){
        this.$element.css({
            'color':this.options.color,
            'fontSize':this.options.fontSize,
            'textDecoration':this.options.textDecoration
        });
        return this;
    }
};
// 在外掛中使用Slipactive物件
$.fn.extend({
    mySlipa:function(options){
        // 建立Slipactive
        var slipactive = new Slipactive(this,options);
        // 呼叫方法
        return slipactive.slipactive();
    }
});
$('#ex-div p').mySlipa({
    'color':'blue',
    'fontSize':'30px'
});

以上便是面向物件,也更好維護和理解,以後要新增新方法,只需向物件新增新變數和方法就行,
然後便可以在外掛例項化後即可呼叫新新增的東西

$('#ex-div p').mySlipa({
    'color':'blue',
    'fontSize':'30px',
    'textDecoration':'underline'
});

至此,外掛開發已經完畢;
接下來,我們來做些錦上添花的東西;例如優化名稱空間,變數等
其實,我們在寫js的時候就應該不要汙染全域性變數;我們可以採用閉包包裹程式碼

(function(){
    function Slipactive(ele,opt){
        this.$element = ele;
        this.dafaults = {
            'color':'red',
            'fontSize':'12px',
            'textDecoration':'none'
        };
        this.options = $.extend({},this.dafaults,opt)
    }
    Slipactive.prototype = {
        constructor:Slipactive,
        slipactive:function(){
            this.$element.css({
                'color':this.options.color,
                'fontSize':this.options.fontSize,
                'textDecoration':this.options.textDecoration
            });
            return this;
        }
    };
// 在外掛中使用Slipactive物件
    $.fn.extend({
        mySlipa:function(options){
            // 建立Slipactive
            var slipactive = new Slipactive(this,options);
            // 呼叫方法
            return slipactive.slipactive();
        }
    });
})();

自呼叫匿名函式裡面的程式碼會在第一時間執行;
然後,將系統變數以引數形式傳遞到外掛內部也是個不錯的實踐;
這樣,window等系統變數在外掛內部就有了一個區域性的引用,可以提高訪問效率;
結構如下:

;(function($,window,document,undefiend){
    // to do

})(jQuery,window,document);

最後解釋下undefiend
為了得到沒有被修改的undefiend,我們並沒有傳遞這個引數,但是卻在接收的時候接收了它,
因為實際上並沒有傳,所以'undefiend'那個位置接收到的就是真正的undefiend了;

至此,完畢!