龙空技术网

Vue源码全面解析二十九 parse函数(转换html模板为AST语法结构)

小小的码农 91

前言:

此时我们对“源码转html”都比较看重,各位老铁们都想要剖析一些“源码转html”的相关文章。那么小编也在网摘上收集了一些关于“源码转html””的相关内容,希望大家能喜欢,咱们快快来学习一下吧!

由于parse函数代码实在过于庞大,我这里就不一次性贴出源代码了,大家可以前往()查看源代码。

我们来总结一下该函数的主要功能:

1、warnOnce 函数(用于提示错误)

2、closeElement (处理标签的结束,匹配</ 开头)

3、trimEndingWhitespace 删除结尾的空白节点

4、验证根容器的合法性

规则如下:

1、标签名称不能是 slot 或者 template

2、不能存在 v-for 指令

5、parseHTML 函数(解析html的核心函数),该函数会有单独的篇章来分析,我们先来说一下 “parseHTML ” 函数的参数,主要有12个参数

1、warn 类型为函数

主要用于错误提示

2、expectHTML 类型为布尔值

主要用于判断出来标签结束

3、isUnaryTag 类型为布尔值

判断是否为一元标签 如:<br/>、<hr /> <input /> <img />等

4、canBeLeftOpenTag 类型为函数

是否为此类标签:'colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr,source'

5、shouldDecodeNewlines 类型为布尔值

解码换行符

6、shouldDecodeNewlinesForHref 类型为布尔值

解码href换行符

7、shouldKeepComment 类型为布尔值

是否保留注释

8、outputSourceRange 类型为布尔值

是否保留匹配范围(start、end)的位置

9、start 类型为函数

处理匹配的标签开始

10、end 类型为函数

处理匹配的标签结束

11、chars 类型为函数

处理匹配的空白标签

12、comment 类型为函数

处理模板内的注释标签

最后会返回一个ast结构的对象,如下图:

标签: #源码转html