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

83 阅读 0 评论 55 点赞

我是靠谱客的博主开放学姐，最近开发中收集的这篇文章主要介绍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>