生成AST(二)-流程

115 阅读1分钟

生成AST(二)-流程

<div id="app"><span disabled="false">{{message}}</span></div>

以上面html代码为例子来说明整个流程运转

栈变化图

drawio

image.png

各项指标变化表
循环次数操作stackhtml
1匹配到了开始标签div,入栈div dom<span disabled="false">{{message}}</span></div>
2匹配到了开始标签span,入栈span dom
div dom
{{message}}</span></div>
3匹配到了文本信息{{message}},将文本节点信息添加到span的children中span dom
div dom
</span></div>
4匹配到结束标签span,出栈div dom</div>
5匹配到结束标签div,出栈空,循环结束