doT简介插件:
doT.js模板引擎,它的大小只有4KB,渲染性能很好,而且直接支持原生的写法,不用依赖别的库,也可以用jQuery等库使用。
模板引擎可以让(网站)实现界面与数据分离,这就大大提升了开发效率,良好的设计也使得代码复用变得更加容易。
使用前注意事项:需要引入这样一个插件。下载地址:https://github.com/olado/doT
需要注意改模板的Type属性值,不是js代码书写标签。
1.直接赋值法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-weight: 600;
}
</style>
</head>
<body>
<!-- 1.直接赋值法{
{
=}},如传入一个HTML片段或js片段,会直接解析
2.编码插入法{
{
!}},如传入一个HTML片段或js片段,它会以字符串的形式渲染
3.循环数组法{
{
~it:value:index}};
4.条件判断法{
{
?}}{
{
??}},相当于原生的if else if
5.模块定义{
{
##def.模板名 #}},{
{
#def.模板名}}引用模块 -->
<div id="box">
<!--模板存放区域,修改type类型,以免被解析成js-->
<!--1.直接赋值法{
{
=}},如传入一个HTML片段或js片段,会直接解析-->
<script type="text/x-dot-temolate" id="te">
姓名:{
{
=it.name}}<br />
年龄:{
{
!it.age}}<br /> //以字符串的形式渲染
爱好:<span style="color: red;font-size: 20px;">{
{
=it.ah}}</span>
</script>
</div>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="doT.min.js" ></script>
<script type="text/javascript">
//从服务器返回的数据,一般是用ajax从服务器获取
var element={
name:'小明',
age:"<span style='color: #5500ff;font-size: 20px;'>18岁</span>",
ah:"玩游戏"};
//生成模板方法
var tpt = doT.template(document.getElementById("te").innerHTML);
//把数据渲染到指定元素中
document.getElementById("box").innerHTML=tpt(element);
</script>
</body>
</html>
2.循环数组法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<!--模板存放区域,修改type类型,以免被解析成js-->
<!--3.循环数组法{
{
~it:value:index}};-->
<script type="text/x-dot-temolate" id="te">
{
{
~it:value:index}} <!--相当于for() {
--> 不需要要结束条件,自动判断元素个数
<div>姓名:{
{
=value.name}} 年龄:{
{
=value.age}} 爱好:{
{
=value.ah}} </div>
{
{
~}} <!--相当于for循环的结束括号 } -->
</script>
</div>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="doT.min.js" ></script>
<script type="text/javascript">
$(function(){
//从服务器返回的数据,一般是用ajax从服务器获取
var element=[
{
name:'小a',age:"15岁",ah:"玩游戏"},
{
name:'小b',age:"16岁",ah:"听音乐"},
{
name:'小c',age:"17岁",ah:"游玩"},
]
//生成模板方法
var tpt = doT.template($("#te").html());
//把数据渲染到指定元素中
$("#box").html(tpt(element));
})
</script>
</body>
</html>
3.条件判断法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<!--模板存放区域,修改type类型,以免被解析成js-->
<!--4.条件判断法{
{
?}}{
{
??}},相当于原生的if else if-->
<script type="text/x-dot-temolate" id="zxw">
{
{
~it:value:index}} <!--相当于for(){
-->
{
{
? !value.age}} <!-- 相当于if()-->
<div>姓名:{
{
=value.name}} 年龄: 暂无 爱好:{
{
=value.ah}}</div>
{
{
?? !value.ah}} <!-- 相当于 elese if -->
<div>姓名:{
{
=value.name}} 年龄:{
{
=value.age}} 爱好:暂无</div>
{
{
??}} <!-- 相当于 elese -->
<div>姓名:{
{
=value.name}} 年龄:{
{
=value.age}} 爱好:{
{
=value.ah}}</div>
{
{
?}} <!-- 相当于if的结束括号 -->
{
{
~}} <!--相当于for的结束括号 } -->
</script>
</div>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="doT.min.js" ></script>
<script type="text/javascript">
$(function(){
//从服务器返回的数据,一般是用ajax从服务器获取
var data=[
{
name:'小a',age:"12岁",ah:"听音乐"},
{
name:'小b',age:"13岁"},
{
name:'小c',ah:"玩游戏"},
]
//生成模板方法
var tpt = doT.template($("#zxw").html());
//把数据渲染到指定元素中
$("#box").html(tpt(data));
})
</script>
</body>
</html>
4.模板引用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<!--模板存放区域,修改type类型,以免被解析成js-->
<!--5.模块定义{
{
##def.模板名: #}},{
{
#def.模板名}}引用模块-->
<script type="text/x-dot-temolate" id="te">
<!--定义模板1-->
{
{
##def.tp1:
<div>姓名:{
{
=value.name}} 年龄:暂无 爱好:{
{
=value.ah}}</div>
#}}
<!--定义模板2-->
{
{
##def.tp2:
<div>姓名:{
{
=value.name}} 年龄:{
{
=value.age}} 爱好:暂无</div>
#}}
<!--定义模板3-->
{
{
##def.tp3:
<div>姓名:{
{
=value.name}} 年龄:{
{
=value.age}} 爱好:{
{
=value.ah}}</div>
#}}
<!---------------------------------------------------------------------->
<!-- 定义好模板根据条件判断选择相应的模板 -->
{
{
~it:value:index}} <!--相当于for(){
-->
{
{
? !value.age}}
{
{
#def.tp1}} <!--引用模板1-->
{
{
?? !value.ah}}
{
{
#def.tp2}} <!--引用模板2-->
{
{
??}}
{
{
#def.tp3}} <!--引用模板3-->
{
{
?}}
{
{
~}} <!--相当于 } -->
</script>
</div>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="doT.min.js" ></script>
<script type="text/javascript">
$(function(){
//从服务器返回的数据,一般是用ajax从服务器获取
var element=[
{
name:'小a',age:"12岁",ah:"打篮球"},
{
name:'小b',age:"13岁"},
{
name:'小c',ah:"看电视"},
];
//生成模板方法
var tpt = doT.template($("#te").html());
//把数据渲染到指定元素中
$("#box").html(tpt(element));
})
</script>
</body>
</html>
5.实战演练:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/51zxw.css"/>
</head>
<style type="text/css">
*{
margin: 0;padding: 0;
-moz-box-sizing: border-box;/*火狐浏览器*/
-webkit-box-sizing: border-box;/*webkit内核浏览器*/
box-sizing: border-box;
}
body{
font-size: 14px;font-family: "微软雅黑";color: #333333;background: #f3f3f3;}
b{
font-weight: normal;}
i{
font-style: normal;}
a,a:hover,a:active{
text-decoration: none;color: #333333;}
input,textarea,select{
outline:none}
img{
border: none;vertical-align: top;}
li{
list-style: none;}
.fl{
float: left;}
.fr{
float: right;}
.cl{
clear: both;}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.zx-box a{
width: 270px;height: 240px;margin: 20px 15px;
}
.zx-box a img{
height: 210px;
}
</style>
<body>
<!--最新课程开始-->
<div class="zxkc content-box">
<h3 class="m-title">实战演练</h3>
<div class="m-list zx-box clearfix" id="box">
<script type="text/x-dot-temolate" id="te">
{
{
~it:value:index}}
<a href="#">
<img src="{
{=value.img}}"/> <!--此处需要注意把{
{
=value.img}}用双引号“”括起来-->
<p>{
{
=value.title}}</p>
</a>
{
{
~}}
</script>
</div>
</div>
<!--最新课程结束-->
<script src="doT.min.js" ></script>
<script type="text/javascript">
//模拟从服务器返回的数据,一般是用ajax从服务器获取
var element=[
{
img:"https://file.icve.com.cn/doc_public/749/358/BB659B37DFCDE51AD8EDDDD247D1CDF9.png?x-oss-process=image/resize,m_fixed,w_118,h_66,limit_0",title:"元素1" },
{
img:"https://file.icve.com.cn/ssykt/497/710/7C6B1AB77912C302C1BCCA2CDD08D6AA.png?x-oss-process=image/resize,m_fixed,w_280,h_168,limit_0",title:"元素2" },
{
img:"https://file.icve.com.cn/ssykt/893/571/DF48ED46F23C58F375348E71CD8BED5B.jpg?x-oss-process=image/resize,m_fixed,w_280,h_168,limit_0",title:"元素3" },
{
img:"https://file.icve.com.cn/ssykt/167/537/29E8676E2414077F8CDFBC7B8046E76C.jpg?x-oss-process=image/resize,m_fixed,w_280,h_168,limit_0",title:"元素4" },
{
img:"https://file.icve.com.cn/ssykt/511/522/7FF828B2D78CA989C612DB14DF94B7B8.jpg?x-oss-process=image/resize,m_fixed,w_280,h_168,limit_0",title:"元素5" },
{
img:"https://file.icve.com.cn/file_doc/46/696/0BAAE2C95EBF5A50DAC2599471ABC96A.jpg?x-oss-process=image/resize,m_fixed,w_280,h_168,limit_0",title:"元素6" },
{
img:"https://file.icve.com.cn/ssykt/956/963/EF0F0EFBBFE416BC151D459B0035037D.jpg?x-oss-process=image/resize,m_fixed,w_280,h_168,limit_0",title:"元素7" },
{
img:"https://file.icve.com.cn/ssykt/642/870/A0AD9BE12AB0580BE4F8E0E0B737BA66.jpg?x-oss-process=image/resize,m_fixed,w_280,h_168,limit_0",title:"元素8" },
];
//生成模板方法
var tpt = doT.template(document.getElementById("te").innerHTML);
//把数据渲染到指定元素中
document.getElementById("box").innerHTML=tpt(element);
</script>
</body>
</html>
实战演练运行结果: