简介：
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[key]}}</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>
参考资料
