Vue3 compile模块①——学习编写AST抽象语法树

最新推荐文章于 2024-12-06 10:22:39 发布

白菜new

最新推荐文章于 2024-12-06 10:22:39 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 个人总结文章标签： vue javascript js vue.js AST语法树

本文链接：https://blog.csdn.net/qq_43850819/article/details/118608189

本文介绍了作者学习Vue3编译模块时对AST抽象语法树的理解。通过实例展示了如何将HTML标签拆分成数组并转换为AST树。文中提到可以参考Vue3和the-super-tiny-compiler的源码来深入理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一、AST抽象语法树是什么？
二、看一眼AST语法树
三、写一下AST语法树
- 第1步、语义拆分，将标签拆分成数组
- 第2步、数组转换成树，利用递归实现AST
总结

前言

最近在看vue3.0的compile模块，用到了AST抽象语法树，在网上找资料发现国内比较缺乏相关内容，看到热门的是用一个插件去解析和操纵JavaScript版的AST语法树，但我想了解的是单页面应用里的标签是怎么形成语法树的，自己能否学着写一下。

一、AST抽象语法树是什么？

AST（Abstract Syntax Tree）是源代码的抽象语法结构树状表现形式

个人理解为将源代码转化为各种关键字再以树的形式呈现

二、看一眼AST语法树

vue3.0模板资源管理器 https://vue-next-template-explorer.netlify.app/
按F12 打开控制台，我们就能看到vue转换过来的AST语法树
在这里插入图片描述
我们了解到语法树长什么样子，我们就能尝试去写属于我们的AST抽象语法树了。

三、写一下AST语法树

// 首先我们编写以字符串形式的标签
const templateStr = `<div id="app">
<h1 @click="add" class="item" :id="name">{
    {count}}</h1>
<p>摸鱼真快乐</p>
</div>`
// 将标签放入我们的主函数中
let ast = parse(template)
function parse(template) {
   
	//第一步
	const tokens = semanticSplit(template)
}

第1步、语义拆分，将标签拆分成数组

function semanticSplit(template) {
   
	// 我们的目标是返回一个数组
	// [{ value: 'div', type: 'tagstart' }, { type: props }]
	let res = []
	let type = ''
	let val  = ''
	function push() {
   
		if(val) {