jquery 外掛程式開發

2021-06-20 12:34:56 字數 1990 閱讀 5379

jquery外掛程式開發一般通過兩種框架方式:

一種是在jquery物件上直接定義新成員,形成外掛程式;

另一種是封裝完整的外掛程式**,然後將jqeury作為引數自身呼叫,達到給jquery物件擴充套件功能目的,形成外掛程式。

其實兩種方式都是給jqeury物件擴充套件成員來實現外掛程式功能的,所以本質上功能相同。下面逐一分析兩種架構。

1、在jquery物件上直接定義新成員

這種開發方式可以理解為給jquery類新增靜態方法。典型的例子就是$.ajax()這個函式,將函式定義於jquery的命名空間中。可以採用如下幾種形式進行擴充套件:

1.1、新增乙個新的全域性函式

新增乙個全域性函式,我們只需如下定義:

jquery.foo = function() ; 

1.2、增加多個全域性函式

新增多個全域性函式,可採用如下定義:

jquery.foo = function() ; 

jquery.bar = function(param) ; 

呼叫時和乙個函式的一樣的:jquery.foo();jquery.bar();或者$.foo();$.bar('bar'

); 

1.3、使用jquery.extend(object) 

jquery.extend(, 

bar: function(param)  

}); 

1.4、為了避免與其他js指令碼或外掛程式命名上發生衝突,可以

將自己定義的**放到乙個命名空間下

。jquery.myplugin = , 

bar:function(param)  

}; 採用命名空間的函式仍然是全域性函式,呼叫時採用的方法: 

$.myplugin.foo(); 

$.myplugin.bar('baz'

); 

2、封裝打包式的外掛程式開發

形式1:

(function($) 

}) })(jquery); 

形式2:

(function($) ; 

})(jquery); 

上面定義了乙個jquery函式,形參是$,函式定義完成之後,把jquery這個實參傳遞進去.立即呼叫執行。這樣的好處是,我們在寫jquery外掛程式時,也可以使用$這個別名,而不會與prototype引起衝突.

3、定義可通過selector選擇器呼叫的外掛程式函式

$.fn.hilight = function() ; 

我們的外掛程式通過這樣被呼叫: 

$('#mydiv'

).hilight(); 

4、多引數定義

// plugin definition 

$.fn.hilight = function(options) ; 

// extend our default options with those provided. 

var opts = $.extend(defaults, options); 

// our plugin implementation code goes here. 

}; 我們的外掛程式可以這樣被呼叫: 

$('#mydiv'

).hilight(); 

4.1、物件方式定義外掛程式引數

$.fn.hilight = function(options) , $.fn.hilight.defaults, options);    

// **內容

};       

$.fn.hilight.defaults = ;

現在使用者可以包含像這樣的一行在他們的指令碼裡:  

//這個只需要呼叫一次,且不一定要在ready塊中呼叫  

$.fn.hilight.defaults.foreground = 'blue';    

接下來我們可以像這樣使用外掛程式的方法,結果它設定藍色的前景色:  

$('#mydiv').hilight();   

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外掛程式開發分為兩種 1 類級別 類級別你可以理解為拓展jquery類,最明顯的例子是.a jax 相當於靜 態方法。開發擴充套件 其方法時 使用.extend方法,即jquery.extend object extend minus function a,b 頁面中呼叫 var i a...