doT.js模板学习笔记

news2024/10/7 6:45:18

doT.js模板学习笔记

欢迎学习doT.js模板学习笔记
- doT.js模板是什么
- doT.js 主要优势在
- doT.js好处
- 引入方式
- 基本语法
- 语法示例
- 结尾

欢迎学习doT.js模板学习笔记

doT.js官方网站
本文章得示例源码

doT.js模板是什么

doT.js 是一个 JavaScript 模板框架，在 web 前端使用 dot.js 作为模板引擎，主要的用途就是，在写好的模板上，放进数据，生成含有数据的 html 代码。

doT.js 主要优势在

小巧精简，源代码不超过两百行，6KB 的大小，压缩版只有 4KB；
支持表达式丰富，涵盖几乎所有应用场景的表达式语句；
性能优秀；
不依赖第三方库。

doT.js好处

和后端渲染不同，doT.js 的渲染完全交由前端来进行，这样做主要有以下好处：

脱离后端渲染语言，不需要依赖后端项目的启动，从而降低了开发耦合度、提升开发效率；
View 层渲染逻辑全在 JavaScript 层实现，容易维护和修改；
数据通过接口得到，无需考虑后端数据模型变化，只需关心数据格式。

引入方式

javascript 文件引入：

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

node.js 方式

 npm install dot

然后在代码中使用

require('dot')

基本语法

插值：{{=it.xxx }}
取值：{{=xxx }}
遍历数组：{{~it.array :value:index}} ...{{~}}
遍历对象：javascript {{ for var key in data { }} {{= key }} {{ } }}
三木运算：{{=(it.value=='somevalue'?'value1':'value2')}}
条件判断：{{? }} 表if{{??}}表else if{{??}}表else
encoding后再插值：{{!it.xxx}}
编译时取值：{{# }} for compile-time evaluation/includes and partials
编译时定义：{{## #}} for compile-time defines

语法示例

插值：{{=it.xxx }} 用法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="./js/doT.min.js"></script>
    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
</head>

<body>
    <div id="showHtml"></div>
    <script type="text/javascript">
            var data = {"name":"Jake","age":31};
            var str = "<div>Hi {{=it.name}}!</div><div>{{=it.age || ''}}</div>"
            var tempFn = doT.template(str);
            $("#showHtml").html(tempFn(data));
    </script>
</body>
</html>

输出：在这里插入图片描述

取值：{{=xxx }} 和遍历对象用法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="./js/doT.min.js"></script>
    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
</head>

<body>
    <div id="showHtml"></div>
    <script type="text/javascript">
            var data = {"name":"Jake","age":31,"mother":"Kate","father":"John",
            "interests":["basketball","hockey","photography"],"contact":{"email"
            :"jake@xyz.com","phone":"999999999"}};
            var str = "{{ for(var prop in it) { }}<div>{{=prop}}</div>{{ } }}"
            var tempFn = doT.template(str);
            $("#showHtml").html(tempFn(data));
    </script>
</body>
</html>

输出：在这里插入图片描述

遍历数组：{{~it.array :value:index}} ...{{~}}用法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="./js/doT.min.js"></script>
    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
</head>

<body>
    <div id="showHtml"></div>
    <script type="text/javascript">
            var data = {"array":["banana","apple","orange"]};
            var str = "{{~it.array:value:index}}<div>{{=value}}!</div>{{~}}"
            var tempFn = doT.template(str);
            $("#showHtml").html(tempFn(data));
    </script>
</body>
</html>

输出：在这里插入图片描述

三木运算：{{=(it.value=='somevalue'?'value1':'value2')}} 用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="./js/doT.min.js"></script>
    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
</head>

<body>
    <div id="showHtml"></div>
    <script type="text/javascript">
            var data = {"name":"Jake","age":31};
            var str = "{{=(it.name=='Tom'?'我':'他')}}"
            var tempFn = doT.template(str);
            $("#showHtml").html(tempFn(data));
    </script>
</body>
</html>

输出：在这里插入图片描述

条件判断：{{? }} 表if{{??}}表else if{{??}}表else 用法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="./js/doT.min.js"></script>
    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
</head>

<body>
    <div id="showHtml"></div>
    <script type="text/javascript">
            var data = {"name":"Jake","age":31};
            var str = "{{? !it.name == 'Tom'}} <div> 我叫Tom</div>" +
            "{{??}}<div> 我叫Jake</div>{{?}}";
            var tempFn = doT.template(str);
            $("#showHtml").html(tempFn(data));
    </script>
</body>
</html>