jQuery插件開發全解析
2024-05-06 14:21:10
供稿：網友
jQuery插件的開發包括兩種：一種是類級別的插件開發，即給jQuery添加新的全局函數，相當于給jQuery類本身添加方法。jQuery的全局函數就是屬于jQuery命名空間的函數，另一種是對象級別的插件開發，即給jQuery對象添加方法。下面就兩種函數的開發做詳細的說明。
1、類級別的插件開發
類級別的插件開發最直接的理解就是給jQuery類添加類方法，可以理解為添加靜態方法。典型的例子就是$.AJAX()這個函數，將函數定義于jQuery的命名空間中。關于類級別的插件開發可以采用如下幾種形式進行擴展：
1.1 添加一個新的全局函數
添加一個全局函數，我們只需如下定義：
Java代碼
代碼如下:
jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
1.2 增加多個全局函數
添加多個全局函數，可采用如下定義：
Java代碼
代碼如下:
jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
jQuery.bar = function(param) {
alert('This function takes a parameter, which is "' + param + '".');
};
調用時和一個函數的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');
1.3 使用jQuery.extend(object);
Java代碼
代碼如下:
jQuery.extend({
foo: function() {
alert('This is a test. This is only a test.');
},
bar: function(param) {
alert('This function takes a parameter, which is "' + param +'".');
}
});
1.4 使用命名空間
雖然在jQuery命名空間中，我們禁止使用了大量的javaScript函數名和變量名。但是仍然不可避免某些函數或變量名將于其他jQuery插件沖突，因此我們習慣將一些方法封裝到另一個自定義的命名空間。
Java代碼
代碼如下:
1.jQuery.myPlugin = {
2.foo:function() {
3.alert('This is a test. This is only a test.');
4.},
5.bar:function(param) {
6.alert('This function takes a parameter, which is "' + param + '".');
7.}
8.};
9.采用命名空間的函數仍然是全局函數，調用時采用的方法：
10.$.myPlugin.foo();
11.$.myPlugin.bar('baz');
通過這個技巧(使用獨立的插件名)，我們可以避免命名空間內函數的沖突。
2、對象級別的插件開發
對象級別的插件開發需要如下的兩種形式：、
形式1：
Java代碼
代碼如下:
1.(function($){
2.$.fn.extend({
3.pluginName:function(opt,callback){
4. // Our plugin implementation code goes here.
5.}
6.})
7.})(jQuery);
形式2：
Java代碼
代碼如下:
1.(function($) {
2.$.fn.pluginName = function() {
3. // Our plugin implementation code goes here.
4.};
5.})(jQuery);
上面定義了一個jQuery函數,形參是$，函數定義完成之后,把jQuery這個實參傳遞進去.立即調用執行。這樣的好處是,我們在寫jQuery插件時,也可以使用$這個別名,而不會與prototype引起沖突.
