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为

然后声明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循环时，由于字符串以<开头，所以进入startTag条件，并进行AST转换，最后将对象弹入stack数组中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();  //处理后得到matchif (startTagMatch) {handleStartTag(startTagMatch);continue}}// 初始化为undefined 这样安全且字符数少一点var text = (void 0), rest = (void 0), next = (void 0);if (textEnd >= 0) {   // 截取<字符索引 => </div> 这里截取到闭合的<rest = html.slice(textEnd); //截取闭合标签// 处理文本中的<字符// 获取中间的字符串 => {{message}}text = html.substring(0, textEnd); //截取到闭合标签前面部分advance(textEnd);        //切除闭合标签前面部分}// 当字符串没有<时if (textEnd < 0) {text = html;html = '';}// // 处理文本if (options.chars && text) {options.chars(text);}}}

函数进入while循环对html进行获取<标签索引 var textEnd = html.indexOf(’<’);如果textEnd === 0 说明当前是标签或者再用正则匹配是否当前是结束标签。var endTagMatch = html.match(endTag); 匹配不到那么就是开始标签，调用parseStartTag()函数解析。

function parseStartTag() {   //返回匹配对象var start = html.match(startTagOpen);     // 正则匹配if (start) {var match = {tagName: start[1],    // 标签名(div)attrs: [],        // 属性start: index       // 游标索引(初始为0)};advance(start[0].length);var end, attr;while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) { advance(attr[0].length); match.attrs.push(attr);}if (end) {advance(end[0].length);   // 标记结束位置match.end = index;   //这里的index 是在 parseHTML就定义 在advance里面相加return match     // 返回匹配对象 起始位置 结束位置 tagName attrs}}
}

该函数主要是为了构建一个match对象，对象里面包含tagName(标签名)，attrs(标签的属性)，start(<左开始标签在template中的位置)，end(>右开始标签在template中的位置) 如template =

程序第一次进入该函数匹配的是div标签所以tagName就是div
start：0 end:14 如图：

接着把match返回出去作为调用handleStartTag的参数

var startTagMatch = parseStartTag();  //处理后得到match
if (startTagMatch) {handleStartTag(startTagMatch);continue
}

接下来看handleStartTag这个函数：

function handleStartTag(match) {var tagName = match.tagName;var unary = isUnaryTag$$1(tagName) //判断是否为闭合标签 var l = match.attrs.length;var attrs = new Array(l);for (var i = 0; i < l; i++) {var args = match.attrs[i];var value = args[3] || args[4] || args[5] || '';attrs[i] = {name: args[1],value: value};}if (!unary) {stack.push({tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs});lastTag = tagName;}if (options.start) {options.start(tagName, attrs, unary, match.start, match.end);}}

函数中分为3部分第一部分是for循环是对attrs进行转化，我们从上一步的parseStartTag()得到的match对象中的attrs属性如图

当时attrs是上面图这样子滴我们通过这个循环把它转化为只带name 和 value这2个属性的对象如图:

接着判断如果不是自闭合标签，把标签名和属性推入栈中（注意这里的stack这个变量在parseHTML中定义，作用是为了存放标签名为了和结束标签进行匹配的作用。）接着调用最后一步 options.start 这里的options就是我们在parse函数中调用parseHTML是传进来第二个参数的那个对象(包含start end chars 3个方法函数) 这里开始看options.start这个函数的作用：

start: function start(tag, attrs, unary) {var element = {type: 1,tag: tag,attrsList: attrs,attrsMap: makeAttrsMap(attrs),parent: currentParent,children: []};processAttrs(element);if (!root) {root = element;} if(currentParent){currentParent.children.push(element);element.parent = currentParent;}if (!unary) {currentParent = element;stack.push(element);}
}

这个函数中生成element对象再连接元素的parent 和 children节点最终push到栈中
此时栈中第一个元素生成如图：

完成了while循环的第一次执行，进入第二次循环执行，这个时候html变成{{message}} 接着截取到处理过程和第一次一致经过这次循环stack中元素如图：

接着继续执行第三个循环这个时候是处理文本节点了 {{message}}

// 初始化为undefined 这样安全且字符数少一点
var text = (void 0), rest = (void 0), next = (void 0);
if (textEnd >= 0) {   // 截取<字符索引 => </div> 这里截取到闭合的<rest = html.slice(textEnd); //截取闭合标签// 处理文本中的<字符// 获取中间的字符串 => {{message}}text = html.substring(0, textEnd); //截取到闭合标签前面部分advance(textEnd);        //切除闭合标签前面部分
}
// 当字符串没有<时
if (textEnd < 0) {text = html;html = '';
}
// 另外一个函数
if (options.chars && text) {options.chars(text);
}

这里的作用就是把文本提取出来调用options.chars这个函数接下来看options.chars

chars: function chars(text) {if (!currentParent) {  //如果没有父元素 只是文本return}var children = currentParent.children; //取出children// text => {{message}}if (text) {var expression;if (text !== ' ' && (expression = parseText(text))) {// 将解析后的text存进children数组children.push({type: 2,expression: expression,text: text});} else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {children.push({type: 3,text: text});}}
}
})

这里的主要功能是判断文本是{{xxx}}还是简单的文本xxx,如果是简单的文本 push进父元素的children里面，type设置为3，如果是字符模板{{xxx}}，调用parseText转化。如这里的{{message}}转化为 _s(message)(加上_s是为了AST的下一步转为render函数，本文中暂时不会用到。) 再把转化后的内容push进children。

又走完一个循环了，这个时候html = 剩下2个结束标签进行匹配了

var endTagMatch = html.match(endTag);if (endTagMatch) {var curIndex = index;advance(endTagMatch[0].length);parseEndTag(endTagMatch[1], curIndex, index);continue}

接下来看parseEndTag这个函数传进来了标签名开始索引和结束索引

function parseEndTag(tagName, start, end) {var pos, lowerCasedTagName;if (tagName) {lowerCasedTagName = tagName.toLowerCase();}// Find the closest opened tag of the same typeif (tagName) { // 获取最近的匹配标签for (pos = stack.length - 1; pos >= 0; pos--) {// 提示没有匹配的标签if (stack[pos].lowerCasedTag === lowerCasedTagName) {break}}} else {// If no tag name is provided, clean shoppos = 0;}if (pos >= 0) {// Close all the open elements, up the stackfor (var i = stack.length - 1; i >= pos; i--) {if (options.end) {options.end(stack[i].tag, start, end);}}// Remove the open elements from the stackstack.length = pos;lastTag = pos && stack[pos - 1].tag;
}

这里首先找到栈中对应的开始标签的索引pos，再从该索引开始到栈顶的所以元素调用options.end这个函数

end: function end() {// pop stackstack.length -= 1;currentParent = stack[stack.length - 1];
},

把栈顶元素出栈，因为这个元素已经匹配到结束标签了，再把当前父元素更改。终于走完了，把html的内容循环完，最终return root 这个root就是我们所要得到的AST

这只是Vue的冰山一角，文中有什么不对的地方请大家帮忙指正

最后

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：866109386.欢迎大家进群交流讨论，学习交流，共同进步。

当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们，祝福大家在往后的工作与面试中一切顺利。

Vue源码解析之Template转化为AST的实现方法相关推荐

【vuejs深入三】vue源码解析之二 htmlParse解析器的实现
写在前面一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...
Vue源码解析(一)
前言:接触vue已经有一段时间了,前面也写了几篇关于vue全家桶的内容,感兴趣的小伙伴可以去看看,刚接触的时候就想去膜拜一下源码~可每次鼓起勇气去看vue源码的时候,当看到几万行代码的时候就直接望而却 ...
[Vue源码解析] patching算法
[Vue源码解析] patching算法 pathching算法:通过对比新旧VNode的不同,然后找出需要更新的节点进行更新操作:1.创建新增节点 2.删除废弃节点 3.修改需要更新的节点创建节 ...
Vue源码解析（尚硅谷）
视频地址:Vue源码解析系列课程一.Vue源码解析之mustache模板引擎 1. 什么是模板引擎模板引擎是将数据要变为视图最优雅的解决方案历史上曾经出现的数据变为视图的方法 2. mustac ...
Vue源码解析(笔记)
github vue源码分析认识flow flow类型检查安装flow sudo npm install -g flow-bin 初始化flow flow init 运行flow命令命令: fl ...
Vue源码解析-$mount
前言 Vue实例是通过mount方法进行挂载的,上一篇说了new Vue这篇分析一下mount挂载方法.mount的定义在Vue源码中有多处,这是因为Vue需要适配不同的平台以及构建方式,本文这里主要 ...
Vue源码解析之数组变异
力有不逮的对象众所周知,在 Vue 中,直接修改对象属性的值无法触发响应式.当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变. 这是什么原因? 原因在于: Vue 的响应式 ...
Vue源码解析：虚拟dom比较原理
通过对 Vue2.0 源码阅读,想写一写自己的理解,能力有限故从尤大佬2016.4.11第一次提交开始读,准备陆续写: 模版字符串转AST语法树 AST语法树转render函数 Vue双向绑定原理 V ...
Vue源码解析之函数入口
从入口开始看起写博客就是记录自己撸码的过程和问题,好了~废话就不多说了,直接源码撸起,通过上一篇博客咱们大致知道了Vue源码目录设计,下面我们要一步步找到vue的入口通过查看package.jso ...

Vue源码解析之Template转化为AST的实现方法

Vue源码解析之Template转化为AST的实现方法相关推荐

最新文章

热门文章