引言
在前端开发过程中，我们经常需要处理 DOM 操作，但是操作 DOM 繁琐、代码量大，不利于维护，而且在服务器上渲染 HTML 时也需要使用到模板引擎。因此，使用模板引擎来生成 HTML，显得尤为重要。本文主要介绍 @jdists/jhtmls 这个 npm 包，一种快速简洁的模板引擎。
安装
为了使用 @jdists/jhtmls，你需要在本地环境中使用 npm 安装它。
npm install @jdists/jhtmls
使用
@jdists/jhtmls 的语法类似于 HTML 和 JavaScript，模板中使用类似于 EJS 的模板语法，既可以使用模板内部的 JavaScript，也可以动态地构造 HTML。下面，我们会详细介绍如何使用它。
简单示例
我们来看一个简单的示例，假设我们需要在 HTML 页面中展示一组用户信息的列表。以下是我们所需要的数据结构。
const users = [
{ name: 'Alice', age: 18 },
{ name: 'Bob', age: 20 },
{ name: 'Charlie', age: 22 },
];下面是使用 @jdists/jhtmls 所生成的HTML代码。
<div class="user-list">
<h2>用户列表</h2>
<ul>
<% for(var i = 0; i < data.length; i++){ %>
<li><%= data[i].name %>, <%= data[i].age %>岁</li>
<% } %>
</ul>
</div>可以看到，模板中使用了三个语句：<% ... %> 用来处理 JavaScript 代码块，而 <%= ... %> 替换 JavaScript 表达式的值。<%- ... %> 是使安全文本。
由于我们所需要展示的数据结构并没有直接关联到模板中，我们需要使用模板引擎来对模板和数据进行整合，以下是使用 @jdists/jhtmls 将数据填充到模板中的 JavaScript 代码。
-- -------------------- ---- -------
----- ------ - --------------------------
----- ---- - -----------------
---- ------------------
-------------
----
-- ------- - - -- - - ------------ ----- --
------- ------------ --- --- ----------- --------
-- - --
-----
------
---
------------------ ----- ----- ----如上代码中，我们通过调用 jhtmls.template 函数创建了一个函数，并将其赋值给了 html 变量。该函数需要传递一个参数，该参数是一个包含数据的对象。调用该函数时，该函数会将值插入到模板之中，最终生成一个字符串，该字符串就是需要的 HTML 页面。
模板语法
在 @jdists/jhtmls 的模板中，除了上述介绍过的语法之外，还有以下更多的语法。
if 语句
-- -------------------- ---- ------- -- -- ----------- - -- --------- ---- ------ -- - ---- - -- ---------- ---- ------ -- - --
for 循环语句
<%
for (let i = 0; i < data.length; i++) {
%>
<p><%= data[i] %></p>
<%
}
%>数组迭代器
<% data.forEach(function(value, index) { %>
<p><%= value %></p>
<% }) %>import 引入模板语法
<%= @import('other.jhtmls').render({ title: 'Other' }) %>等等
@jdists/jhtmls 还有很多的语法，这里只是简单介绍，具体使用可参考 npm 官方文档。
总结
通过本文，我们了解了 @jdists/jhtmls 的使用方法，以及其内部的基本语法。使用这种模板引擎可以让 HTML 页面的渲染变得更加简单、高效，同时也可以减少我们在代码中处理 DOM 的工作。
附：使用 @jdists/jhtmls 所生成的HTML代码。
<div class="user-list">
<h2>用户列表</h2>
<ul>
<li>Alice, 18岁</li>
<li>Bob, 20岁</li>
<li>Charlie, 22岁</li>
</ul>
</div>示例：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-----------------
-------
------
------- ------------------------------------------------------------
---- ---------------
--------
----- ------ - --------------------------
----- ----- - -- -- -
------ --- --------------- -- -
------------- -- -
-------------------------------- - -------
-- ------------- - ------
---
--
----- -------------- - ------------ ------- - -- -------
----- -------- - -
-----
----
-- ------------------ ----- -- - --
------- ----- ----- ---------
-- -- --
-----
------
--
----- ------- - ----------
----- ------ - ---------- ----- ----- -- -
--------------------------------- - ---- ----
--
-- -----
---------------- --------------- ---------
-- -----
-------------- -- -
----- ----------------- - ------------ ------- - -- -------
---------------- ------------------ ---------
-- ------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005693281e8991b448e4bc1