這篇文章主要介紹了jquery源碼解讀之a(chǎn)ddclass()方法,注釋形式較為詳細(xì)的分析了addclass()方法的實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文較為詳細(xì)的分析了jquery源碼解讀之a(chǎn)ddclass()方法。分享給大家供大家參考。具體分析如下：

給jquery原型對(duì)象擴(kuò)展addclass功能，jquery.fn就是jquery.prototype

代碼如下:

jquery.fn.extend({

/*

可以看出這是一個(gè)函數(shù)名叫addclass的插件方法。

*/

addclass: function( value ) {

var classes, elem, cur, clazz, j, finalvalue,

i = 0,

/*

this表示選擇器選擇的準(zhǔn)備添加class的jquery對(duì)象，len是該jquery對(duì)象數(shù)組的長(zhǎng)度。

*/

len = this.length,

//在有一個(gè)操作數(shù)不是布爾值的情況下，&&操作就不一定返回布爾值，此時(shí)，它遵循下列規(guī)則：

//1.如果第一個(gè)操作數(shù)不是布爾類型，則返回第二個(gè)操作數(shù);

//2.如果第二個(gè)操作數(shù)不是布爾類型，則只有在第一個(gè)操作數(shù)的求值結(jié)果為true，的情況下才會(huì)返回該對(duì)象;

//3.如果兩個(gè)操作數(shù)都不是布爾類型，則返回第二個(gè)操作數(shù)；

//4.如果有一個(gè)操作數(shù)是null,則返回null;

//5.如果有一個(gè)操作數(shù)是nan，則返回nan;

//6.如果有一個(gè)操作數(shù)是undefined,則返回undefined 。

//情況1:如果value是null,符合規(guī)則4，返回null，即proceed值為null;

//情況2:如果value是undefine，符合規(guī)則6,返回undefined，即proceed值為undefined;

//情況3:如果value是nan，符合規(guī)則5，返回nan，即proceed值為nan;

//情況4:如果value是數(shù)字類型，返回false;

//情況5:如果value是布爾類型,返回false;

//情況7:如果value是array,object,function類型,符合規(guī)則2，但typeof value === 'string'是false,所以返回該對(duì)象，返回false。

//情況8:如果value是字符串類型，符合規(guī)則2，返回value。

//因此，這句只能判斷value是不是字符串類型，并且返回這個(gè)字符串賦值給proceed。其他任何類型最后都返回false，或是可被隱式轉(zhuǎn)換為false的類型。

proceed = typeof value === string && value;

//由于上面只能判斷是否是字符串類型，下面這句是判斷value是否為function類型。使用了jquery的全局函數(shù)isfunction判斷，就是$.isfunction()。

if ( jquery.isfunction( value ) ) {

//如果value是function類型，進(jìn)到這里了。

//返回jquery對(duì)象，為了鏈?zhǔn)秸{(diào)用。

//這里的this是你選擇器選擇的jquery對(duì)象。

return this.each(function( j ) {

//開始迭代，這里的this可不是jquery對(duì)象了，是當(dāng)前迭代的dom對(duì)象，所以用jquery(this)包裝了一下，成為一個(gè)jquery對(duì)象，這樣就可以使用jquery方法。j表示每次遍歷的索引。傳遞一個(gè)用來設(shè)置類名的有返回值的value函數(shù)。value這個(gè)函數(shù)每次call當(dāng)前dom為其執(zhí)行對(duì)象，并傳入當(dāng)前dom索引值和類名，value函數(shù)返回的值，由jquery(this).addclass(返回值)再次調(diào)用addclass()方法。如果返回的是字符串，就執(zhí)行另外一個(gè)if的分支。如果返回的還是function，則繼續(xù)調(diào)用返回的這個(gè)function。

jquery( this ).addclass( value.call( this, j, this.classname ) );

});

}

//之前得到proceed是字符串，這里判斷下是否為空字符串，非空字符串隱式轉(zhuǎn)換為true?？兆址[式轉(zhuǎn)換為false哦，那么if語(yǔ)句塊就不再執(zhí)行了，程序跳到最后的return this，返回這個(gè)jquery對(duì)象就執(zhí)行完了。

if ( proceed ) {

//proceed非空字符串，開始執(zhí)行if語(yǔ)句塊。假定value是show bd1。

//rnotwhite是正則表達(dá)式(/\s+/g),意思是全局匹配非空白字符一次或