jQuery源碼的簡(jiǎn)單理解及其引申的相關(guān)問(wèn)題的解答

1.jQuery運(yùn)用了沙箱模型时捌,使用閉包來(lái)隔離變量藕筋,制造出塊級(jí)作用域揣云,防止全局變量污染。

    (function(window,undefined){
        /*源碼*/
    })(window)

2.jQuery在閉包內(nèi)導(dǎo)出局部變量為window的全局變量斜筐,對(duì)外暴露出$和jQuery兩個(gè)關(guān)鍵字龙致。

    window.jQuery = window.$ = jQuery;

3.jQuery選擇器的實(shí)現(xiàn)原理及其原型對(duì)象。

jQuery最核心的功能就是選擇器顷链。選擇器簡(jiǎn)單來(lái)說(shuō)就是找到DOM對(duì)象的工具目代。
在jQuery源碼中,可以發(fā)現(xiàn),jQuery對(duì)象其實(shí)就是init對(duì)象

    jQuery = function(selector,context){
        return new jQuery.fn.init(selector,context);
    }

在源碼中可以發(fā)現(xiàn)榛了,jQuery.fn就是jQuery對(duì)象的原型

    jQuery.fn = jQuery.prototype;
    jQuery.fn.init.prototypt = jQuery.fn;

由上可知在讶,init對(duì)象和jQuery對(duì)象有相同的原型,所以在上面return init霜大,就與jQuery對(duì)象有相同的屬性和方法了构哺。

引申問(wèn)題:

1.jQuery.fn的init方法返回的this指的是什么對(duì)象?為什么要返回this战坤?

    init: function( selector, context, rootjQuery ) {
        var match, elem, ret, doc;

        // Handle $(""), $(null), or $(undefined)
        if ( !selector ) {
      
            console.log(this);    // this是個(gè)空的類數(shù)組對(duì)象曙强,這是為什么?
        
            return this;
        }

這里返回的this就是jQuery.fn(=jQuery.prototype)途茫,也就是一個(gè)jQuery原型的實(shí)例碟嘴。
返回this是因?yàn)橐蓪?duì)于對(duì)象的操作,所以需要生成這個(gè)DOM元素的jQuery實(shí)例囊卜。

2.jquery中如何將數(shù)組轉(zhuǎn)化為json字符串娜扇,然后再轉(zhuǎn)化回來(lái)?

1.原生JSON方法:

    var arr = [1,2,3,4,5,6];
    var jsonStr = JSON.stringify(arr);
    console.log(jsonStr);//"[1,2,3,4,5,6]"
    var arr_ = JSON.parse(jsonStr);
    console.log(arr_);//obj:[1, 2, 3, 4, 5, 6]
    console.log("arr = ? arr_:");
    console.log(arr == arr_);//false

2.jQuery定義了parseJSON()方法栅组,但沒(méi)有定義stringify()方法雀瓢,所以后者要自己添加

    jQuery.parseJSON = function( data ) {
        return JSON.parse( data + "" );
    };

自己添加stringify

    $.fn.stringify = function() {
    return JSON.stringify(this);
    }

    var jsonStr = $([1,2,3]).stringify();
    alert(jsonStr);//"{"0":1,"1":2,"2":3,"length":3}"

3.jQuery 的屬性拷貝(extend)的實(shí)現(xiàn)原理是什么,如何實(shí)現(xiàn)深拷貝玉掸?

復(fù)制屬性或者方法要區(qū)分是基本類型(復(fù)制)還是引用類型(復(fù)制了指針)致燥。

深復(fù)制就是要把對(duì)象類型或者數(shù)組類型的屬性依次遍歷,重新賦給新生成的對(duì)象排截,

基本類型:Number嫌蚤、String、Boolean断傲、null脱吱、Undefined不存在深淺復(fù)制的問(wèn)題,復(fù)制都是深復(fù)制认罩。

引用類型:Object(一般的對(duì)象箱蝠、Array)這個(gè)區(qū)分淺復(fù)制(復(fù)制指針,修改會(huì)改變?cè)瓉?lái)的)垦垂,深復(fù)制(從新生成一個(gè)對(duì)象或者數(shù)組宦搬,依次復(fù)制每個(gè)元素,或者JSON對(duì)象方法劫拗,轉(zhuǎn)成字符串间校,再轉(zhuǎn)回來(lái)就回程一個(gè)新的對(duì)象)

4.針對(duì) jQuery 的優(yōu)化方法?

1页慷、總是使用#id去尋找element.

在jQuery中最快的選擇器是ID選擇器 ($('#someid')). 這是因?yàn)樗苯佑成錇镴avaScript的getElementById()方法憔足。

2胁附、在Classes前面使用Tags

在jQuery中第二快的選擇器就是Tag選擇器 ($('head')). 而這是因?yàn)樗苯佑成涞絁avaScript的getElementsByTagName()方法。

注意:在jQuery里Class選擇器是最慢的一個(gè)選擇器;在IE中它循環(huán)整個(gè)DOM滓彰】仄蓿可能的話盡量避免使用它。不要在ID前面 加Tags揭绑。

3弓候、緩存jQuery對(duì)象,對(duì)于同一個(gè)dom的多個(gè)操作的時(shí)候他匪,最好緩存到一個(gè)變量上弓叛,就像len = arr.length; 避免多次超找或者計(jì)算。

提示:使用$前輟表示我們的本地變量是一個(gè)jQuery包集诚纸。記住,不要在你的應(yīng)該程序里出現(xiàn)一次以上的jQuery重復(fù)的選擇操作陈惰。 額外提示:延遲存儲(chǔ)jQuery對(duì)象結(jié)果畦徘。

4、更好的利用鏈抬闯,連式操作井辆,避免多寫代碼,或者查詢溶握。

5杯缺、使用子查詢

jQuery允許我們?cè)谝粋€(gè)包集上附加其它的選擇器。因?yàn)槲覀円呀?jīng)在本地變量里保存了父對(duì)象這樣會(huì)減少以后在選擇器上的性能開銷睡榆。

主要使用find實(shí)現(xiàn):

var $traffic_light = $('#traffic_light'), 
 
$active_light = $traffic_light.find('input.on'), 
 
$inactive_lights = $traffic_light.find('input.off');

提示:可以用逗號(hào)隔開一次定義多個(gè)本地變量萍肆,這樣可以節(jié)省一些字節(jié)。

6胀屿、限制直接對(duì)DOM操作

7塘揣、事件委托(又名:冒泡事件)

除非特別說(shuō)明,每一個(gè)JavaScript事件(如click, mouseover 等)在DOM結(jié)構(gòu)樹上都會(huì)冒泡到它的父元素上宿崭。如果我們想讓很多elements(nodes)調(diào)用同一個(gè)function這是非常有用的亲铡。

8、消除查詢浪費(fèi)

9葡兑、遵從$(windows).load

10奖蔓、壓縮JS

5.jQuery 的隊(duì)列是如何實(shí)現(xiàn)的?隊(duì)列可以用在哪些地方讹堤?

jQuery核心中, 有一組隊(duì)列控制方法, 這組方法由queue()/dequeue()/clearQueue()三個(gè)方法組成, 它可以控制需要連續(xù)按序執(zhí)行的函數(shù),

主要應(yīng)用于animate()方法, ajax以及其他要按時(shí)間順序執(zhí)行的事件中.

了解部分:
queue(name,[callback]): 當(dāng)只傳入一個(gè)參數(shù)時(shí), 它返回并指向第一個(gè)匹配元素的隊(duì)列(將是一個(gè)函數(shù)數(shù)組,隊(duì)列名默認(rèn)是fx);

當(dāng)有兩個(gè)參數(shù)傳入時(shí), 第一個(gè)參數(shù)還是默認(rèn)為fx的的隊(duì)列名,

第二個(gè)參數(shù)又分兩種情況, 當(dāng)?shù)诙€(gè)參數(shù)是一個(gè)函數(shù)時(shí), 它將在匹配的元素的隊(duì)列最后添加一個(gè)函數(shù). 當(dāng)?shù)诙€(gè)參數(shù)是一個(gè)函數(shù)數(shù)組時(shí),它將匹配元素的隊(duì)列用新的一個(gè)隊(duì)列來(lái)代替(函數(shù)數(shù)組).可能, 這個(gè)理解起來(lái)有點(diǎn)暈.
dequeue(name): 這個(gè)好理解, 就是從隊(duì)列最前端移除一個(gè)隊(duì)列函數(shù), 并執(zhí)行它.移除然后執(zhí)行吆鹤,知道全部執(zhí)行完成。
clearQueue([queueName]):這是1.4新增的方法. 清空對(duì)象上尚未執(zhí)行的所有隊(duì)列. 參數(shù)可選,默認(rèn)為fx. 但個(gè)人覺(jué)得這個(gè)方法沒(méi)多大用, 用queue()方法傳入兩個(gè)參數(shù)的第二種參數(shù)即可實(shí)現(xiàn)clearQueue方法.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末洲守,一起剝皮案震驚了整個(gè)濱河市檀头,隨后出現(xiàn)的幾起案子轰异,更是在濱河造成了極大的恐慌,老刑警劉巖暑始,帶你破解...
    沈念sama閱讀 217,084評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件搭独,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡廊镜,警方通過(guò)查閱死者的電腦和手機(jī)牙肝,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)嗤朴,“玉大人配椭,你說(shuō)我怎么就攤上這事”㈡ⅲ” “怎么了股缸?”我有些...
    開封第一講書人閱讀 163,450評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)吱雏。 經(jīng)常有香客問(wèn)我敦姻,道長(zhǎng),這世上最難降的妖魔是什么歧杏? 我笑而不...
    開封第一講書人閱讀 58,322評(píng)論 1 293
  • 正文 為了忘掉前任镰惦,我火速辦了婚禮,結(jié)果婚禮上犬绒,老公的妹妹穿的比我還像新娘旺入。我一直安慰自己,他們只是感情好凯力,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,370評(píng)論 6 390
  • 文/花漫 我一把揭開白布茵瘾。 她就那樣靜靜地躺著,像睡著了一般咐鹤。 火紅的嫁衣襯著肌膚如雪龄捡。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,274評(píng)論 1 300
  • 那天慷暂,我揣著相機(jī)與錄音聘殖,去河邊找鬼。 笑死行瑞,一個(gè)胖子當(dāng)著我的面吹牛奸腺,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播血久,決...
    沈念sama閱讀 40,126評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼突照,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了氧吐?” 一聲冷哼從身側(cè)響起讹蘑,我...
    開封第一講書人閱讀 38,980評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤末盔,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后座慰,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體陨舱,經(jīng)...
    沈念sama閱讀 45,414評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,599評(píng)論 3 334
  • 正文 我和宋清朗相戀三年版仔,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了游盲。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,773評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蛮粮,死狀恐怖益缎,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情然想,我是刑警寧澤莺奔,帶...
    沈念sama閱讀 35,470評(píng)論 5 344
  • 正文 年R本政府宣布,位于F島的核電站变泄,受9級(jí)特大地震影響令哟,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜杖刷,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,080評(píng)論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望驳癌。 院中可真熱鬧滑燃,春花似錦、人聲如沸颓鲜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)甜滨。三九已至乐严,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間衣摩,已是汗流浹背昂验。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留艾扮,地道東北人既琴。 一個(gè)月前我還...
    沈念sama閱讀 47,865評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像泡嘴,于是被迫代替她去往敵國(guó)和親甫恩。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,689評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式酌予。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性磺箕。 1....
    LaBaby_閱讀 1,171評(píng)論 0 1
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式奖慌。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,335評(píng)論 0 2
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    程序員poetry閱讀 114,365評(píng)論 24 450
  • 在公開透明的地方的寫作總是讓我覺(jué)得很恐慌涎劈,碼字的時(shí)候不能盡興地表達(dá)我全部的思想,所以活到這么大阅茶,除了不斷疊高的日記...
    shadow佘閱讀 364評(píng)論 0 0
  • ? /宜吃麻辣燙脸哀,忌對(duì)愛(ài)人說(shuō)晚安蹦浦。/ ...
    兔屎兒的豌雜面閱讀 2,973評(píng)論 1 4