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

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

狀態(tài)機會遭遇不符合預(yù)期的狀態(tài)，可以通過下面parseChildren函數(shù)的代碼來提現(xià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)機遭遇了閉合標簽，此時應(yīng)該拋出錯誤，因為它缺少與之對應(yīng)的開始標簽
					console.error('無效的結(jié)束標簽')
					continue
				}else if(/[a-z]/i,test(context.source[1])){
					// 省略部分代碼	
				}
			} else if (context.source.startswith('{{')) [
				// 省略部分代碼	
			}
		}
		// 省略部分代碼	
	}
	return nodes
}

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

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

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

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

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

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

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

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

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

其流程如下:

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

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

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}標簽缺少閉合標簽`)
	}
	return element
}

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

最新評論