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

导航

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

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

一、前言

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

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

二、渲染流程

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

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

   const data = {
         btnText: '点我' }
   

2. 假设我们的模版结构是：

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

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

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