Vue状态机的开启与停止操作详细讲解

上节讨论了递归下降算法，但是状态机何时停止没有介绍，也就是isEnd()函数的判断逻辑，为了搞清楚这个问题，我们需要模拟状态机的运行过程。

前面介绍了，在调用parseElement函数解析标签节点时，会递归地调用parseChildren函数，从而开启新的状态机。在状态机都执行完成后，这时父级节点栈为空，状态机全部停止运行，模板解析完毕

状态机会遭遇不符合预期的状态，可以通过下面parseChildren函数的代码来提现这一点：

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] === '/'){
                                        // 状态机遭遇了闭合标签，此时应该抛出错误，因为它缺少与之对应的开始标签
                                        console.error('无效的结束标签')
                                        continue
                                }else if(/[a-z]/i,test(context.source[1])){
                                        // 省略部分代码       
                                }
                        } else if (context.source.startswith('{{')) [
                                // 省略部分代码       
                        }
                }
                // 省略部分代码       
        }
        return nodes
}

换句话说，按照我们当前的实现思路来解析上述例子中的模板，最终得到的错误信息是:“无效的结束标签”。

但其实还有另外一种更好的解析方式。观察上例中给出的模板，其中存在一段完整的内容，如下：

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

可以看到模板中存在一段完整的内容我们希望解析器可以正常对其进行解析，这很可能也是符合用户意图的。

但实际上，无论哪一种解释方式，对程序的影响都不大。两者的区别体现在错误处理上。对于第一种解释方式，我们得到的错误信息是“无效的结束标签”。而对于第二种解释方式，在“完整的内容”部分被解析完毕后，解析器就会打印错误信息:“<span>标签缺少闭合标签”。很显然，第二种解释方式更加合理

为了实现第二种解释方式我们需要调整 isEnd 函数的逻辑。当判断状态机是否应该停止时，不应该总是与栈顶的父级节点做比较，而是应该与整个父级节点栈中的所有节点做比较。只要父级节点栈中存在于当前遇到的结束标签同名的节点，就停止状态机，如下面的代码所示：

function isEnd(context, ancestors){
        if(!context.source) return true
        // 与父级节点栈内所有节点做比较
        for(let i = ancestors.length-1;i>=0;--i){
                //只要栈中存在与当前结束标签同名的节点，就停止状态机
                if(context.source.startsWith(`</${ancestors[i].tag}`)){
                        return true
                }
        }
}

按照新思路对下面的模板执行解析：

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

其流程如下:

• “状态机1”遇到<div>开始标签，调用parseElement解析函数，并开启“状态机2”解析子节点。
• “状态机2”遇到<span>开始签，调用 parseElement 解析函数，并开启“状态机3”解析子节点。
• “状态机3”遇到 </div> 结束标签，由于节点栈中存在名为 div 的标签节点，于是“状态机3”停止了。

在这个过程中，“状态机2”在调用 parseElement 解函数时，parseElement 函数能够发现<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
}

原文地址：https://blog.csdn.net/loyd3/article/details/128534409