doT.js - 前端javascript模板引擎

最新推荐文章于 2024-03-22 09:45:42 发布

kavenchenxiao

最新推荐文章于 2024-03-22 09:45:42 发布

阅读量680

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/kavenchenxiao/article/details/53261703

本文档介绍了如何使用doT.js，一个轻量级的前端JavaScript模板引擎。首先，通过npm或直接引入浏览器进行安装。接着，可选地调整编译设置以定制模板分隔符。然后，学习如何编写包含各种分隔符的模板，如评估、插值、编码、部分、条件判断和数组迭代。最后，了解如何调用和应用这些模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网：http://olado.github.io/

第一步：安装

方式一、如果使用Node.js

npm install dot

var doT = require('dot').process({ path: "./views"});

方式二、直接使用浏览器

<script type="text/javascript" src="doT.js"></script>

步骤二：编译设置（可选）

您可以通过更改编译设置自定义点。这里是默认设置：

doT.templateSettings = {
  evaluate:    /\{\{([\s\S]+?)\}\}/g,
  interpolate: /\{\{=([\s\S]+?)\}\}/g,
  encode:      /\{\{!([\s\S]+?)\}\}/g,
  use:         /\{\{#([\s\S]+?)\}\}/g,
  define:      /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
  conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
  iterate:     /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
  varname: 'it',
  strip: true,
  append: true,
  selfcontained: false
};

如果你想用你自己的分隔符，你可以在dot.templatesettings中修改你喜欢的正则表达式。

步骤三：写模板

以下是默认的分隔符的列表：

{{ }} for evaluation 模板标记符
{{= }} for interpolation 输出显示，默认变量名为it
{{! }} for interpolation with encoding 编码后输出显示
{{# }} for compile-time evaluation/includes and partials 输出显示预定义
{{## #}} for compile-time defines 预定义
{{? }} for conditionals 条件分支，if条件的简写
{{~ }} for array iteration 遍历数组

<div id="tmpl">
    <div>Hi {{=it.name}}!</div>
    <div>{{=it.age || ''}}</div>
</div>
<div id="content"></div>

步骤四：调用模板

<script type="text/javascript">
    var data = {"name": "Jake", "age": 31};
    var interText = doT.template(document.getElementById('tmpl').innerHTML);
    document.getElementById('content').innerHTML
</script>

其他实例

条件判断：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../../doT.js"></script>
    <script type="text/javascript" src="http://hbjltv.com/static/js/jquery-1.11.1.js"></script>
</head>
<body>
<div id="conditionstmpl">
    {{? !it.name }}
    <div> 你还没有名字</div>
    {{?? }}
    <div>Oh, I love your name, {{=it.name}}!</div>
    {{?}}
</div>
<hr/>
<div id="condition"></div>
<script type="text/javascript">
    var dataEncode = {"name": "黄威", "age": 31};
    var interText = doT.template($("#conditionstmpl").html());
    $("#condition").html(interText(dataEncode));
</script>
</body>
</html>

循环+条件判断：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../../doT.js"></script>
    <script type="text/javascript" src="http://hbjltv.com/static/js/jquery-1.11.1.js"></script>
</head>
<body>
<div id="evaluationtmpl">
    {{ for(var prop in it) { }}
        {{? typeof it[prop]=='object' }}
            <div style="font-weight: bold;" >KEY:{{= prop }}---VALUE:</div>
            {{ for(var prop2 in it[prop]) { }}
                <div style="margin-left: 20px;" >key:{{= prop2 }}---value:{{= it[prop][prop2] }}</div>
            {{ } }}
        {{?? }}
            <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>
        {{?}}

    {{ } }}
</div>
<hr/>
<div id="evaluation"></div>
<script type="text/javascript">
    var dataEval = {
        "name": "Jake",
        "age": 31,
        "interests": ["basketball", "hockey", "photography"],
        "contact": {"email": "jake@xyz.com", "phone": "999999999"}
    };
    var evalText = doT.template($("#evaluationtmpl").html());
    $("#evaluation").html(evalText(dataEval));
</script>
</body>
</html>