前端开发中，我们常常需要根据不同的数据动态生成HTML代码，这就需要用到模板引擎。Tokio-templater 是一个轻量级的JS模板引擎，可以通过npm包安装，本文将介绍如何在项目中使用它。
安装
--- ------- -------------- ------
获取数据
前往 mockapi.io/register 注册并新建一个API，将返回的URL作为请求URL。
利用Fetch API获取需要的信息，这里我用Jsonplaceholder的API作为例子:
--------------------------------------------------- -------------- -- ---------------- ---------- -- -------------------
编写模板
toki-templater使用 ## 作为标识符，例如：
--- -------- - -
----
-- -------- -- ------ -
------- --- --------- -- ---- --- ---------- -------
-- -
-----
--上面的模板用于渲染用户信息列表，其中 ## for(user of users) ## 和 ## } ## 用于遍历数据。 ##= user.name ## 和 ##= user.email ## 用于输出Key值。
渲染模板
------ ---- ---- -----------------
---------------------------------------------------
-------------- -- ----------------
----------- -- -
--- ---- - -------------- ------- --------
----------------------- - -----
------------------
---Tokio-templater的语法非常简洁明了，而且可以很容易的利用for循环来遍历对象数组。它所支持的语法比起其他模板引擎还有更多的扩展语法，例如javascript的表单也可以在模板中使用。
最后的效果如图所示：
总之，toki-templater是一个非常不错的模板引擎，它的打包后大小也非常小，非常适合在前端开发项目中使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005571e81e8991b448d40fd