Vue源码解析：模板编译Parse(三)

本篇文章将解析chars函数与comment函数

chars

参数

text：解析得到的文本字符串

start：字符串解析开始位置

end：字符串解析终止位置

主要逻辑

1. 当currentParent不存在，即当前解析得到的字符串内容为根节点，vue会控制台警告并终止解析

2. 获取兄弟节点数组

    2.1 字符串位于

标签内或者trim处理后仍然有值：对于script/style标签内的字符串不作更改，否则就进行转码

    2.2 没有兄弟节点且文本为空白节点，text = “”
    2.3 有兄弟节点且只有空白文本：将换行符\r\n去除或者赋单个空格字符
    2.4 其他情况，需要保留空格就赋单个空格字符，否则就为 “”
3. 在第二步处理后仍有值的情况：
    3.1 压缩文本
    3.2 parseText函数对带有模板{{}}的字符进行解析，将其替换成_s()，并构建当前节点
    3.3 对普通字符串进行处理，并构建当前节点
4. 构建父子关系：兄弟节点数组push当前节点

parseText
在上段3.2的地方提到了parseText函数，此函数也是利用正则对模板字符进行处理。详见：juejin.cn/post/688828…
comment
comment是对注释节点做处理，很简单，就是将其当成一个文本节点，然后构建父子关系

最后
文本节点的处理，比较繁琐，也是利用了正则；注释节点，简单粗暴，直接当成文本节点
到此为止，parseHTML的大部分过程都详细地梳理了一遍。
整体看来难度并不是很复杂，只是细节比较多。