前一段時(shí)間,老大讓我封裝插件,開始翻看之前的筆記和例子,今天天氣很好,開始寫一段插件機(jī)制。jquery有成千上萬(wàn)種的第三方插件,有時(shí)候自己寫好了一個(gè)獨(dú)立的功能,想將它與jquery結(jié)合起來(lái),可以用jquery鏈?zhǔn)秸{(diào)用,這就需要擴(kuò)展jquery,下成jquery插件形式了。先來(lái)一個(gè)小小的例子吧
(function($){
? ? ? ? ? ? $.fn.extend({
? ? ? ? ? ? ? ? ? ? ? ? ?'bold':function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?return this.css({fontWeight:'bold'
? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ?}
? ? ? ? ? ? });
})(jquery);
調(diào)用的方式:
$(function(){
? ? ? ? ? ? ? ? ?//鏈?zhǔn)秸{(diào)用,加粗p標(biāo)簽中的字體
? ? ? ? ? ? ? ? ? $('p').bold();
})
這是一個(gè)很簡(jiǎn)單的擴(kuò)展。
現(xiàn)在開始解釋上邊的代碼:
1,jquery的插件機(jī)制
創(chuàng)建插件,jquery提供了兩種方法,jquery.extend() ?和 ?jquery.fn.extend()
jquery.extend()方法有一個(gè)重載
jquery.extend(object),一個(gè)參數(shù)的用于擴(kuò)展jquery類本身,也就是用來(lái)在jquery類/命名空間上增加新函數(shù),或者叫靜態(tài)方法,例如jquery內(nèi)置的ajax方法都是用jquery.ajax()這個(gè)樣子來(lái)調(diào)用,有點(diǎn)像“類名.方法名”靜態(tài)方法的調(diào)用方式。下邊來(lái)寫個(gè)jquery.extend(object)的例子:
//擴(kuò)展jquery對(duì)象本身
jquery.extend({
'minValue':function(a,b){
return a < b ? a : b;
},
'maxValue':function(a,b){
return a > b ? a : b;
}
});
//調(diào)用
var i = 100;j = 101;
var min_v = $.minValue(i,j);//min_v等于100
var max_v = $.maxValue(i,j);//max_v等于101
重載版本:jquery.extend([deep],target,object1,[objectN])
也許你剛看到這幾個(gè)參數(shù)會(huì)有一種懵逼的感覺(jué),沒(méi)關(guān)系,先來(lái)解釋一下:
deep: ? ? 可選 ? ? ? 如果設(shè)為true,則遞歸合并
target: ? ? 待修改的對(duì)象
object1 ? ? ?待合并到第一個(gè)對(duì)象的對(duì)象
objectN ? ? ? ? 可選 ?待合并到第一個(gè)對(duì)象的對(duì)象
用一個(gè)或多個(gè)其他對(duì)象來(lái)擴(kuò)展一個(gè)對(duì)象,返回被擴(kuò)展的對(duì)象
如果不指定target,則對(duì)jquery命名空間本身進(jìn)行擴(kuò)展。這有助于我為jquery增加新方法
如果第一個(gè)參數(shù)設(shè)置為true,則jquery返回一個(gè)深層次的副本,遞歸地復(fù)制找到的任何對(duì)象。否則的話,副本會(huì)與原對(duì)象共享結(jié)構(gòu)。
未定義的屬性將不會(huì)被復(fù)制,然而從對(duì)象的原型繼承的屬性將會(huì)被復(fù)制
演示一下:
合并settings 和 options ,修改并返回settings
var settings = { validate:false,limit:5,name:'foo'};
var options = {validate:true,name:'bar'};
jquery.extend(settings,options);
那么結(jié)果呢就是seetings == {validate:true