多种语言实现：http://mustache.github.io/
js版本文档：https://github.com/janl/mustache.js
简介：
mustache.js is a zero-dependency implementation of the mustache template system in JavaScript.
Node 环境使用
安装
$ npm install mustache --save
基本语法
变量： {
{name}}
列表：{
{#list}}{
{.}}{
{/list}}对象：{ {obj.name}} - { {obj.age}}
代码示例
const Mustache = require("Mustache");
var data = {
name: "Tom",
age: 23,
};
var template = "my name is { {name}}, and { {age}} years old";
var result = Mustache.render(template, data);
console.log(result);
// my name is Tom, and 23 years old
浏览器中使用
最终效果是把id=template 的内容渲染后替换到id=target
<script src="https://unpkg.com/mustache@;latest"></script>
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
hello { {name}}
</script>
<script>
(function () {
var template = document.getElementById("template").innerHTML;
var rendered = Mustache.render(template, { name: "Tom" });
document.getElementById("target").innerHTML = rendered;
})();
</script>
异步加载模板
模板文件 template.html
hello {
{name}}
异步渲染
<script src="https://unpkg.com/mustache@;latest"></script>
<div id="target">Loading...</div>
<script>
(function () {
fetch("./template.html")
.then((response) => response.text())
.then((template) => {
var rendered = Mustache.render(template, { name: "Tom" });
document.getElementById("target").innerHTML = rendered;
});
})();
</script>
</div>