JQuery外掛程式開發初探 結構熟悉

2021-06-18 19:11:37 字數 1359 閱讀 3227

工作之餘,對jquery外掛程式做了一點嘗試,想著之前總用別人寫的外掛程式,自己要是也寫乙個用豈不是很cool。於是說幹就幹,動手開始寫。

首先是模仿,從乙個簡單的功能進行入手,了解一下外掛程式開發的流程和結構。

第乙個嘗試是做乙個**的隔行變色外掛程式,相對簡單。

首先是基本的框架結構:

自己的外掛程式要定義在自己的命名空間中,不汙染全域性的命名空間,因此最外層應該是這樣的結構:

(function

($) )(jquery);

由於這種型別的外掛程式是建立在對已有元素的功能擴充套件,因此大體格式如下:

function

($)

})(jquery);

為自己的外掛程式命名乙個方法,同時給這個方法傳遞乙個options的引數。

有了這個結構,就可以完成呼叫了,類似這樣的方式:$("#domname"). fnname ({})

接下來就是設定外掛程式的引數預設值和自定義值了。

由於外掛程式需要提供一定的靈活性給使用者,因此設定引數是必須的,但在使用者做demo或者簡單方便來說,要提供乙個預設值也是必須的。因此,需要在外掛程式內部宣告預設值:

(function

($) ;

}})(jquery);

有了預設值,那麼如果使用者傳遞過來了自定義的引數值,如何處理呢?首先想到的是把使用者自定義的引數值對預設值進行覆蓋。如何覆蓋呢?

jquery提供了乙個方法:

var options = $.extend(defaults, options);
這個方法可以把後面的引數覆蓋到前面的引數中去,返回覆蓋(合併)後的結果,非常方便。

有了這個方法,我們就能處理好自定義引數和預設值的關係了。

接下來,我們就要開始核心功能的編寫了,要注意寫法上如果要支援jquery選擇器和鏈式呼叫,需要這樣:

//

支援jquery選擇器

//支援鏈式呼叫

return

this.each(function

() );

這樣,整體的結構就完畢了。

最後把我們需要做的功能加進去,就可以了。

//

隔行變色

this.each(function

() );

table.find("tr").bind("mouseout", function

() );

});

基本步驟就是:

定義命名空間。

定義外掛程式擴充套件方法

定義預設值

處理預設引數和自定義引數的關係

鏈式呼叫和選擇器框架

定義功能實現

新增注釋,文件,示例

jQuery 外掛程式開發

一 類級別的外掛程式開發 即給jquery新增新的全域性函式,相當於給jquery類本身新增方法,jquery的全域性函式就是屬於jquery命名空間的函式。1 新增全域性函式 方法一 jquery.onetest function jquery.twotest function 方法二 jquer...

jquery 外掛程式開發

自定義主要通過兩種方式實現 extend fn.extend 呼叫的方法分別是 aa this aa 注意 建立函式時不要放在 function 中,呼叫時候要放在事件裡面 this click function jquery.extend 函式詳解 jquery的extend擴充套件方法 jque...

jquery 外掛程式開發

jquery外掛程式開發一般通過兩種框架方式 一種是在jquery物件上直接定義新成員,形成外掛程式 另一種是封裝完整的外掛程式 然後將jqeury作為引數自身呼叫,達到給jquery物件擴充套件功能目的,形成外掛程式。其實兩種方式都是給jqeury物件擴充套件成員來實現外掛程式功能的,所以本質上功...