建筑专业网站,微网站怎么开通,网站建设烟台,凡科登录网目录 1. 整体流程
2. 回到源码
3. 总结 1. 整体流程
上篇文章中我们说了#xff0c;在模板解析阶段主要做的工作是把用户在template/template标签内写的模板使用正则等方式解析成抽象语法树#xff08;AST#xff09;。而这一阶段在源码中对应解析器在模板解析阶段主要做的工作是把用户在template/template标签内写的模板使用正则等方式解析成抽象语法树AST。而这一阶段在源码中对应解析器parser模块。
解析器顾名思义就是把用户所写的模板根据一定的解析规则解析出有效的信息最后用这些信息形成AST。我们知道在template/template模板内除了有常规的HTML标签外用户还会一些文本信息以及在文本信息中包含过滤器。而这些不同的内容在解析起来肯定需要不同的解析规则所以解析器不可能只有一个它应该除了有解析常规HTML的HTML解析器还应该有解析文本的文本解析器以及解析文本中如果包含过滤器的过滤器解析器。
另外文本信息和标签属性信息却又是存在于HTML标签之内的所以在解析整个模板的时候它的流程应该是这样子的HTML解析器是主线先用HTML解析器进行解析整个模板在解析过程中如果碰到文本内容那就调用文本解析器来解析文本如果碰到文本中包含过滤器那就调用过滤器解析器来解析。如下图所示 2. 回到源码
解析器的源码位于/src/complier/parser文件夹下其主线代码如下
// 代码位置/src/complier/parser/index.js/*** Convert HTML string to AST.*/
export function parse(template, options) {// ...parseHTML(template, {warn,expectHTML: options.expectHTML,isUnaryTag: options.isUnaryTag,canBeLeftOpenTag: options.canBeLeftOpenTag,shouldDecodeNewlines: options.shouldDecodeNewlines,shouldDecodeNewlinesForHref: options.shouldDecodeNewlinesForHref,shouldKeepComment: options.comments,start (tag, attrs, unary) {},end () {},chars (text: string) {},comment (text: string) {}})return root
}从上面代码中可以看到parse 函数就是解析器的主函数在parse 函数内调用了parseHTML 函数对模板字符串进行解析在parseHTML 函数解析模板字符串的过程中如果遇到文本信息就会调用文本解析器parseText函数进行文本解析如果遇到文本中包含过滤器就会调用过滤器解析器parseFilters函数进行解析。
3. 总结
本篇文章主要梳理了模板解析的整体运行流程模板解析其实就是根据被解析内容的特点使用正则等方式将有效信息解析提取出来根据解析内容的不同分为HTML解析器文本解析器和过滤器解析器。而文本信息与过滤器信息又存在于HTML标签中所以在解析器主线函数parse中先调用HTML解析器parseHTML 函数对模板字符串进行解析如果在解析过程中遇到文本或过滤器信息则再调用相应的解析器进行解析最终完成对整个模板字符串的解析。
了解了模板解析阶段的整体运行流程后接下来我们就对流程中所涉及到的三种解析器分别深入分析逐个击破。
