在前端开发中，我们经常需要使用模板引擎来生成 HTML 页面、邮件、报告等各种文档，从而提高我们的工作效率和开发质量。其中，mustache 是一个非常流行的模板引擎，它具有简单、灵活、可维护等优点，被广泛应用于各种 Web、移动、桌面等应用开发中。
而在 mustache 模板引擎的基础上，mustache-simple 则是一个更简单、更易用的封装实现，它简化了 mustache 模板引擎的语法、API 和配置方式，使得开发者可以更加轻松地使用 mustache 模板引擎完成各种任务，同时也减少了代码量和出错率。
下面，我们将详细介绍 mustache-simple 的使用教程，为大家提供一个参考和指导。
安装和引用
mustache-simple 是一个 npm 包，它可以通过 npm 命令来安装和管理。
npm install mustache-simple --save
在项目中使用 mustache-simple，则需要引用该包的主文件 mustache-simple.js。
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ----------------------- ------------ -------- ---------------------------------- ------- ------ ----- ------------------- --------- ---- ---- ---- ---- ---------- ------- -------
模板语法
mustache 模板引擎的语法非常简单，只有以下几种基本元素。
变量 {{...}}
变量表示需要插入的值，可以是字符串、数字、Boolean、对象、数组等类型。
<div>{{name}}</div>
<div>{{age}}</div>
<div>{{isMale}}</div>
<div>{{user.email}}</div>
<div>{{users.[0].name}}</div>条件判断 {{#...}}...{{/...}}
条件判断表示根据某个条件来决定是否插入一段内容，常用于循环和分支。
{{#users}}
<div>{{name}}</div>
{{/users}}
{{^users}}
<div>No users found</div>
{{/users}}循环迭代 {{#...}}...{{/...}}
循环迭代表示需要根据数组或对象中的每一个元素来插入一段内容，常用于列表、表格等数据展示。
<ul>
{{#users}}
<li>{{name}} ({{email}})</li>
{{/users}}
</ul>注释 {{!...}}
注释表示需要添加一些说明或提示，不会在渲染结果中显示。
{{! This is a comment }}转义字符 {{{...}}}
转义字符表示需要插入的值不需要进行 HTML 转义，常用于插入一些富文本、URL、JS/CSS 代码等。
<div>{{{htmlContent}}</div>
<div><a href="{{url}}">link</a></div>其他语法
mustache 还支持一些其他语法和配置选项，例如：
- 布尔运算符 {{#hasTag}}...{{/hasTag}}，{{^hasTag}}...{{/hasTag}}。
- 比较运算符 {{#equal name "Tom"}}...{{/equal}}，{{#greater age 18}}...{{/greater}} 等。
- 过滤器 {{name | upperCase}}，{{date | dateFormat "yyyy-MM-dd"}} 等。
更多详细语法，请参考 mustache 官方文档：https://github.com/janl/mustache.js/wiki。
API 函数
除了模板语法之外，mustache-simple 也提供了一些简单、易用的 API 函数，可以更方便地实现模板渲染和数据绑定。
mustache.compile(template)
将模板字符串编译为 JavaScript 函数。返回一个函数对象，可以接受一个数据对象作为参数，返回一个渲染结果字符串。
var template = '<div>{{name}}</div><div>{{age}}</div>';
var render = mustache.compile(template);
var data = { name: 'Tom', age: 18 };
var html = render(data); // <div>Tom</div><div>18</div>mustache.render(template, data)
直接将模板字符串和数据对象作为参数，自动编译模板，并返回渲染结果字符串。
var template = '<div>{{name}}</div><div>{{age}}</div>';
var data = { name: 'Tom', age: 18 };
var html = mustache.render(template, data); // <div>Tom</div><div>18</div>mustache.renderTo(target, template, data)
将模板字符串和数据对象作为参数，自动编译模板，并将渲染结果插入到指定的 DOM 元素中。
var template = '<div>{{name}}</div><div>{{age}}</div>';
var data = { name: 'Tom', age: 18 };
var target = document.getElementById('content');
mustache.renderTo(target, template, data);mustache.bindTo(target, template, data)
将模板字符串和数据对象作为参数，自动编译模板，并将渲染结果与数据对象进行双向绑定，实现动态更新。
var template = '<div>{{name}}</div><div>{{age}}</div>';
var data = { name: 'Tom', age: 18 };
var target = document.getElementById('content');
mustache.bindTo(target, template, data);
data.name = 'Jerry'; // 触发 DOM 更新示例代码
下面，我们将通过一个简单的示例代码，演示如何使用 mustache-simple 完成一个用户列表的显示。
HTML 代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ----------------------- ------------ -------- ---------------------------------- ------- ------ ----- ------------------- -------- --------------------- --------------------- ------ ------------ ------- ------------------------- ------------ -------------------------------------------- -------- ------------ ------------ --------- ----- ---------- ------------ ------- ---------- --------- ----- -------- - ------------------------------------------------------ ----- ------ - ----------------------------------- ----- ---- - - ------ - ---- ----- ------ ------ ----------------- -- ---- ----- -------- ------ ------------------- -- ---- ----- ------ ------ ----------------- -- ----- --------------------------- --------- ------ ---------- ------- -------
效果如下图所示：
通过上述示例，我们可以看到，使用 mustache-simple 非常简单、易用，只需要编写少量的 HTML 和 JS 代码，就可以实现一个漂亮、可维护的用户列表，大大提高了开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb781e8991b448dc680