Vue3+Vite+Vant-UI 開發(fā)雙端招聘APP [獨(dú)家首發(fā)持續(xù)更新]

download：https://www.zxit666.com/6479/

解析 CSS 規(guī)則?parseRule()

private parseRule() { ? ?const rule: Rule = { ? ? ? ?selectors: [], ? ? ? ?declarations: [], ? ?} ? ?rule.selectors = this.parseSelectors() ? ?rule.declarations = this.parseDeclarations() ? ?return rule }

在?parseRule()?里，它分別調(diào)用了?parseSelectors()?去解析 CSS 選擇器，然后再對(duì)剩余的 CSS 文本執(zhí)行?parseDeclarations()?去解析 CSS 屬性。

解析選擇器?parseSelector()

private parseSelector() { ? ?const selector: Selector = { ? ? ? ?id: '', ? ? ? ?class: '', ? ? ? ?tagName: '', ? ?} ? ?switch (this.rawText[this.index]) { ? ? ? ?case '.': ? ? ? ? ? ?this.index++ ? ? ? ? ? ?selector.class = this.parseIdentifier() ? ? ? ? ? ?break ? ? ? ?case '#': ? ? ? ? ? ?this.index++ ? ? ? ? ? ?selector.id = this.parseIdentifier() ? ? ? ? ? ?break ? ? ? ?case '*': ? ? ? ? ? ?this.index++ ? ? ? ? ? ?selector.tagName = '*' ? ? ? ? ? ?break ? ? ? ?default: ? ? ? ? ? ?selector.tagName = this.parseIdentifier() ? ?} ? ?return selector }private parseIdentifier() { ? ?let result = '' ? ?while (this.index < this.len && this.identifierRE.test(this.rawText[this.index])) { ? ? ? ?result += this.rawText[this.index++] ? ?} ? ?this.sliceText() ? ?return result }

選擇器我們只支持標(biāo)簽稱號(hào)、前綴為?#?的 ID 、前綴為恣意數(shù)量的類名?.?或上述的某種組合。假如標(biāo)簽稱號(hào)為?*，則表示它是一個(gè)通用選擇器，能夠匹配任何標(biāo)簽。

規(guī)范的 CSS 解析器在遇到無(wú)法辨認(rèn)的局部時(shí)，會(huì)將它丟掉，然后繼續(xù)解析其他局部。主要是為了兼容舊閱讀器和避免發(fā)作錯(cuò)誤招致程序中綴。我們的 CSS 解析器為了完成簡(jiǎn)單，沒(méi)有做這方面的做錯(cuò)誤處置。

解析 CSS 屬性?parseDeclaration()

private parseDeclaration() { ? ?const declaration: Declaration = { name: '', value: '' } ? ?this.removeSpaces() ? ?declaration.name = this.parseIdentifier() ? ?this.removeSpaces() ? ?while (this.index < this.len && this.rawText[this.index] !== ':') { ? ? ? ?this.index++ ? ?} ? ?this.index++ // clear : ? ?this.removeSpaces() ? ?declaration.value = this.parseValue() ? ?this.removeSpaces() ? ?return declaration }

parseDeclaration()?會(huì)將?color: red;?解析為一個(gè)對(duì)象?{ name: "color", value: "red" }。

小結(jié)

CSS 解析器相對(duì)來(lái)說(shuō)簡(jiǎn)單多了，由于很多學(xué)問(wèn)點(diǎn)在 HTML 解析器中曾經(jīng)講到。整個(gè) CSS 解析器的代碼大約 100 多行，假如你閱讀過(guò) HTML 解析器的源碼，置信看 CSS 解析器的源碼會(huì)更輕松。