介绍
atpl 是一款支持 JavaScript 和 CoffeeScript 的模板引擎，可以用于前端和后端开发。它提供了简单易用的语法，支持嵌套、循环、条件判断等功能，在实际开发中被广泛应用。
安装
使用 npm 进行安装：
npm install atpl
如果需要在项目中全局使用，可以加上 -g 参数。
使用
在 Node.js 中使用
在 Node.js 中使用 atpl 非常简单，只需加载模块即可：
const atpl = require('atpl');
const html = atpl.render('Hello {{ name }}!', { name: 'World' });
console.log(html); // 输出：Hello World!在浏览器中使用
为了在浏览器中使用 atpl，我们需要将模板文件打包成一个 JavaScript 文件。通常我们使用 webpack 或者 rollup 等构建工具来完成这一步。
- 安装 atpl-loader（webpack）或 atpl-rollup-plugin（rollup）：
# webpack npm install atpl-loader --save-dev # rollup npm install atpl-rollup-plugin --save-dev
- 添加配置（以 webpack 为例）：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
-
------- --------------
-------- -
-- ---- --
-
-
-
-
-
--
-- ---
-- 在代码中引入模板文件，并使用 atpl.render 方法渲染：
import tpl from './template.tpl';
import atpl from 'atpl';
const html = atpl.render(tpl, { name: 'World' });
console.log(html); // 输出：Hello World!实例
下面是一个简单的示例，演示了 atpl 支持的一些语法。
- 模板文件
template.tpl：
<ul>
{% for item in items %}
{% if item.visible %}
<li>{{ item.name }}</li>
{% endif %}
{% endfor %}
</ul>- 渲染模板：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----- - - - ----- -------- -------- ---- -- - ----- --------- -------- ----- -- - ----- --------- -------- ---- -- -- ----- ---- - ------------------------------- - ----- --- ------------------
输出结果：
<ul> <li>Apple</li> <li>Orange</li> </ul>
总结
atpl 是一款简单易用的模板引擎，支持多种语言和功能。它可以帮助我们快速开发前端和后端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46946