Vue AST的转换实现方法讲解

function dump(node, indent = 0) {
	// 节点的类型
	const type = node.type
	// 节点的描述，如果是根节点，则没有描述
	// 如果是Element类型的节点，则使用node.tag作为节点的描述
	// 如果是Text类型的节点，则使用node.content作为节点的描述
	const desc = node.type === 'Root'?'':node.type === 'Element'?node.tag:node.content
	// 打印节点的类型和描述信息
	console.log(`${'-'.repeat(indent)}${type}:${desc}`)
	// 递归地打印子节点
	if(node.children){
		node.children.forEach(n=>demp(n,indent+2))
	}
}

const ast = parse(`<div><p>Vue</p><p>Template</p></div>`)
console.log(dump(ast))

function traverseNode(ast){
	const currentNode = ast
	const children = currentNode.children
	if(children){
		for(let i=0,i<children.length;i++){
			traverseNode(children[i])
		}
	}
}

function traverseNode(ast){
	// 当前节点，ast本身就是Root节点
	const currentNode = ast
	// 对当前节点进行操作
	if(currentNode.type === 'Element' && currentNode.tag === 'p'){
		currentNode.tag = 'h1'
	}
	// 如果有子节点，则递归地调用traverseNode函数进行遍历
	// 递归调用
	const children = currentNode.children
	if(children){
		for(let i=0;i<children.length;i++){
			traverseNode(children[i])
		}
	}
}

function traverseNode(ast){
	const currentNode = ast
	if(currentNode.type === 'Element' && currentNode.tag === 'p'){
		currentNode.tag = 'h1'
	}
	if(currentNode.type === 'Text'){
		currentNode.content = currentNode.content.repeat(2)
	}
	const children = currentNode.children
	if(children){
		for(let i=0;i<children.length;i++){
			traverseNode(children[i])
		}
	}
}

// 接收第二个参数context
function traverseNode(ast, context){
	const currentNode = ast
	// context.nodeTransforms是一个数组，其中每一个元素都是一个函数
	const transforms = context.nodeTransforms
	for(let i = 0;i<transforms.length;i++){
		// 将当前节点 currentNode 和 context 都传递给 nodeTransforms 中注册的回调函数
		transforms[i](currentNode,context)
	}
	const children = currentNode.children
	if(children){
		for(let i=0;i<children.length;i++){
			traverseNode(children[i])
		}
	}
}

function transform(ast){
	// 在transform函数内创建context对象
	const context = {
		//注册 nodeTransforms 数组
		nodeTransforms:[
			transformElement, // transformElement 函数用来转换标签节点
			transformText //transformText 函数用来转换文本节点
		]
	}
	//调用 traverseNode 完成转换
	traverseNode(ast, context)
	console.log(dump(ast))
}

function transformElement(node){
	if(node.type === 'Element' && node.tag === 'p'){
		node.tag = 'h1'
	}
}
function transformElement(node){
	if(node.type === 'Text'){
		node.content = node.content.repeat(2)
	}
}