jQuery 源碼分析筆記(2) 變量列表
_$ = window.$;
這兩個(gè)變量是jQuery唯一使用的兩個(gè)全局變量。在jQuery.noConflict()函數(shù)中,會(huì)把這兩個(gè)變量恢復(fù)回去。
對(duì)于瀏覽器檢測(cè),jQuery使用的是檢查UserAgent,而沒有使用特性檢測(cè)。
rwebkit = /(webkit)[ \/]([\w.]+)/,
ropera = /(opear)(?:.*version)?[ \/](\w+)/,
rmsie = /(msie) ([\w.]+)/,
rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,
初始化函數(shù)init
jQuery對(duì)JS對(duì)象的處理比較繞,而最終目的就是把jQuery選擇器得到的結(jié)果變成和數(shù)組差不多的一個(gè)對(duì)象。有l(wèi)ength,first,last等。因?yàn)?("...")就是從DOM樹從選擇一些節(jié)點(diǎn)出來。但是,$還有很多其他功能,比如常用的$(function() { ... })用來頁面加載后初始化執(zhí)行,$("<..>...</...>")來直接得到一個(gè)節(jié)點(diǎn),用來append到DOM樹中。
接下來從93行開始就是很長(zhǎng)的一段init函數(shù)。Init: function(selector, context, rootjQuery)
步驟:
1、Selector是非法參數(shù):空字符,null和undefined則直接返回this。即有默認(rèn)屬性的jQuery對(duì)象。
2、Selector是DOMElement。即用原生的JS,比如getElementById等得到的元素。那么,相當(dāng)于把原生的DOM對(duì)象用$包裝一次。把這個(gè)元素放到內(nèi)部數(shù)組的第一個(gè)位置,并把length設(shè)置為1。然后返回。
3、特殊優(yōu)化處理$("body")。即document.body元素。
4、Selector是以<開頭,以>結(jié)尾的字符串。那么假定是想用字符串新建一個(gè)DOM元素。比如$("<a )。為了安全起見,這里使用了一個(gè)正則表達(dá)式來檢查,到底是<...>...</...>形式還是#id的形式。
quickExpr = /^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/。在quickExpr.exec(selector)后,如果是HTML字符串,那么會(huì)得到[match, match, undefined],而#id形式會(huì)得到[#id, undefined, id]的結(jié)果。這樣就把字符串區(qū)別開了。
對(duì)于HTML字符串,如果只有一個(gè)tag,那么直接調(diào)用createElement。否則調(diào)用一個(gè)createFragment輔助函數(shù),這個(gè)函數(shù)使用createDocumentFragment,然后把所有tag都插進(jìn)去。
createFragment實(shí)現(xiàn)在5892行,這里有一個(gè)值得注意的地方就是jQuery對(duì)于HTML片段做了緩存處理。而且對(duì)于不同的瀏覽器和元素有不同的處理,作者寫了大段的注釋說明。歸納起來就是(1)只緩存小于0.5KB的小片段。(2)selected狀態(tài)不緩存。(3)IE6的<object>和<embed>元素不緩存。(4)WebKit不緩存元素的checked屬性。以上這些不緩存的原因是jQuery使用克?。–lone)節(jié)點(diǎn)的方式進(jìn)行緩存,而2-4提到的情況在Clone時(shí)會(huì)丟失。jQuery使用了正則,或者jQuery.support輔助函數(shù)來進(jìn)行是否緩存的策略判斷。這里先略過。jQuery.support牽扯很多瀏覽器相關(guān)問題。
5、如果在4中檢查到是#id,則直接調(diào)用document.getElementById
6、如果selector是function,則把這個(gè)函數(shù)當(dāng)作是document.ready的事件處理函數(shù)
7、剩余的各種情況,比如傳入了context等。統(tǒng)一調(diào)用一個(gè)find(selector)來處理。這個(gè)函數(shù)以后再議。(5109行,jQuery.find = Sizzle; jQuery.expr = Sizzle.selectors; 表明,其他復(fù)雜的selector表達(dá)式都扔給Sizzle項(xiàng)目了)
jQuery基本成員
jQuery被設(shè)計(jì)成一個(gè)行為和數(shù)組很像的對(duì)象。所以需要一些轉(zhuǎn)換方法和基本屬性。
1、jquery:版本號(hào)。最簡(jiǎn)單的得到版本號(hào)的方式:$().jquery
2、length和size():長(zhǎng)度。
3、toArray():轉(zhuǎn)換成JS數(shù)組
4、get(num):返回第N個(gè)元素。如果傳入null,則直接返回toArray()的結(jié)果。這里返回的就是DOMElement了。
5、pushStack():參見http://api.jquery.com/pushStack/ 。內(nèi)部new了一個(gè)新的jQuery對(duì)象,然后把elems和selector得到的結(jié)果合并進(jìn)去,然后返回這個(gè)新的jQuery對(duì)象。這里有個(gè)prevObject屬性的設(shè)置,往下看end()函數(shù)。
6、each(callback, args):遍歷數(shù)組內(nèi)的元素。內(nèi)部調(diào)用了$.each Utiltiy。
7、ready(fn):其實(shí)和$(function() { })是等價(jià)的。
8、eq(i):i允許正負(fù)數(shù)字,而且返回的仍然是jQuery對(duì)象,只不過只有一個(gè)元素了。其實(shí)只是slice的包裝。
9、first()和last():其實(shí)就是eq(0)和eq(-1),很簡(jiǎn)單的一個(gè)包裝。
10、slice():根據(jù)參數(shù)獲得數(shù)組一部分的引用。內(nèi)部使用pushStack實(shí)現(xiàn)的。所以返回的也是一個(gè)新的jQuery對(duì)象。
11、map(callback):對(duì)每個(gè)元素依次調(diào)用callback。把原來的元素A的數(shù)組映射為元素B的數(shù)組。callback就是元素A->元素B的映射函數(shù)。函數(shù)式編程(FP)里很基礎(chǔ)的一個(gè)概念。
12、end(): 參見http://api.jquery.com/end 。這個(gè)是返回選擇器的上一個(gè)狀態(tài)。返回的是jQuery.prevObject屬性。這個(gè)屬性是在pushStack函數(shù)里面設(shè)置的,它在返回新的jQuery對(duì)象之前,把這個(gè)新對(duì)象的prevObject設(shè)置為this。這樣多次pushStack之后就變成了一個(gè)鏈表(chain)。而end()就是沿著鏈表往前走一個(gè)節(jié)點(diǎn)。經(jīng)過了selector之后,根的prevObject是document。比如$("body div").prevObject就是Document。
extend函數(shù)
在jQuery基本成員之后,所有其他成員都是用extend加上去的。聲明:
jQuery.extend = jQuery.fn.extend = function() { }
把target后面的所有object參數(shù)的屬性全部賦值到target上,如果第一個(gè)參數(shù)是boolean值,則用來指定是否深拷貝。然后返回修改過的target(不是新對(duì)象,extend函數(shù)直接修改原對(duì)象)。
相關(guān)文章
jQuery中toggle()函數(shù)的使用實(shí)例
關(guān)于jQuery中的toggle()函數(shù),相信大家都非常的了解,網(wǎng)上也有許多的相關(guān)教程,今天要給大家分享的是在實(shí)際的項(xiàng)目中toggle()的使用方法,需要的小伙伴可以參考下。2015-04-04省市區(qū)三級(jí)聯(lián)動(dòng)jquery實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)紹了省市區(qū)三級(jí)聯(lián)動(dòng)jquery實(shí)現(xiàn)代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10通過jQuery源碼學(xué)習(xí)javascript(一)
最近在做日志統(tǒng)計(jì)程序,發(fā)現(xiàn)對(duì)方的程序是在Jquery基礎(chǔ)上進(jìn)行開發(fā)的,而公司的網(wǎng)站的框架是prototype。而且我也早就想了解一下Jquery源碼,故決定研究Jquery源碼,模擬它的方法2012-12-12jquery限定文本框只能輸入數(shù)字(整數(shù)和小數(shù))
這篇文章主要介紹了jquery限定文本框只能輸入數(shù)字,包括整數(shù)和小數(shù),感興趣的小伙伴們可以參考一下2016-01-01LazyForm jQuery plugin 定制您的CheckBox Radio和Select
LazyForm jQuery plugin 定制您的CheckBox Radio和Select ,需要的朋友可以參考下。2009-10-10jQuery自定義圖片縮放拖拽插件imageQ實(shí)現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了jQuery自定義圖片縮放拖拽插件imageQ實(shí)現(xiàn)方法,涉及jQuery擴(kuò)展操作及頁面元素操作技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05jQuery級(jí)聯(lián)操作綁定事件實(shí)例
這篇文章主要介紹了jQuery級(jí)聯(lián)操作綁定事件,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-09-09jQuery+css+html實(shí)現(xiàn)頁面遮罩彈出框
面遮罩彈出框已經(jīng)不是一個(gè)陌生的話題了,實(shí)現(xiàn)的方法大同小異多種多樣,今天用jQuery實(shí)現(xiàn)頁面遮罩彈出框,主要用的技術(shù)有JQuery,css和html,感興趣的朋友可以參考下哈2013-03-03