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

node.js 方式

 npm install dot
1

然后在代码中使用

require('dot')
1

基本语法

插值：{{=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 = "Hi {{=it.name}}!
{{=it.age || ''}}
"
            var tempFn = doT.template(str);
            $("#showHtml").html(tempFn(data));
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

取值：{{=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) { }}{{=prop}}
{{ } }}"
            var tempFn = doT.template(str);
            $("#showHtml").html(tempFn(data));
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

遍历数组：{{~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}}{{=value}}!
{{~}}"
            var tempFn = doT.template(str);
            $("#showHtml").html(tempFn(data));
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

三木运算：{{=(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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

条件判断：{{? }} 表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'}}  我叫Tom
" +
            "{{??}} 我叫Jake
{{?}}";
            var tempFn = doT.template(str);
            $("#showHtml").html(tempFn(data));
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

结尾

以上是doT.js的基础用法。

相关阅读:
嵌入式考试重点
 [笔记]CentOS7 vsftpd安装及配置使用
 【VsCode】vscode创建文件夹有小图标显示和配置
 中级程序员——vue3+js+git面试题
 考研系列-数据结构第二章、线性表
 【摸鱼神器】UI库秒变低代码工具——表单篇（二）子控件
 如何实现一个IO口读取多个设备信息
 DateTime 相关的操作汇总【C# 基础】
pod(七)：静态pod
Spring 事务
原文地址：https://blog.csdn.net/weixin_36775115/article/details/133312889