介绍
pi-template 是一个基于原生 JavaScript 实现的模板引擎，它是一个开源的 npm 包，适用于前端开发过程中的模板渲染工作。pi-template 在编码模板时采用类似于 JavaScript 的语法以及标签，易于上手，更加符合前端工程化的思路。
安装
通过 npm 即可安装 pi-template：
--- ------- -----------
快速上手
首先，在你的 HTML 中声明一个容器：
---- ---------------------
然后通过 JavaScript 获取该容器，并填充模板内容：
----- ---------- - ----------------------
----- -------- - -
----
-- ------- - - -- - - ------------ ---- - --
------- ------- -------
-- - --
-----
-
----- ---- - --------- --------- ---------
----- -------- - --------------------------- - ---- --
---------------------------------------------- - --------这段代码将在容器中渲染一个基本的列表，其中 data 数组中的元素将被逐个渲染进入列表元素中。
语法
pi-template 中支持以下语法：
输出
输出可以使用 <%= %> 标签，标签内可以是任意 js 代码，最终返回值将被输出到页面上。
---- ------- --- --- ------- -- ---- ------ --- --- ---- -- ---- ------- --- --- - - - --
条件语句
条件语句使用 <% if() {} %>，支持 else if 和 else 语句。
-- -- ---- - -- - -- -- - -- - ---- -- ---- --- -- - -- -- - -- - ---- - -- -- - -- - --
循环语句
循环语句使用 <% for() {} %>，支持 break 和 continue 语句。
----
-- ------- - - -- - - ------------ ---- - --
------- ------- -------
-- - --
-----注释
注释使用 <%# %>，注释内容将不会被编译到最终页面中。
--- ------ --
API
PiTemplate.render(template, data)
渲染模板，返回渲染后的 HTML 字符串。
- template：要渲染的模板字符串。
- data：渲染时的上下文对象，对象属性可由模板字符串直接访问。
----- -------- - -
----
-- ------- - - -- - - ------------ ---- - --
------- ------- -------
-- - --
-----
-
----- ---- - --------- --------- ---------
----- -------- - --------------------------- - ---- --总结
pi-template 是一个高效易用的模板引擎，可以帮助前端开发者快速构建模板并进行渲染。上手简单，语法清晰易懂，可以轻松应对模板渲染的各种场景。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/pi-template