二、jQuery插件開發(fā)全解析

jQuery插件的開發(fā)包括兩種：

一種是類級(jí)別的插件開發(fā)，即給jQuery添加新的全局函數(shù)，相當(dāng)于給jQuery類本身添加方法。jQuery的全局函數(shù)就是屬于jQuery命名空間的函數(shù)，另一種是對(duì)象級(jí)別的插件開發(fā)，即給jQuery對(duì)象添加方法。下面就兩種函數(shù)的開發(fā)做詳細(xì)的說明。

1、類級(jí)別的插件開發(fā)

類級(jí)別的插件開發(fā)最直接的理解就是給jQuery類添加類方法，可以理解為添加靜態(tài)方法。典型的例子就是$.AJAX()這個(gè)函數(shù)，將函數(shù)定義于jQuery的命名空間中。關(guān)于類級(jí)別的插件開發(fā)可以采用如下幾種形式進(jìn)行擴(kuò)展：
1.1?添加一個(gè)新的全局函數(shù)
添加一個(gè)全局函數(shù)，我們只需如下定義：
Java代碼
jQuery.foo = function() { ??
alert('This is a test. This is only a test.'); ?
}; ???
?
1.2 增加多個(gè)全局函數(shù)
添加多個(gè)全局函數(shù)，可采用如下定義：
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 + '".'); ?
}; ??
調(diào)用時(shí)和一個(gè)函數(shù)的一樣的: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函數(shù)名和變量名。但是仍然不可避免某些函數(shù)或變量名將于其他jQuery插件沖突，因此我們習(xí)慣將一些方法封裝到另一個(gè)自定義的命名空間。
Java代碼 ?收藏代碼
jQuery.myPlugin = { ?????????
foo:function() { ?????????
alert('This is a test. This is only a test.'); ?????????
}, ?????????
bar:function(param) { ?????????
alert('This function takes a parameter, which is "' + param + '".'); ???
} ????????
}; ?
采用命名空間的函數(shù)仍然是全局函數(shù)，調(diào)用時(shí)采用的方法： ?
$.myPlugin.foo(); ????????
$.myPlugin.bar('baz'); ?
?
通過這個(gè)技巧（使用獨(dú)立的插件名），我們可以避免命名空間內(nèi)函數(shù)的沖突。

2、對(duì)象級(jí)別的插件開發(fā)

對(duì)象級(jí)別的插件開發(fā)需要如下的兩種形式：、
形式1： ?
Java代碼 ?
(function($){ ????
$.fn.extend({ ????
pluginName:function(opt,callback){ ????
??????????// Our plugin implementation code goes here. ??????
} ????
}) ????
})(jQuery); ????
形式2：
Java代碼 ?
(function($) { ??????
$.fn.pluginName = function() { ????
?????// Our plugin implementation code goes here. ????
}; ????
})(jQuery); ?????
???????上面定義了一個(gè)jQuery函數(shù),形參是$，函數(shù)定義完成之后,把jQuery這個(gè)實(shí)參傳遞進(jìn)去.立即調(diào)用執(zhí)行。這樣的好處是,我們?cè)趯慾Query插件時(shí),也可以使用$這個(gè)別名,而不會(huì)與prototype引起沖突.
2.1 在JQuery名稱空間下申明一個(gè)名字
這是一個(gè)單一插件的腳本。如果你的腳本中包含多個(gè)插件，或者互逆的插件（例如： $.fn.doSomething() 和 $.fn.undoSomething()），那么你需要聲明多個(gè)函數(shù)名字。但是，通常當(dāng)我們編寫一個(gè)插件時(shí)，力求僅使用一個(gè)名字來包含它的所有內(nèi)容。我們的示例插件命名為“highlight“ ???
?
Java代碼 ?
$.fn.hilight = function() { ???
??// Our plugin implementation code goes here. ???
}; ???
我們的插件通過這樣被調(diào)用： ?
$('#myDiv').hilight(); ????
?
但是如果我們需要分解我們的實(shí)現(xiàn)代碼為多個(gè)函數(shù)該怎么辦？有很多原因：設(shè)計(jì)上的需要；這樣做更容易或更易讀的實(shí)現(xiàn)；而且這樣更符合面向?qū)ο蟆?這真是一個(gè)麻煩事，把功能實(shí)現(xiàn)分解成多個(gè)函數(shù)而不增加多余的命名空間。出于認(rèn)識(shí)到和利用函數(shù)是javascript中最基本的類對(duì)象，我們可以這樣做。就像其他對(duì)象一樣，函數(shù)可以被指定為屬性。因此我們已經(jīng)聲明“hilight”為jQuery的屬性對(duì)象，任何其他的屬性或者函數(shù)我們需要暴露出來的，都可以在"hilight" 函數(shù)中被聲明屬性。稍后繼續(xù)。
2.2 接受options參數(shù)以控制插件的行為
讓我們?yōu)槲覀兊牟寮砑庸δ苤付ㄇ熬吧捅尘吧墓δ堋Ｎ覀円苍S會(huì)讓選項(xiàng)像一個(gè)options對(duì)象傳遞給插件函數(shù)。例如： ??
Java代碼 ?
// plugin definition ???
$.fn.hilight = function(options) { ???
??var defaults = { ???
????foreground: 'red', ???
????background: 'yellow' ???
??}; ???
??// Extend our default options with those provided. ???
??var opts = $.extend(defaults, options); ???
??// Our plugin implementation code goes here. ???
}; ???
我們的插件可以這樣被調(diào)用： ?
$('#myDiv').hilight({ ???
??foreground: 'blue' ???
}); ????