在前端开发中，经常会遇到需要根据数据动态生成 HTML/CSS 的需求。如果每次都手动编写 HTML/CSS 代码，不仅浪费时间，还容易出错。此时，一个好用的模板工具就能大大提高开发效率。mplate 就是这样一个便捷易用的 npm 包。
什么是 mplate
mplate是一个轻量级的 JavaScript 模板引擎，它能够根据JSON数据动态生成HTML/CSS代码。它有以下特点：
- 语法简洁，易于学习和使用
- 支持循环语句和条件语句
- 支持自定义过滤器进行字符串和数值的格式化
- 支持 HTML 和 CSS 文件的分离，以便更好地管理代码
安装 mplate
使用 npm 安装 mplate：
npm install mplate --save
使用方法
创建模板
在HTML模板中使用语法 {}, 如：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------
-------
---- -
----------------- ----------
-
--------
-------
------
---- ------------
----------------
-------------
------
-------
-------加载模板
使用 mplate.loadTemplate() 方法加载模板：
let mplate = require('mplate');
let tpl = mplate.loadTemplate('./template.html');渲染数据
使用 mplate.render() 方法将数据渲染到模板中：
let data = {
title: "mplate",
desc: "a lightweight JavaScript template engine",
bgcolor: "#EEE"
};
let result = mplate.render(tpl, data);
console.log(result);运行结果：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------
-------
---- -
----------------- -----
-
--------
-------
------
---- ------------
---------------
---- ----------- ---------- -------- ----------
------
-------
-------使用过滤器
在模板中使用 | 符号调用过滤器：
<p>{time | date:"yyyy-mm-dd"}</p>使用 mplate.addFilter() 方法添加自定义过滤器：
-- -------------------- ---- ------- ------------------------ ------- ------- -- - --- ---- - --- ------------ --- ---- - ------------------- --- ----- - --------------- - -- ----- - ----- - -- - --- - ----- - ------ --- --- - --------------- --- - --- - -- - --- - --- - ---- ------ ---------------------- ------------------- -------------------- ----- ---
使用循环语句
mplate 还支持使用 for 循环语句：
<ul>
{for i in list}
<li>{i + 1}. {list[i]}</li>
{/for}
</ul>let data = {
list: ['apple', 'pear', 'banana']
};
let result = mplate.render(tpl, data);
console.log(result);运行结果：
<ul> <li>1. apple</li> <li>2. pear</li> <li>3. banana</li> </ul>
使用条件语句
mplate 还支持使用 if/else 条件语句：
<p>{foo? 'yes':'no'}</p>let data = {
foo: true
};
let result = mplate.render(tpl, data);
console.log(result);运行结果：
<p>yes</p>
总结
mplate 是一个简单易用的 JavaScript 模板引擎，它简化了前端开发中动态生成 HTML/CSS 代码的过程，很好地提高了开发效率。希望本文能够帮助大家了解和学习 mplate，并在实际开发中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668fcd9381d61a354104c