vue parseHTML函数源码解析 AST预备知识

更新时间：2022年07月13日 17:15:23 作者：李李

这篇文章主要为大家介绍了vue parseHTML函数源码解析 AST预备知识示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

在正式扎进Vue parse源码之前，我们先了解下他周边的工具函数，这能帮我们快速的去理解阅读。

还记得我们在上章节讲的element元素节点的描述对象吗？

var element = {
	type: 1,
	tag: tag,
	parent: null,
	attrsList: attrs,
	children: []
}

在源码中定义了一个createASTElement函数，用来创建一个元素的描述对象。

createASTElement函数

function createASTElement(tag, attrs, parent) {
		return {
			type: 1,
			tag: tag,
			attrsList: attrs,
			attrsMap: makeAttrsMap(attrs),
			parent: parent,
			children: []
		}
	}

解析指令所用正则

var onRE = /^@|^v-on:/;
var dirRE = /^v-|^@|^:/;
var forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
var forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
var stripParensRE = /^\(|\)$/g;
var argRE = /:(.*)$/;
var bindRE = /^:|^v-bind:/;
var modifierRE = /\.[^.]+/g;

在解析开始标签的时候你遇到的不仅有属性，还有一些Vue 自定义的指令。下面一起来分析下解析指令会有用哪些正则。

onRE

var onRE = /^@|^v-on:/;

匹配以字符 @ 或 v-on: 开头的字符串，主要作用是检测标签属性名是否是监听事件的指令。

dirRE

var const dirRE = /^v-|^@|^:/

匹配以字符 v- 或 @ 或 : 开头的字符串，主要作用是检测标签属性名是否是指令。在Vue中所有以 v- 开头的属性都被认为是指令，另外@字符是 v-on 的缩写，: 字符是 v-bind 的缩写。

forAliasRE

var forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;

匹配 v-for 属性的值，并捕获 in 或 of 前后的字符串。都是正则大神就不解释怎么捕获的了。

forIteratorRE

var forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;

这个也是匹配v-for的属性值，不过比之前要稍微复杂点：列表渲染 v-for（https://cn.vuejs.org/v2/guide/list.html)需要先了解下这个。

//示例:1
<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>
//示例:2 
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

没错就是用来捕获，示例1中的：'obj , index' 示例2中的：'value, key, index' 。

stripParensRE

var stripParensRE = /^\(|\)$/g;

这个捕获组用来捕获要么以字符 ( 开头，要么以字符 ) 结尾的字符串，或者两者都满足。那么这个正则的作用是什么呢？我们在讲解正则 forIteratorRE 时有个细节不知道大家注意到了没有，就是 forIteratorRE 正则所匹配的字符串是 'obj, index' ，而不是 '(obj, index)' ，这两个字符串的区别就在于第二个字符串拥有左右括号，所以在使用 forIteratorRE 正则之前，需要使用 stripParensRE 正则去掉字符串 '(obj, index)' 中的左右括号，实现方式很简单:

"(obj, index)".replace(stripParensRE, "")

argRE

var argRE = /:(.*)$/;

argRE正则用来匹配指令编写中的参数，并且拥有一个捕获组，用来捕获参数的名字。

示例：

<div v-on:click.item="handle"></div>

其中 v-on 为指令，click为传递给 v-on 指令的参数，stop 为修饰符。

bindRE

var bindRE = /^:|^v-bind:/;

该正则用来匹配以字符:或字符串 v-bind: 开头的字符串，主要用来检测一个标签的属性是否是绑定(v-bind)。

modifierRE

var modifierRE = /\.[^.]+/g;

该正则用来匹配修饰符的，但是并没有捕获任何东西,但你可以用match、exec等方法获取与当前正则匹配成功的信息。

parse 函数中的变量

在讲解 parse 函数直接我们还需要先了解下它内部所定义的一些变量以及用途。

function parse(template, options) {
	warn$2 = options.warn || baseWarn;
	platformIsPreTag = options.isPreTag || no;
	platformMustUseProp = options.mustUseProp || no;
	platformGetTagNamespace = options.getTagNamespace || no;
	transforms = pluckModuleFunction(options.modules, 'transformNode');
	preTransforms = pluckModuleFunction(options.modules, 'preTransformNode');
	postTransforms = pluckModuleFunction(options.modules, 'postTransformNode');
	delimiters = options.delimiters;
	var stack = [];
	var preserveWhitespace = options.preserveWhitespace !== false;
	var root;
	var currentParent;
	var inVPre = false;
	var inPre = false;
	var warned = false;
	function warnOnce(msg) {
        //...
	}
	function closeElement(element) {
       //...
	}
	parseHTML(template, {
		warn: warn$2,
		expectHTML: options.expectHTML,
		isUnaryTag: options.isUnaryTag,
		canBeLeftOpenTag: options.canBeLeftOpenTag,
		shouldDecodeNewlines: options.shouldDecodeNewlines,
		shouldDecodeNewlinesForHref: options.shouldDecodeNewlinesForHref,
		shouldKeepComment: options.comments,
		start: function start(tag, attrs, unary) {},
		end: function end() {},
		chars: function chars(text) {},
		comment: function comment(text) {},
	});
	return root
}

我们先来看下针对web平台初始化的一些变量。

warn$2 = options.warn || baseWarn;
platformIsPreTag = options.isPreTag || no;
platformMustUseProp = options.mustUseProp || no;
platformGetTagNamespace = options.getTagNamespace || no;
transforms = pluckModuleFunction(options.modules, 'transformNode');
preTransforms = pluckModuleFunction(options.modules, 'preTransformNode');
postTransforms = pluckModuleFunction(options.modules, 'postTransformNode');
delimiters = options.delimiters;

warn$2 函数毋庸置疑它作用是用来打印警告信息的
platformIsPreTag 函数是一个编译器选项，其作用是通过给定的标签名字判断该标签是否是 pre 标签。
platformMustUseProp 该函数也是一个编译器选项，其作用是用来检测一个属性在标签中是否要使用元素对象原生的 prop 进行绑定。
platformGetTagNamespace 该函数是一个编译器选项，其作用是用来获取元素(标签)的命名空间。
transforms 、preTransforms 、postTransforms 还没讲到它们的上下文，暂时不解释它们的作用。
delimiters 它的值为 options.delimiters 属性，它的值就是在创建 Vue 实例对象时所传递的 delimiters 选项。

继续往下看：

var stack = [];
var preserveWhitespace = options.preserveWhitespace !== false;
var root;
var currentParent;
var inVPre = false;
var inPre = false;
var warned = false;

stack 初始值是一个空数组，作用在上个章节我们讲到，回退操作为了让子元素描述对象的parent属性能够正确指向其父元素。
preserveWhitespace 是一个布尔值并且它的值与编译器选项中的options.preserveWhitespace选项有关，只要 options.preserveWhitespace 的值不为false，那么 preserveWhitespace 的值就为真。其中 options.preserveWhitespace 选项用来告诉编译器在编译 html 字符串时是否放弃标签之间的空格，如果为 true 则代表放弃。
root 存储最终生成的AST。
currentParent 通过上章节了解到，该变量维护元素描述对象之间的父子关系。
inVPre 初始值：false。标识当前解析的标签是否在拥有 v-pre (跳过这个元素和它的子元素的编译过程。)的标签之内。
inPre 初始值：false。标识当前正在解析的标签是否在 <pre></pre> 标签之内。
warned 初始值：false。用来打印警告信息的函数，只不过 warnOnce 函数就如它的名字一样，只会打印一次警告信息，并且 warnOnce 函数也是通过调用 warn 函数来实现的。

好了一些边边角角的东西就先讲到这，接下来我们一起来分析Vue parse源码看看一颗完整的AST树是如何构建出来的。更多关于vue parseHTML函数AST预备的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

如何使用elementUI组件实现表格的分页及搜索功能
最近在使用element-ui的表格组件时,遇到了搜索框功能的实现问题,这篇文章主要给大家介绍了关于如何使用elementUI组件实现表格的分页及搜索功能的相关资料,需要的朋友可以参考下
2023-03-03
vue简易记事本开发详解
这篇文章主要为大家详细介绍了vue简易记事本的开发过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
atom-design(Vue.js移动端组件库)手势组件使用教程
这篇文章主要介绍了atom-design(Vue.js移动端组件库)手势组件使用教程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
使用Vue.js和Flask来构建一个单页的App的示例
本篇文章主要介绍了使用Vue.js和Flask来构建一个单页的App的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
vue3封装轮播图组件功能的完整步骤
我们都知道,轮播图组件模板结构通常是ul包裹li的结构,在vue中,li的数量也通常是由后端接口返回的数据决定,下面这篇文章主要给大家介绍了关于vue3封装轮播图组件功能的相关资料,需要的朋友可以参考下
2022-11-11
iview同时验证多个表单问题总结
这篇文章主要介绍了iview同时验证多个表单问题总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
浅谈vue.js导入css库(elementUi)的方法
下面小编就为大家分享一篇浅谈vue.js导入css库(elementUi)的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue2.0脚手架搭建
这篇文章介绍了使用vue-cli搭建脚手架的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-03-03
Vue详细的入门笔记
这篇文章主要介绍了Vue详细的入门笔记，对Vue感兴趣的同学，可以参考下
2021-05-05
vue条件渲染列表渲染原理示例详解
这篇文章主要为大家介绍了vue条件渲染列表渲染原理示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07