jquery原理,jquery的原理

jQuery 是如何判斷HTML頁面加載完畢的？它的原理是什么?

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

創(chuàng)新互聯(lián)公司長期為上千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為會昌企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、成都網(wǎng)站制作，會昌網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

//以下截取自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拖動層的工作原理

主要分三個部分，注冊Handler的Click事件

Click事件引發(fā)是開始拖動，此時注冊Document的MouseMove事件，Move的時候修改對象的位置

松開或者ESC的時候取消移動，注銷Document的Move事件

基本上所有的DragDrop都是這么實現(xiàn)的

jquery原理是什么？如何自己寫一個jquery選擇器

jQuery選擇器的實現(xiàn)原理很簡單，就是調(diào)用getElementsByName然后遍歷getAttribute，當(dāng)然還有g(shù)etElementsByTagName、getElementsById、querySelectorAll等等，jQuery一共有9種選擇器。

自己做的話，實現(xiàn)主要的選擇器，大致代碼也就一百多行吧。百度搜“實現(xiàn) jQuery 選擇器”有很多可以參考的代碼。

jQuery選擇器的工作原理和優(yōu)化分析

每次申明一個jQuery對象的時候，返回的是jQuery.prototype.init

對象，很多人就會不明白，init明明是jQuery.fn的方法啊，實際上這里不是方法，而是init的構(gòu)造函數(shù)，因為js的prototype對象可

以實現(xiàn)繼承，加上js的對象只是引用不會是拷貝，new

jQuery,new

jQuery.fn和new

jQuery.fn.init的子對象是一樣的，只是有沒有執(zhí)行到init的不同，這里就不講原因了，等下一篇再講為什么會是這樣。

當(dāng)我們使用選擇器的時候$(selector,content)，就會執(zhí)行

init(selectot,content)，我們看看inti中是怎樣執(zhí)行的：

復(fù)制代碼

代碼如下:

if

(

typeof

selector

==

"string"

)

{

//正則匹配，看是不是HTML代碼或者是#id

var

match

=

quickExpr.exec(

selector

);

//沒有作為待查找的

DOM

元素集、文檔或

jQuery

對象。

//selector是#id的形式

if

(

match

(match[1]

||

!context)

)

{

//

HANDLE:

$(html)

-

$(array)

//HTML代碼,調(diào)用clean補(bǔ)全HTML代碼

if

(

match[1]

){

selector

=

jQuery.clean(

[

match[1]

],

context

);

}

//

是:

$("#id")

else

{

//判斷id的Dom是不是加載完成

var

elem

=

document.getElementById(

match[3]

);

if

(

elem

){

if

(

elem.id

!=

match[3]

)

return

jQuery().find(

selector

);

return

jQuery(

elem

);//執(zhí)行完畢return

}

selector

=

[];

}

//非id的形式.在context中或者是全文查找

}

else{

return

jQuery(

context

).find(

selector

);

}

}

這里就說明只有選擇器寫成$(‘#id')的時候最快，相當(dāng)于執(zhí)行了一次

getElementById，后邊的程序就不用再執(zhí)行了。當(dāng)然往往我們需要的選擇器并不是這么簡單，比如我們需要id下的CSS為className，

有這樣的寫法$(‘#id.className')和$(‘#id').find(‘.className');這兩種寫法的執(zhí)行結(jié)果都是一樣的，比

如div

id=”id”span

class=”className”/span/div，返回的肯定都是span

class=”className”/span，但是執(zhí)行的效率是完全不一樣的。

在分析一下上邊的代碼，如果不是$(‘#id')這樣的簡單選擇器的話，都會執(zhí)行find函

數(shù)，那我們再看看find到底是做用的：

復(fù)制代碼

代碼如下:

find:

function(

selector

)

{

//在當(dāng)前的對象中查找

var

elems

=

jQuery.map(this,

function(elem){

return

jQuery.find(

selector,

elem

);

});

//下邊的代碼可以忽略，只是做一些處理

//這里應(yīng)用了js的正則對象的靜態(tài)方法test

//indexOf("..")需要了解一下xpath的語法,就是判斷selector中包含父節(jié)點的寫法

//本意就是過濾數(shù)組的重復(fù)元素

return

this.pushStack(

/[^+]

[^+]/.test(

selector

)

||

selector.indexOf("..")

-1

?

jQuery.unique(

elems

)

:

elems

);

}

如果這樣寫$(‘#id

.className')，就會執(zhí)行到擴(kuò)展的find(‘#id

.className',document)，因為當(dāng)前的this是document的jQuery數(shù)組，那我們在看看擴(kuò)展的find他的實現(xiàn)，代碼比較

多，就不列出來，總之就是從第二個參數(shù)傳遞進(jìn)行的dom第一個子節(jié)點開始找，遇見#比對id，遇見.比對ClassName，還有：+-等處理。

那我們要優(yōu)化，是不是就要想辦法讓第二個參數(shù)context的范圍最小，那樣遍歷是不是就很少了？

如果我們這樣寫$(‘#id').find(‘.className')，那程序只這樣執(zhí)行

的，第一次init的時候執(zhí)行一步getElementById，就return了，接著執(zhí)行

find(‘.className',divDocument)，divDocument就是我們第一次選擇的是div標(biāo)簽，如果document下有很

多dom對象的時候，這次只遍歷divDocument是不是少了很多次，而且在第一次選擇id的速度也要比遍歷快的多。

現(xiàn)在大家應(yīng)該是明白了吧。就是說第一層選擇最好是ID，而是簡單選擇器，目的就是定義范圍，

提高速度，這次就說這些，選擇寫法的優(yōu)化，其他的優(yōu)化，下次再說。

網(wǎng)站欄目：jquery原理,jquery的原理
網(wǎng)站路徑：http://muchs.cn/article42/phgdhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、虛擬主機(jī)、App開發(fā)、全網(wǎng)營銷推廣、域名注冊、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)