Emblem-js 是一个模板引擎，它可以将模板转化为 HTML。它使用类似 Handlebars 的语法，并且提供了像默认值、条件语句、循环等功能。本文将会介绍如何使用 npm 包 emblem-js，以及一些基本语法、高级语法和实际应用。
安装
在使用之前，先使用 npm 安装。在终端中输入以下命令：
--- ------- ---------
基本语法
输出变量
emblem-js 使用 {{}} 在模板中输出变量，语法和 Handlebars 相似：
-------- ------------
条件语句
emblem-js 使用 if 和 else 来构建条件语句：
----- ------------ -------------- -------- ----------- -------
循环
emblem-js 使用 each 来构建循环：
----
------- -------
-----------------
---------
-----属性
在 emblem-js 中可以使用 attr 来设置属性：
------ ------ ----------- -------------
缩进
emblem-js 中使用缩进表示 DOM 结构：
-- -- --- -- --- -- ---
高级语法
模板继承
emblem-js 支持模板继承。在 layout.emblem 中定义一个基本布局，然后在子模板中使用 @extends 和 @content 来引用：
layout.emblem：
----
----
----- ---------
----
------------child.emblem：
-------- ------ ------------ ------------------ ------------------ ------------
默认值
emblem-js 中可以使用 || 设置默认值：
--------- -- -----------
数组操作
emblem-js 支持数组操作，例如获取第一个元素、最后一个元素、长度等。
----------------------------- ----------------------------- -----------------------------
过滤器
emblem-js 支持过滤器，在输出变量之前修改它们的值：
------------ - --------------
Helper
emblem-js 支持 Helper，可以自定义函数进行字符串操作等一些功能。
实际应用
下面是一个实际用例，将数据展示在表格中：
-----
-----
--
-- --
-- --
-- --
-----
------- -------
----
-----------------
----------------
-------------------
-----
---------结语
emblem-js 是一个易用的模板引擎，使用它可以使 HTML 模板更加简洁、易于维护。本文介绍了如何安装、使用、基本语法、高级语法和实际应用等内容。在实际开发中，希望你可以灵活运用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/80457