jQuery插件的幾種寫法大總結

摘要： 插件編寫的目的是給已經有的一系列方法或函數作一個封裝，以便在其餘地方重複使用，方便後期維護javascript

插件編寫的目的是給已經有的一系列方法或函數作一個封裝，以便在其餘地方重複使用，方便後期維護css

jQuery插件開發方式

經過$.extend()來擴展jQueryjava

經過$.fn 向jQuery添加新的方法app

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

三種jQuery插件開發方式說明

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

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

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

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

$.extend()擴展jQuery的實例

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

說明：上面代碼中，經過$.extend()向jQuery添加了一個sayHello函數，而後經過$直接調用對象

$.fn方式插件開發

定義

$.fn.pluginName = function() {
    //your code here
}

定義說明

基本上就是往$.fn上面添加一個方法，名字是咱們的插件名稱。而後咱們的插件代碼在這個方法裏面展開

簡單實例

將頁面上全部連接顏色轉成紅色，則能夠這樣寫這個插件

$.fn.myPlugin = function() {
    //在這裏面,this指的是用jQuery選中的元素 example :$('a'),則this=$('a')
    this.css('color', 'red');
}

實例說明

一、在插件名字定義的這個函數內部，this指代的是咱們在調用該插件時，用jQuery選擇器選中的元素，通常是一個jQuery類型的集合。在插件名字定義的這個函數內部，this指代的是咱們在調用該插件時，用jQuery選擇器選中的元素，通常是一個jQuery類型的集合

二、若是經過調用jQuery的.each()方法處理集合中的每一個元素時要注意的是，在each方法內部，this指帶的是普通的DOM元素了，若是須要調用jQuery的方法那就須要用$來從新包裝一下

$.fn.myPlugin = function() {    
    this.css('color', 'red');   //在這裏面,this指的是用jQuery選中的元素
    this.each(function() {        
        $(this).append(' ' + $(this).attr('href'));   //對每一個元素進行操做
    }))
}

實例插件的使用

<ul>
    <li> <a href="#">aaa</a> </li>
    <li> <a href="#">bbb</a> </li>
    <li> <a href="#">ccc</a> </li>
</ul>
<p>這是p標籤不是a標籤，我不會受影響</p>
<script type="text/javascript">
    $(function(){
        $('a').myPlugin();
    })
</script>

讓插件支持鏈式調用

jQuery一個時常優雅的特性是支持鏈式調用，選擇好DOM元素後能夠不斷地調用其餘方法。要讓插件不打破這種鏈式調用，只需return一下便可

$.fn.myPlugin = function() {    
    this.css('color', 'red');   //在這裏面,this指的是用jQuery選中的元素
    return this.each(function() {        
        $(this).append(' ' + $(this).attr('href'));   //對每一個元素進行操做
    }))
}

讓插件接收參數

一、一個強勁的插件是可讓使用者隨意定製的，這要求咱們提供在編寫插件時就要考慮得全面些，儘可能提供合適的參數

二、好比如今咱們不想讓連接只變成紅色，咱們讓插件的使用者本身定義顯示什麼顏色，要作到這一點很方便，只須要使用者在調用的時候傳入一個參數便可。同時咱們在插件的代碼裏面接收

三、爲了靈活，使用者能夠不傳遞參數，插件裏面會給出參數的默認值

四、在處理插件參數的接收上，一般使用jQuery的extend方法，當給extend方法傳遞一個以上的參數時，它會將全部參數對象合併到第一個裏。同時，若是對象中有同名屬性時，合併的時候後面的會覆蓋前面的。

五、能夠在插件裏定義一個保存插件參數默認值的對象，同時將接收來的參數對象合併到默認對象上，最後就實現了用戶指定了值的參數使用指定的值，未指定的參數使用插件默認值

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