欢迎学习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>
输出:
结尾
以上是doT.js的基础用法。