jquery選擇器引擎sizzle淺析_jquery

上面說了不是很精彩的開場白，我么來個 for example: $('.test') 在jquery的流程是怎么走的呢？
1.首先會做如下的判斷
代碼如下:
/**
*關于 querySelectorAll函數
*返回當前文檔中匹配一個特定選擇器的所有的元素
*var nodelist = element.querySelectorAll("div.test");
*支持瀏覽器 ie8+,Chrome,Firefox(3.5)
* 如果你不清楚可以google 一下
*/
if ( document.querySelectorAll ) {
(function(){
var oldSizzle = Sizzle,
div = document.createElement("div"),
id = "__sizzle__";
div.innerHTML = "";
// Safari can't handle uppercase or unicode characters when
// in quirks mode.
if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
return;
}
Sizzle = function( query, context, extra, seed ) {
//使用querySelectorAll 來查詢
}
}

如果你的瀏覽器是ie8+ 或者 谷歌，直接通過內置的querySelectorAll(".test")返回dom結構。 如果你使用是ie6，那么下面事情發生了
2. 不支持querySelectorAll 就會啟動內部 sizzle。下面是流程
代碼如下:
/**
.sizzle 通過
chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g
這個正則進行匹配，
.把我們傳來的參數'.test'，匹配成'.test' 放到數組
.檢測瀏覽器是否支持getElementsByClassName 如果支持，則通過此函數返回dom，如果不支持此函數則 context.getElementsByTagName( "*" ) ,通過上下文把所有的元素選出來，在通過循環，選擇className = 'test' 的元素，放入數組返回dom。
*/

ok，以上是$('.test')的流程，如果你很迷惑，你可以看看源碼，調試一下。
關于sizzle的選擇器
個人認為，sizzle選擇器是增強版的querySelectorAll 函數， 因為querySelectorAll 不支持 'div.test :eq(1)' 這樣的selector 和css3選擇！
當你的selector里面不出現nth|eq|gt|lt|first|last|even|odd 這樣的字符時候， 從右向左，所謂的從右向左，比如 $('div img') 首先會把所有的img 選出來，通過parent 是div 進行過濾 。 這樣很高效的原因是只進行一次dom的查詢！
當你selector 出現了'eq(1)' 這樣的字符的時候，就變正常了，從左向右！這是因為要對結果集進行過濾。
思考
$('div img:eq(0)') 與 $('div img').first() 哪個效率高？ 個人認為 后一個高一些，因為 第一從左向右效率低下！沒有測試過！理論推導！

今天大致看了下流程，具體的代碼沒怎么細研究！這里面好的思想值得學習和吸收
歡迎拍磚

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com