doT.js是一个仅4KB大小的高性能JavaScript模板引擎，它支持原生语法且不依赖其他库。本文将详细讲解doT.js的使用流程，包括直接赋值法、在jQuery中的应用、编码插入法、循环数组渲染、条件判断以及模板的定义和引用。
doT模板引擎
js模板引擎，它的大小只有4KB，渲染性能很好，而且直接支持原生的写法，不用依赖别的库
doT模板引擎使用流程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/doT.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="box">
<!-- 模板存放区域, 修改type类型，以免被解析成js -->
<script id="mb" type="text/x-dot-template">
</script>
<!-- 姓名：<span id="name"></span><br>
年龄：<span id="age"></span><br>
爱好：<span id="ah"></span><br> -->
</div>
<script>
// 从服务器返回的数据，一般是用ajax从服务器获取
var data = {name:"苦涩", age:18, ah:"看小说"},
// 生成模板方法
var tpt = doT.template(document.getElementById("mu").innerHTML);
// 把数据渲染到指定元素中
document.getElementById("box").innerHTML = tpt(data);
</script>
</body>
</html>
直接赋值法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/doT.min.js"></script>
</head>
<body>
<div id="box">
<!-- 模板存放区域, 修改type类型，以免被解析成js -->
<!-- 直接赋值法：{{=}},如传入一个HTML片段或js片段，会直接解析 -->
<script type="text/x-dot-template" id="mb">
姓名：{{=it.name}}<br>
年龄：{{=it.age}}<br>
爱好：<span style="color:red; font-size:30px">{{=it.ah}}</span><br>
</script>
</div>
<script>
// 从服务器返回的数据，一般是用ajax从服务器获取
var data = {name:"苦涩",
age:'<span style="color:#00ff00; font-size:20px">18岁</span>',
ah:"看小说"};
// 生成模板方法
var tpt = doT.template(document.getElementById("mb").innerHTML);
// 把数据渲染到指定元素中
document.getElementById("box").innerHTML = tpt(data);
</script>
</body>
</html>
jQuery代码中doT使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/doT.min.js"></script>
</head>
<body>
<div id="box">
<!-- 模板存放区域, 修改type类型，以免被解析成js -->
<!-- 直接赋值法：{{=}},如传入一个HTML片段或js片段，会直接解析 -->
<script type="text/x-dot-template" id="mb">
姓名：{{=it.name}}<br>
年龄：{{=it.age}}<br>
爱好：<span style="color:red; font-size:30px">{{=it.ah}}</span><br>
</script>
</div>
<script>
$(function(){
// 从服务器返回的数据，一般是用ajax从服务器获取
var data = {name:"苦涩",
age:'18岁',
ah:"看小说"};
// 生成模板方法
var tpt = doT.template($("#mb").html());
// 把数据渲染到指定元素中
$("#box").html(tpt(data));
})
</script>
</body>
</html>
编码插入法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/doT.min.js"></script>
</head>
<body>
<div id="box">
<!-- 模板存放区域, 修改type类型，以免被解析成js -->
<!-- 编码插入法：{{!}}, 如传入一个HTML片段或js片段，它会以字符串的形式渲染 -->
<script type="text/x-dot-template" id="mb">
<!-- 姓名：{{=it.name}}<br> -->
姓名：{{!it.name}}<br>
年龄：{{!it.age}}<br>
爱好：{{!it.ah}}<br>
</script>
</div>
<script>
$(function(){
// 从服务器返回的数据，一般是用ajax从服务器获取
var data = {name:"<span id='name' style='font-size:30px'>苦涩</span>",
age:'18岁',
ah:"看小说"};
// 生成模板方法
var tpt = doT.template($("#mb").html());
// 把数据渲染到指定元素中
$("#box").html(tpt(data));
})
</script>
</body>
</html>
循环数组法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/doT.min.js"></script>
</head>
<body>
<div id="box">
<!-- 模板存放区域, 修改type类型，以免被解析成js -->
<!-- 循环数组法：{{~it:value:index}} -->
<script type="text/x-dot-template" id="mb">
<!-- it:相当于服务器返回的数据data，value相当于data数组中的某个元素 -->
{{~it:value:index}} <!-- 相当于 for(){ -->
<div>姓名：{{=value.name}} 年龄：{{=value.age}} 爱好：{{=value.ah}}</div> <br>
{{~}} <!-- 相当于 } -->
</script>
</div>
<script>
$(function(){
// 从服务器返回的数据，一般是用ajax从服务器获取
var data = [
{name:"苦涩2020", age:'18岁', ah:"看小说"},
{name:"苦涩2019", age:'17岁', ah:"看小说"},
{name:"苦涩2018", age:'16岁', ah:"看小说"},
];
// 生成模板方法
var tpt = doT.template($("#mb").html());
// 把数据渲染到指定元素中
$("#box").html(tpt(data));
})
</script>
</body>
</html>
条件判断法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/doT.min.js"></script>
</head>
<body>
<div id="box">
<!-- 模板存放区域, 修改type类型，以免被解析成js -->
<!-- 条件判断法：{{?}}{{??}}, 相当于原生的if--else if -->
<script type="text/x-dot-template" id="mb">
{{~it:value:index}} <!-- 相当于 for(){ -->
<!-- if(!value.age){
<div>姓名：{{=value.name}} 年龄：年龄不详 爱好：{{=value.ah}}</div>
}else if(!value.ah){
<div>姓名：{{=value.name}} 年龄：{{=value.age}} 爱好：爱好没写</div>
}else{
<div>姓名：{{=value.name}} 年龄：{{=value.age}} 爱好：{{=value.ah}}</div>
} -->
{{? !value.age}} <!-- 有写代码相当于 if -->
<div>姓名：{{=value.name}} 年龄：年龄不详 爱好：{{=value.ah}}</div>
{{?? !value.ah}} <!-- 有写代码相当于 else if -->
<div>姓名：{{=value.name}} 年龄：{{=value.age}} 爱好：爱好没写</div>
{{??}} <!-- 没写代码相当于 else -->
<div>姓名：{{=value.name}} 年龄：{{=value.age}} 爱好：{{=value.ah}}</div>
{{?}} <!-- 判断结束 -->
{{~}} <!-- 相当于 } -->
</script>
</div>
<script>
$(function(){
// 从服务器返回的数据，一般是用ajax从服务器获取
var data = [
{name:"苦涩2020", age:'18岁', ah:"看小说"},
{name:"苦涩2019", age:'17岁'},//信息不完整
{name:"苦涩2018", ah:"看小说"},
];
// 生成模板方法
var tpt = doT.template($("#mb").html());
// 把数据渲染到指定元素中
$("#box").html(tpt(data));
})
</script>
</body>
</html>
模板定义和模板引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/doT.min.js"></script>
</head>
<body>
<div id="box">
<!-- 模板存放区域, 修改type类型，以免被解析成js -->
<!-- 定义模板 {{##def.模板名: #}} -->
<!-- 引用模板 {{#def.模板名}} -->
<script type="text/x-dot-template" id="mb">
<!-- 定义模板1 -->
{{##def.kuse1:
<div>姓名：{{=value.name}} 年龄：年龄不详 爱好：{{=value.ah}}</div>
#}}
<!-- 定义模板2 -->
{{##def.kuse2:
<div>姓名：{{=value.name}} 年龄：{{=value.age}} 爱好：爱好没写</div>
#}}
<!-- 定义模板3 -->
{{##def.kuse3:
<div>姓名：{{=value.name}} 年龄：{{=value.age}} 爱好：{{=value.ah}}</div>
#}}
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
{{~it:value:index}} <!-- 相当于 for(){ -->
{{? !value.age}}
{{#def.kuse1}} <!-- 引用模板1 -->
{{?? !value.ah}}
{{#def.kuse2}} <!-- 引用模板2 -->
{{??}}
{{#def.kuse3}} <!-- 引用模板3 -->
{{?}}
{{~}} <!-- 相当于 } -->
</script>
</div>
<script>
$(function(){
// 从服务器返回的数据，一般是用ajax从服务器获取
var data = [
{name:"苦涩2020", age:'18岁', ah:"看小说"},
{name:"苦涩2019", age:'17岁'},//信息不完整
{name:"苦涩2018", ah:"看小说"},
];
// 生成模板方法
var tpt = doT.template($("#mb").html());
// 把数据渲染到指定元素中
$("#box").html(tpt(data));
})
</script>
</body>
</html>
扫一扫
480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
