这篇文章给大家介绍的内容是关于什么是ast？vue源码中ast语法树的解析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
什么是AST
AST是指抽象语法树（abstract syntax tree），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式。Vue在mount过程中，template会被编译成AST语法树。
然后，经过generate（将AST语法树转化成render function字符串的过程）得到render函数，返回VNode。VNode是Vue的虚拟DOM节点，里面包含标签名、子节点、文本等信息，关于VNode的学习来自：https://blog.csdn.net/qq_3626…
以
请输入：
登录后复制
parse()
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,这里对options的内容省略 parseHTML(template,options);
登录后复制
定义一些变量，root用于存放AST树根节点，currentParent存放当前父元素,stack用来辅助树建立的栈。接着调用parseHTML函数进行转化，传入template和options。
options的结构如下：
parseHTML()
parseHTML内容大纲
立即学习“前端免费学习笔记（深入）”；
last = html; //确认html不是类似,这样的纯文本标签 if (!lastTag || !isPlainTextElement(lastTag)) { var textEnd = html.indexOf('<');//判断html字符串是否以<开头 if (textEnd === 0) { // 这里的Comment是Vue定义的正则表达式，判断html是不是注释 //var comment = /^'); if (commentEnd >= 0) { if (options.shouldKeepComment) { options.comment(html.substring(4, commentEnd)); } advance(commentEnd + 3); continue } } //判断是否处理向下兼容的注释,类似 //var conditionalComment = /^'); if (conditionalEnd >= 0) { advance(conditionalEnd + 2); continue } } //获取<!DOCTYPE开头的标签内容 // var doctype = /^]+>/i; var doctypeMatch = html.match(doctype); if (doctypeMatch) { advance(doctypeMatch[0].length); continue } //判断此段html是否结束标签 // var endTag = new RegExp(("^]*>")); // var qnameCapture = "((?:" + ncname + ":)?" + ncname + ")"; // var ncname = '[a-zA-Z_][w-.]*'; var endTagMatch = html.match(endTag); if (endTagMatch) { var curIndex = index; advance(endTagMatch[0].length); parseEndTag(endTagMatch[1], curIndex, index); continue } // 匹配开始标签，获取match对象 var startTagMatch = parseStartTag(); if (startTagMatch) { handleStartTag(startTagMatch); if (shouldIgnoreFirstNewline(lastTag, html)) { advance(1); } continue } var text = (void 0), rest = (void 0), next = (void 0); if (textEnd >= 0) { rest = html.slice(textEnd); while ( !endTag.test(rest) && !startTagOpen.test(rest) && !comment.test(rest) && !conditionalComment.test(rest) ) { // 处理文本中的<字符 next = rest.indexOf('<', 1); if (next < 0) { break } textEnd += next; rest = html.slice(textEnd); } text = html.substring(0, textEnd); advance(textEnd); } if (textEnd < 0) { text = html; html = ''; } if (options.chars && text) { options.chars(text); } } else { //代码省略 } if (html === last) { //代码省略 } }
登录后复制
parseHTML使用while循环对传进来的html进行解析。首先获取或者，再用正则匹配是否为
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2744706.html
