如何使用jQuery寫一個jQuery插件

jQuery插件實際上是前端框架的思惟，構成一個框架，我的認爲必須知足如下幾個基礎條件：1. 可重用，2. 兼容性，3. 維護方便，雖然說如今有不少比較成熟的前端框架，可是也有部分存在配置麻煩，學習成本大的麻煩。jQuery的學習成本相對較低，對於有JavaScript基礎的朋友很容易上手。並且我也但願能利用jQuery寫一套本身的前端框架，有跟我同樣想法的人，歡迎掃描尾部二維碼，加入羣聊，交流學習！

一：關於如何寫jQuery插件的方法有三種：

1. 使用$.extend()來擴展jQuery；

2. 使用$.fn來添加jQuery方法；

3. 經過$.widget()應用jQuery UI的部件工廠方式建立；

 

二：三種jQuery插件開發方式說明

一、$.extend()相對簡單，通常不多可以獨立開發複雜插件，僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個靜態方法而以。

二、咱們調用經過$.extend()添加的函數時直接經過$符號調用（$.myfunction()），而不須要選中DOM元素($('#example').myfunction())。

三、$.widget()是一種高級的開發模式，該模式開發出來的部件帶有不少jQuery內建的特性，好比插件的狀態信息自動保存，各類關於插件的經常使用方法等

四、$.fn則是通常插件開發用到的方式，能夠利用jQuery強大的選擇器帶來的便利，以及將插件更好地運用於所選擇的元素身上，使用的插件也大可能是經過此種方式開發。

 

 三：實例演示

1. $.extend()

(function( $ ) {
    $.extend({
        sayHello: function(name) {
            console.log('Hello,' + (name ? name : 'aaa') + '!');
        }
    })
    $.sayHello(); //Hello,aaa
    $.sayHello('bbb'); //Hello,bbb
})( jQuery );

 

2. $.fn.插件名稱

(function($){
    $.fn.myPlugin = function(options) {
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend({}, defaults, options);
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}
})(jQuery);        

保護好默認參數：作法是將一個新的空對象作爲$.extend的第一個參數，defaults和用戶傳遞的參數對象緊隨其後，這樣作的好處是全部值被合併到這個空對象上，保護了插件裏面的默認值。

調用：

<script type="text/javascript">
    $(function(){
        $('a').myPlugin({
　　　　　'color':red
        });
    });
</script>

 

要點

一、jQuery插件的文件名推薦命名爲jQuery.[插件名].js，以避免和其餘JS庫插件混淆

二、全部的對象方法都應當附加到jQuery.fn對象上，而全部的全局函數都應當附加到jQuery對象自己上

三、在插件內部的this指向的是當前經過選擇器獲取的jQuery對象，而不像通常方法那樣，如click，內部的this指向的是DOM元素

四、能夠經過this.each來遍歷全部的元素

五、全部的方法或函數插件，都應當以分號結尾。不然壓縮的時候可能出現問題。爲了穩妥些，甚至能夠在插件頭部先加上一個分號，以避免他人不規範的代碼影響自身的插件代碼

六、插件應該返回一個jQuery對象，以保證插件的可鏈式操做

七、避免在插件內部使用$做爲jQuery對象的別名，而應使用完整的jQuery來表示，避免衝突。固然，也能夠利用閉包來回避這種問題，使插件內部繼續使用$做爲jQuery的別名

八、利用閉包的特性，便可以免內部臨時變量影響全局空間，又能夠在插件內容繼續使用$做爲jQuery的別名。常見的jQuery插件都是如下這種形式的:

( function (){

   /*這裏放置代碼*/

})();

首先定義一個匿名函數function(){/*這裏放置代碼*/}，而後用括號括起來，變成(function(){/*這裏放置代碼*/})這種形式，最後經過()這個運算符來執行。能夠傳遞參數進行，以供內部函數使用

//爲了更好的兼容性，開始前有個分號

;( function ($){     //此處將$做爲匿名函數的形參

   /*這裏放置代碼，可使用$做爲jQuery的縮寫別名*/

})(jQuery);       //這裏就將jQuery做爲實參傳遞給匿名函數了

上面的代碼是一種常見的jQuery插件的結構

 

 

PS:歡迎掃描下方二維碼或點擊連接，加入QQ羣