java源码转为ast,Vue源码解析之Template转化为AST

什么是AST

在Vue的mount过程中，template会被编译成AST语法树，AST是指抽象语法树(abstract syntax tree或者缩写为AST)，或者语法树(syntax tree)，是源代码的抽象语法结构的树状表现形式。

Virtual Dom

Vue的一个厉害之处就是利用Virtual DOM模拟DOM对象树来优化DOM操作的一种技术或思路。

Vue源码中虚拟DOM构建经历 template编译成AST语法树 -> 再转换为render函数 最终返回一个VNode(VNode就是Vue的虚拟DOM节点)

本文通过对源码中AST转化部分进行简单提取，因为源码中转化过程还需要进行各种兼容判断，非常复杂，所以笔者对主要功能代码进行提取，用了300-400行代码完成对template转化为AST这个功能。下面用具体代码进行分析。

function parse(template) {

var currentParent; //当前父节点

var root; //最终返回出去的AST树根节点

var stack = [];

parseHTML(template, {

start: function start(tag, attrs, unary) {

......

},

end: function end() {

......

},

chars: function chars(text) {

......

}

})

return root

}

第一步就是调用parse这个方法，把template传进来，这里假设template为

{{message}}

然后声明3个变量

currentParent -> 存放当前父元素，root -> 最终返回出去的AST树根节点，stack -> 一个栈用来辅助树的建立

接着调用parseHTML函数进行转化，传入template和options(包含3个方法 start,end,chars 等下用到这3个函数再进行解释)接下来先看parseHTML这个方法

function parseHTML(html, options) {

var stack = []; //这里和上面的parse函数一样用到stack这个数组 不过这里的stack只是为了简单存放标签名 为了和结束标签进行匹配的作用

var isUnaryTag$$1 = isUnaryTag; //判断是否为自闭合标签

var index = 0;

var last;

while (html) {

//　　第一次进入while循环时，由于字符串以

last = html;

var textEnd = html.indexOf('

if (textEnd === 0) { // 此时字符串是不是以

// End tag:

var endTagMatch = html.match(endTag);

if (endTagMatch) {

var curIndex = index;

advance(endTagMatch[0].length);

parseEndTag(endTagMatch[1], curIndex, index);

continue

}

// Start tag: // 匹配起始标签

var startTagMatch = parseStartTag(); //处理后得到match

if (startTagMatch) {

handleStartTag(startTagMatch);

continue

}

}

// 初始化为undefined 这样安全且字符数少一点

var text = (void 0), rest = (void 0), next = (void 0);

if (textEnd >= 0) { // 截取

这里截取到闭合的<