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[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>

　　参考资料
http://www.jq22.com/jquery-info8648

[JavaScript] doT.js：一个Node.js和浏览器环境下快速简洁的javascript模板引擎

相关帖子

程序员的专属浪漫——用3D Engine 5分钟实现烟花绽放效果

了解下Foundation 表格

了解下Foundation 按钮

javascript怎么将小写字母转为大写（CSS样式强制大写）

javascript怎么实现窗口置顶

JavaScript怎样实现点击出现图片效果

常用JavaScript的注释方法示例

怎么在JavaScript中加注释

利用html+js触发弹窗事件

javascript如何改变背景

太阳不下山 LV4