上節(jié)討論了遞歸下降算法，但是狀態(tài)機(jī)何時(shí)停止沒有介紹，也就是isEnd()函數(shù)的判斷邏輯，為了搞清楚這個(gè)問題，我們需要模擬狀態(tài)機(jī)的運(yùn)行過程。

前面介紹了，在調(diào)用parseElement函數(shù)解析標(biāo)簽節(jié)點(diǎn)時(shí)，會(huì)遞歸地調(diào)用parseChildren函數(shù)，從而開啟新的狀態(tài)機(jī)。在狀態(tài)機(jī)都執(zhí)行完成后，這時(shí)父級節(jié)點(diǎn)棧為空，狀態(tài)機(jī)全部停止運(yùn)行，模板解析完畢

狀態(tài)機(jī)會(huì)遭遇不符合預(yù)期的狀態(tài)，可以通過下面parseChildren函數(shù)的代碼來提現(xiàn)這一點(diǎn)：

function parseChildren(context, ancestors){
	let nodes = []
	const { mode } = context
	while(!isEnd(context, ancestor)){
		let node
		if(mode === TextModes.DATA || mode === TextModes.RCDATA){
			if(mode===TextModes.DATA && context.source[0] === '<'){
				if(context.source[1] === '!'){
					// 省略部分代碼
				}else if(context.source[1] === '/'){
					// 狀態(tài)機(jī)遭遇了閉合標(biāo)簽，此時(shí)應(yīng)該拋出錯(cuò)誤，因?yàn)樗鄙倥c之對應(yīng)的開始標(biāo)簽
					console.error('無效的結(jié)束標(biāo)簽')
					continue
				}else if(/[a-z]/i,test(context.source[1])){
					// 省略部分代碼	
				}
			} else if (context.source.startswith('{{')) [
				// 省略部分代碼	
			}
		}
		// 省略部分代碼	
	}
	return nodes
}

換句話說，按照我們當(dāng)前的實(shí)現(xiàn)思路來解析上述例子中的模板，最終得到的錯(cuò)誤信息是:“無效的結(jié)束標(biāo)簽”。

但其實(shí)還有另外一種更好的解析方式。觀察上例中給出的模板，其中存在一段完整的內(nèi)容，如下：

<div><span></div></span>

可以看到模板中存在一段完整的內(nèi)容我們希望解析器可以正常對其進(jìn)行解析，這很可能也是符合用戶意圖的。

但實(shí)際上，無論哪一種解釋方式，對程序的影響都不大。兩者的區(qū)別體現(xiàn)在錯(cuò)誤處理上。對于第一種解釋方式，我們得到的錯(cuò)誤信息是“無效的結(jié)束標(biāo)簽”。而對于第二種解釋方式，在“完整的內(nèi)容”部分被解析完畢后，解析器就會(huì)打印錯(cuò)誤信息:“<span>標(biāo)簽缺少閉合標(biāo)簽”。很顯然，第二種解釋方式更加合理

為了實(shí)現(xiàn)第二種解釋方式我們需要調(diào)整 isEnd 函數(shù)的邏輯。當(dāng)判斷狀態(tài)機(jī)是否應(yīng)該停止時(shí)，不應(yīng)該總是與棧頂?shù)母讣壒?jié)點(diǎn)做比較，而是應(yīng)該與整個(gè)父級節(jié)點(diǎn)棧中的所有節(jié)點(diǎn)做比較。只要父級節(jié)點(diǎn)棧中存在于當(dāng)前遇到的結(jié)束標(biāo)簽同名的節(jié)點(diǎn)，就停止?fàn)顟B(tài)機(jī)，如下面的代碼所示：

function isEnd(context, ancestors){
	if(!context.source) return true
	// 與父級節(jié)點(diǎn)棧內(nèi)所有節(jié)點(diǎn)做比較
	for(let i = ancestors.length-1;i>=0;--i){
		//只要棧中存在與當(dāng)前結(jié)束標(biāo)簽同名的節(jié)點(diǎn)，就停止?fàn)顟B(tài)機(jī)
		if(context.source.startsWith(`</${ancestors[i].tag}`)){
			return true
		}
	}
}

按照新思路對下面的模板執(zhí)行解析：

<div><span></div></span>

其流程如下:

• “狀態(tài)機(jī)1”遇到<div>開始標(biāo)簽，調(diào)用parseElement解析函數(shù)，并開啟“狀態(tài)機(jī)2”解析子節(jié)點(diǎn)。
• “狀態(tài)機(jī)2”遇到<span>開始簽，調(diào)用 parseElement 解析函數(shù)，并開啟“狀態(tài)機(jī)3”解析子節(jié)點(diǎn)。
• “狀態(tài)機(jī)3”遇到 </div> 結(jié)束標(biāo)簽，由于節(jié)點(diǎn)棧中存在名為 div 的標(biāo)簽節(jié)點(diǎn)，于是“狀態(tài)機(jī)3”停止了。

在這個(gè)過程中，“狀態(tài)機(jī)2”在調(diào)用 parseElement 解函數(shù)時(shí)，parseElement 函數(shù)能夠發(fā)現(xiàn)<span>缺少閉合標(biāo)簽，于是會(huì)打印錯(cuò)誤信息“<span>標(biāo)簽缺少閉合標(biāo)簽”，如下面的代碼所示:

function parseElement(context, ancestors){
	const element = parseTag(context)
	if(element.isSelfClosing) return element
	ancestors.push(element)
	element.children = parseChildren(context, ancestors)
	ancestors.pop()
	if(context.source.startsWith(`</${element.tag}`)){
		parseTag(context, 'end')
	}else{
		console.error(`${element.tag}標(biāo)簽缺少閉合標(biāo)簽`)
	}
	return element
}

到此這篇關(guān)于Vue狀態(tài)機(jī)的開啟與停止操作詳細(xì)講解的文章就介紹到這了,更多相關(guān)Vue狀態(tài)機(jī)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論