从零开始，编写一个HTML模版引擎（三）

最新推荐文章于 2024-08-19 10:49:12 发布

Jax的试炼

最新推荐文章于 2024-08-19 10:49:12 发布

阅读量293

点赞数

分类专栏：手写HTML模版引擎前端杂记文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/lzllxll/article/details/124775593

版权

本文是HTML模板引擎系列的第三部分，主要探讨渲染流程和抽象语法树（AST）。阐述了为何使用AST以及如何利用AST生成渲染函数。介绍了如何在严格模式下避免使用with，以及通过形参和头部注入实现数据绑定。文章逐步揭示了模板引擎从AST到渲染函数，再到虚拟DOM的转换过程。

摘要由CSDN通过智能技术生成

一、前言

上一期我们说到了虚拟节点的问题，已经能完成静态的模版的结构生成，那么这期我们一起来看看在模版上绑定数据要如何去做。

实际上实现的方式有很多，但是我们的最终目标都是生成虚拟节点，最后交由virtual-dom模块来渲染成真实dom。

二、渲染流程

我们先看看模版引擎的整体渲染流程是什么样子的

我们有预期要绑定的数据，如vue中的data

const data = {
      btnText: '点我' }

假设我们的模版结构是：

<div>
	<button>{
    { btnText }}</button>
</div>

将模版解析成我们的目标结构，也就是ast抽象语法树，根据上一期的内容我们已经能够生成了，结构看起来像这样：

const ast = [{
     
	tag: 'div',   // 标签名称
	type: 1, 	  // 节点类型 常用的有 1、普通节点 2、文字节点 3、文档碎片节点
	data: null,   // 标签上的一切属性数据
	children: [   // 标签的子节点
		{
      tag: 'span', type: 1, text: