多种语言实现：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>
