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