jquery插件開發的幾種方式

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

1、jQuery插件開發方式

一、經過$.extend()來擴展jQuery

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

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

 

2、三種jQuery插件開發方式說明

 

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

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

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

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

 

3、$.extend()擴展jQuery的實例

 

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

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

 

4、$.fn方式插件開發

 

一、定義

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

二、定義說明

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

 

三、簡單實例

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

 

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

轉載自：jquery插件開發的幾種方式  http://www.studyofnet.com/news/1203.html