前言
在前端开发中，模板引擎是必不可少的工具之一。它可以将数据和 HTML 模板结合，生成最终的 HTML 页面。市面上有很多成熟的模板引擎，如 Handlebars、EJS、Pug 等。但是，对于一些有探究精神的前端工程师来说，自己动手实现一个模板引擎也是一件很有趣的事情。而 Deno 则是一个很好的平台，可以让我们用 TypeScript 开发一个简单易用的模板引擎。
准备工作
首先，我们需要安装 Deno 和一个文本编辑器。Deno 官方提供了一个安装脚本，可以在任意系统下安装：
curl -fsSL https://deno.land/x/install/install.sh | sh
安装完成后，就可以在终端中使用 deno 命令。
我们还需要安装一个依赖库，这个库是 deno_std 中的一部分，包含了一些与文件操作相关的工具函数。安装方法很简单，只需在终端中输入以下命令：
deno install --allow-read --allow-write https://deno.land/std/fs/mod.ts
开始编写模板引擎
设计模板语法
模板引擎最重要的部分就是模板语法，它决定了模板引擎的易用程度和功能强大程度。在这个教程中，我们使用类似于 Handlebars 的语法：
<div>
<h1>{{title}}</h1>
<ul>
{{#each list}}
<li>{{this}}</li>
{{/each}}
</ul>
</div>这个模板语法使用 {{}} 来表示需要替换的变量、表达式或者代码块。其中 {{title}} 表示变量 title，而 {{#each list}} 和 {{/each}} 则表示一个循环，会将 list 数组中的每一个元素重复一次。
编写模板解析器
接下来，我们开始编写模板解析器，这个解析器将会把模板语法解析成真实的 HTML 代码。我们可以新建一个 template.ts 文件来存放这个解析器：
-- -------------------- ---- -------
------ - -------- - ---- ----------------------------------
------ --------- --------------- -
---------- -------
-
------ ----- -------- -
------- ------ ----- - --------------------
------- --------- -------
------------------------- ------- --------- ---------------- -
------------- - ----------------------------------
-
------ --------------- - ----- -------- --- -- -
------ ------------------------------------- --- ----- --
---------- --------- - ------- ---
--
-
-首先，我们定义了一个 Template 类，用来表示一个模板文件。这个类的构造函数接受一个模板文件的路径，然后读取模板文件的内容到内部变量 template 中。注意，这里使用了 deno_std 中的 readFile 函数来读取文件。
然后，在 Template 类中定义了一个 render 方法，这个方法接受一个对象类型的参数 context，表示模板中可以使用的变量。这个方法使用正则表达式 Template.regex 匹配模板中的变量，然后通过 eval 函数将表达式转换成 JavaScript 代码，并且在 with 语句块中执行这个代码，从而获取到变量的值。最后，这个方法将会返回替换了变量的最终 HTML 代码。
编写测试代码
现在我们已经完成了模板引擎的编写，接下来需要编写一些测试代码来验证我们的代码是否正确。在 template.test.ts 文件中编写测试代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------------------- ------ ---- ----------- -- -- -
----- -------- - --- -----------------------------------
----- ---- - ----------------- ------ ------- ------ ---
----- -------- - ---------------- ---------------------------
------------------ ----------
---
------------------- ------ ---- ------- -- -- -
----- -------- - --- ----------------------------------
----- ---- - ----------------- ----- --------- ------- --------- ---
----- -------- -
--------------- --------------------------------------------------------------------
------------------ ----------
---上面的测试代码包含了两个测试用例，分别测试了变量替换和循环操作。我们创建了两个模板文件 basic.html 和 list.html，分别作为测试输入。然后，我们执行 Template 类的 render 方法，传入一个对象作为参数。最后，我们使用 assertEquals 函数来比对输出的 HTML 代码是否和预期的相同。
运行测试代码
最后，我们在终端中运行测试代码：
deno test --allow-read ./template.test.ts
这个命令会自动执行 template.test.ts 文件中的测试代码，并输出测试结果。
总结
在这个实战教程中，我们使用 Deno 平台和 TypeScript 语言编写了一个简单的模板引擎。我们学习了模板语法的设计和编写、文件读取、正则表达式匹配和 eval 函数的使用。通过这个教程，我们不仅可以学会如何开发一个模板引擎，更重要的是学会了如何使用 Deno 平台进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645dc113968c7c53b002519a