什么是詞法分析器(tokenize)？
詞法分析器又稱(chēng)掃描器，詞法分析是指將我們編寫(xiě)的文本代碼流解析為一個(gè)一個(gè)的記號(hào)，分析得到的記號(hào)以供后續(xù)語(yǔ)法分析使用
'div > div.aaron input[name=ttt]'是一個(gè)相對(duì)復(fù)雜的選擇器，這樣的結(jié)構(gòu)在不支持高級(jí)API的瀏覽器中是無(wú)法直接通過(guò)獲取的，那么所有選擇器的庫(kù)就必須要干的一件事，把復(fù)雜選擇器按照一樣的設(shè)計(jì)規(guī)則，分解成瀏覽器原始API能夠識(shí)別的結(jié)構(gòu)，然后通過(guò)其他的方法找個(gè)這個(gè)結(jié)構(gòu)。所以這里就要引入一個(gè)切割的算法了，也有點(diǎn)類(lèi)似編譯原理的詞法分析。
所以引擎在遇到無(wú)法直接處理的復(fù)雜選擇器時(shí)，就需要按照內(nèi)部的規(guī)則進(jìn)行分組了。
Sizzle的tokenize格式如下 ：
{
value:'匹配到的字符串',
type:'對(duì)應(yīng)的Token類(lèi)型',
matches:'正則匹配到的一個(gè)結(jié)構(gòu)'
}
tokenize需要解析的幾種情況：
多重選擇器,逗號(hào)分組
selector = 'div,input'
在出現(xiàn)逗號(hào)分隔符的時(shí)候，就說(shuō)明選擇所有指定的選擇器的組合結(jié)果，所以需要分割成各自的處理模塊，這種事情當(dāng)然交給正則來(lái)做是最合適的
A: 常規(guī)的思路先是通過(guò)split(,)先把選擇器劈成二部分，然后依次處理各自的模塊
B：sizzle的思路則是循環(huán)一個(gè)一個(gè)分組出來(lái)的
我們假設(shè)一個(gè)復(fù)雜的選擇器
div.aaron > input[name=ttt] , div p > span
這里涉及了3大塊
1、分組逗號(hào)
2、層級(jí)關(guān)系
3、每種元素處理
具體我們參考下我寫(xiě)的代碼區(qū)域
$("#test2").click(function() {
//sizzle解析區(qū)域
}
其中分3大塊的處理，其實(shí)很明了，因?yàn)檫@個(gè)案例的問(wèn)題，我們沒(méi)有層級(jí)關(guān)系的具體代碼，下章會(huì)詳細(xì)講解，我們先理解這個(gè)思路。
sizzle對(duì)于分組過(guò)濾處理都用正則，其中都有一個(gè)特點(diǎn)，就是都是元字符^開(kāi)頭，限制匹配的初始，所以tokenize也是從左邊開(kāi)始一層一層的剝離。
其中會(huì)用到的正則：
//分組 var rcomma = /^[\x20\t\r\n\f]*,[\x20\t\r\n\f]*/; //關(guān)系符 var rcombinators = /^[\x20\t\r\n\f]*([>+~]|[\x20\t\r\n\f])[\x20\t\r\n\f]*/; //空白 var whitespace = "[\\x20\\t\\r\\n\\f]";
所以最終的結(jié)構(gòu):
groups: [
tokens： {
matches: ? type : ? value : ?
},
tokens： {
matches: ? type : ? value : ?
}
]
當(dāng)然為什么是這樣的結(jié)構(gòu)，這是sizzle內(nèi)部的一個(gè)解析規(guī)則罷了。后面就用這個(gè)規(guī)則去做匹配與篩選。
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)