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 parseHTML函数源码解析AST更多内容。