说说如何用js实现一个模板引擎

时间：2021-04-20 07:53:03

本文同步更新在： https://github.com/whxaxes/blog/issues/4 ，在 github 看文章显示效果会更好一些。

前言

不知不觉就很长时间没造过什么*了，以前一直想自己实现一个模板引擎，只是没付诸于行动，最近终于在业余时间里抽了点时间写了一下。因为我们的项目大部分用的是 swig 或者 nunjucks ，于是就想实现一个类似的模板引擎。

至于为什么要做这么一个东西？基本上每一个做前端的人都会有自己的一个框架梦，而一个成熟的前端框架，模板编译能力就是其中很重要的一环，虽然目前市面上的大部分框架 vue、angular 这些都是属于 dom base 的，而 swig nunjucks ejs这些都是属于 string base 的，但是其实实现起来都是差不多的。不外乎都是 Template =parse=> Ast =render=>String。

再者，做一个模板引擎，个人感觉还是对自身的编码能力的提升还是很有帮助的，在性能优化、正则、字符解析上尤为明显。在日后的业务需求中，如果有一些需要解析字符串相关的需求，也会更得心应手。

功能分析

一个模板引擎，在我看来，就是由两块核心功能组成，一个是用来将模板语言解析为 ast（抽象语法树）。还有一个就是将 ast 再编译成 html。

先说明一下 ast 是什么，已知的可以忽略。

抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的，是因为这里的语法并不会表示出真实语法中出现的每个细节。比如，嵌套括号被隐含在树的结构中，并没有以节点的形式呈现；而类似于if-condition-then这样的条件跳转语句，可以使用带有两个分支的节点来表示。

在实现具体逻辑之前，先决定要实现哪几种 tag 的功能，在我看来，for，if else，set，raw还有就是基本的变量输出，有了这几种，模板引擎基本上也就够用了。除了 tag，还有就是 filter 功能也是必须的。

构建 AST

我们需要把模板语言解析成一个又一个的语法节点，比如下面这段模板语言：

<div>

    {% if test > 1 %}

        {{ test }}

    {% endif %}

</div>

很明显，div 将会被解析为一个文本节点，然后接着是一个块级节点 if ，然后 if 节点下又有一个变量子节点，再之后有是一个

相关文章