概述
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>
最后
以上就是如意鸵鸟为你收集整理的JavaScript doT模板引擎doT模板引擎的全部内容，希望文章能够帮你解决JavaScript doT模板引擎doT模板引擎所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复