<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • jquery原理的簡單分析

          2018-5-31    周周

                 jquery是一個輕量級的JS框架,這點相信大部分人都聽過,而jquery之所以有這樣一個稱呼,就是因為它悄悄披了一件外衣,將自己給隱藏了起來。

                /以下截取自jquery源碼片段
                (function( window, undefined ) {
                /*    源碼內(nèi)容    */
                 })( window );

                上面這一小段代碼來自于1.9.0當(dāng)中jquery的源碼,它是一個無污染的JS插件的標(biāo)準(zhǔn)寫法,專業(yè)名詞叫閉包。可以把它簡單的看做是一個函數(shù),與普通函數(shù)不同的是,這個函數(shù)沒有名字,而且會立即執(zhí)行,就像下面這樣,會直接彈出字符串。

                (function( window, undefined ) {
                   alert("Hello World!");
                 })( window );

                 可以看出來這樣寫的直接效果,就相當(dāng)于我們直接彈出一個字符串。但是不同的是,我們將里面的變量變成了局域變量,這不僅可以提高運行速度,更重要的是我們在引用jquery的JS文件時,不會因為jquery當(dāng)中的變量太多,而與其它的JS框架的變量命名產(chǎn)生沖突。對于這一點,我們拿以下這一小段代碼來說明。

               var temp = "Hello World!";
                  (function( window, undefined ) {
                   var temp = "ByeBye World!";
                  })( window );
                  alert(temp);

                 這段代碼的運行結(jié)果是Hello而不是ByeBye,也就是說閉包中的變量聲明沒有污染到外面的全局變量,倘若我們?nèi)サ糸]包,則最終的結(jié)果會是ByeBye,就像下面這樣。

                var temp = "Hello World!";
                  //    (function( window, undefined ) {
                   var temp = "ByeBye World!";
                //    })( window );
                 alert(temp);

                 由此就可以看出來,jquery的外衣就是這一層閉包,它是很重要的一個內(nèi)容,是編寫JS框架必須知道的知識,它可以幫助我們隱藏我們的臨時變量,降低污染。

                 剛才我們說了,jquery將自己聲明的變量全部都用外衣遮蓋起來了,而我們平時使用的Jquery和$,卻是真真實實的全局變量,這個是從何而來,謎底就在jquery的某一行代碼,一般是在文件的末尾。

          window.jQuery = window.$ = jQuery;
                 這一句話將我們在閉包當(dāng)中定義的jQuery對象導(dǎo)出為全局變量jQuery和$,因此我們才可以在外部直接使用jQuery和$。window是默認的JS上下文環(huán)境,因此將對象綁定到window上面,就相當(dāng)于變成了傳統(tǒng)意義上的全局變量,就像下面這一小段代碼的效果一樣。

                var temp = "Hello World!";
                (function( window, undefined ) {
                   var temp = "ByeBye World!";
                   window.temp = temp;
                 })( window );
                 alert(temp);

                 很明顯,它的結(jié)果應(yīng)該是ByeBye,而不是Hello。因為我們在閉包中導(dǎo)出了temp局部變量為全局變量,從而覆蓋了第一行聲明的全局變量temp。

                  jquery最核心的功能,就是選擇器。而選擇器簡單理解的話,其實就是在DOM文檔中,尋找一個DOM對象的工具。

                  首先我們進入jquery源碼中,可以很容易的找到j(luò)query對象的聲明,看過以后會發(fā)現(xiàn),原來我們的jquery對象就是init對象。

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

                   jQuery.fn = jQuery.prototype;

                   jQuery.fn.init.prototype = jQuery.fn;
                  這兩句話,第一句把jQuery對象的原型賦給了fn屬性,第二句把jQuery對象的原型又賦給了init對象的原型。也就是說,init對象和jQuery具有相同的原型,因此我們在上面返回的init對象,就與jQuery對象有一樣的屬性和方法。
          很多時候,我們在jQuery和DOM對象之間切換時需要用到[0]這個屬性。從截圖也可以看出,jQuery對象其實主要就是把原生的DOM對象存在了[0]的位置,并給它加了一系列簡便的方法。這個索引0的屬性我們可以從一小段代碼簡單的看一下它的由來,下面是init方法中的一小段對DOMElement對象作為選擇器的源碼。

                // Handle $(DOMElement)
                 if ( selector.nodeType ) {
                      /*     可以看到,這里將DOM對象賦給了jQuery對象的[0]這個位置  */
                      this.context = this[0] = selector;
                      this.length = 1;
                     return this;
                  }

                 這一小段代碼可以在jquery源碼中找到,它是處理傳入的選擇參數(shù)是一個DOM對象的情況。可以看到,里面很明顯的將jQuery對象索引0的位置以及context屬性,都賦予了DOM對象。代碼不僅說明了這一點,也同時說明了,我們使用$(DOMElement)可以將一個DOM對象轉(zhuǎn)換為jQuery對象,從而通過轉(zhuǎn)換獲得jQuery對象的簡便方法。

          日歷

          鏈接

          個人資料

          藍藍設(shè)計的小編 http://m.sdgs6788.com

          存檔

          久久综合综合久久97色| 99精品国产免费久久久久久下载| 国产精品久久久久一区二区三区| 久久精品国产亚洲AV电影| 久久99国产精品久久99果冻传媒| 久久只这里是精品66| 91精品国产高清久久久久久91| 亚洲中文字幕无码久久综合网| 2021国产成人精品久久| 亚洲伊人久久成综合人影院| 免费国产99久久久香蕉| 久久九九久精品国产免费直播| 久久se精品一区二区影院| 久久久女人与动物群交毛片| 久久精品九九亚洲精品天堂| 久久久噜噜噜久久中文字幕色伊伊| 久久99国产精品久久99果冻传媒| 国产美女亚洲精品久久久综合| 99久久精品九九亚洲精品| 久久久久亚洲精品天堂| 久久久久久亚洲精品影院| 狠狠综合久久综合中文88| 精品久久久久久国产潘金莲| 国产午夜免费高清久久影院| 久久99热这里只频精品6| 久久国产成人午夜aⅴ影院| 青青草国产成人久久91网| 亚洲国产精品无码久久一区二区| 国色天香久久久久久久小说| 欧美日韩精品久久久久 | 久久精品亚洲一区二区三区浴池| 亚洲国产香蕉人人爽成AV片久久 | 亚洲人成无码网站久久99热国产| 久久亚洲精品中文字幕三区| 精品久久久久久中文字幕人妻最新| 综合人妻久久一区二区精品| 亚洲∧v久久久无码精品| 久久久久久综合网天天| 亚洲va久久久噜噜噜久久男同 | 久久夜色tv网站| 999久久久国产精品|