doT.js：一个Node.js和浏览器环境下快速简洁的javascript模板引擎
简介：The fastest + concise javascript template engine for Node.js and browsers.
译文：
Node.js和浏览器环境下最快+简洁的javascript模板引擎
文档：http://olado.github.io/doT/index.html
下载
# 开发版 5.1K
wget https://raw.githubusercontent.com/olado/doT/master/doT.js
# 压缩版 3.3K
wget https://raw.githubusercontent.com/olado/doT/master/doT.min.js
Node.js环境使用
npm install dot
浏览器使用
<script type="text/javascript" src="doT.js"></script>
基本模板语法
{{ }} for evaluation
{{= }}for interpolation
{{! }}for interpolation with encoding
{{# }}for compile-time evaluation/includes and partials
{{## #}} for compile-time defines
{{? }}for conditionals
{{~ }}for array iteration
基本使用
<!-- 引入dot.js -->
<script src="doT.js" type="text/javascript"></script>
<!-- 定义模板 -->
<script id="content-tmpl" type="text/x-dot-template">
<span>{{=it.name}}</span>
</script>
<!-- html节点 -->
<div id="content"></div>
<!-- 执行模板渲染 -->
<script type="text/javascript">
var data = {
name: "Tom",
};
var template = doT.template(document.getElementById("content-tmpl").text);
// 显示渲染结果
document.getElementById("content").innerHTML = template(data);
</script>
更多使用示例
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script id="content-tmpl" type="text/x-dot-template">
<h2>赋值</h2>
<span>{{=it.name}}</span>
<h2>循环map</h2>
{{for(var key in it.attrs) { }}
<span>{{=key}}: {{=it.attrs}}</span>
{{ } }}
<h2>数组</h2>
{{~it.pets:value:index}}
<span>{{=index}}: {{=value}}</span>
{{~}}
<h2>条件</h2>
{{? it.sex == 0}}
<span>女</span>
{{??}}
<span>男</span>
{{?}}
</script>
<script src="doT.js" type="text/javascript"></script>
</head>
<body>
<div id="content"></div>
</body>
<script type="text/javascript">
var data = {
name: "Tom",
sex: 0,
pets: ["dog", "cat", "pig"],
attrs: {
age: 23,
phone: 123456,
},
};
var template = doT.template(document.getElementById("content-tmpl").text);
document.getElementById("content").innerHTML = template(data);
</script>
</html>
参考资料
http://www.jq22.com/jquery-info8648
文档来源：51CTO技术博客https://blog.51cto.com/u_13567403/3039811
页:
[1]