doT.js模板引擎（附案例）

最新推荐文章于 2023-09-27 10:39:29 发布
最新推荐文章于 2023-09-27 10:39:29 发布
阅读量1k 收藏 5
点赞数 3
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46188681/article/details/106797908
版权

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>

实战演练运行结果：
在这里插入图片描述

野生java研究僧
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端渲染引擎doT.js解析
02-20
前端渲染有很多框架，而且形式和内容在不断发生变化。这些演变的背后是设计模式的变化，而归根到底是功能划分逻辑的演变：MVC—>MVP—>MVVM（忽略最早混在一起的写法，那不称为模式）。近几年兴起的React、Vue、Angular等框架都属于MVVM模式，能帮我们实现界面渲染、事件绑定、路由分发等复杂功能。但在一些只需完成数据和模板简单渲染的场合，它们就显得笨重而且学习成本较高了。例如，在美团外卖的开发实践中，前端经常从后端接口取得长串的数据，这些数据拥有相同的样式模板，前端需要将这些数据在同一个样式模板上做重复渲染操作。解决这个问题的模板引擎有很多，doT.js（出自女程序员LauraDok
doT.js：一个强大高效的JavaScript模板引擎
最新发布
gitblog_00067的博客
03-14 392
doT.js：一个强大高效的JavaScript模板引擎 doT.js 是一个轻量级的JavaScript模板引擎，它提供了丰富的功能和高效的性能，用于动态生成HTML页面。 项目简介 doT.js由Olado开发并开源，它的目标是提供一种简单、高效的方式来创建可复用的模板，并能够快速地将数据渲染为HTML代码。与其他模板引擎相比，doT.js更注重性能和灵活性，使得开发者可以更好地控制生成的HT...
doT.js基本教程
chdyiboke的博客
08-14 7799
官网：http://olado.github.io/doT/index.html   {{ }} for evaluation {{= }} for interpolation {{! }} for interpolation with encoding {{# }} for compile-time evaluation/includes and part...
doT.js 模板引擎 完全使用说明和示例
牵风纸鸢的博客
05-27 4079
doT.js是一个独立的，简小快速的JS模版引擎 下载地址：https://github.com/olado/doT 1、渲染，模版中传入的变量引用，都需要通过 it.变量名进行引用 var tempFn = doT.template("<h1>{{=it.title}}</h1>"); var resultHtml = tempFn({'title':'Hel...
doT.js模板学习笔记
总该长大了的博客
09-27 729
doT.js 是一个 JavaScript 模板框架，在 web 前端使用 dot.js 作为模板引擎，主要的用途就是，在写好的模板上，放进数据，生成含有数据的 html 代码。以上是doT.js的基础用法，接下来会介绍实战项目中的具体使用。
JavaScript模板引擎doT.js.zip
07-19
doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎。 标签：doTjs
gulp-dotjsify:预编译 doT.js 模板的 Gulp 插件
07-06
gulp-dotjsify 用于预编译 doT.js 模板的 Gulp 插件用法安装gulp-dotjsify npm install gulp-dotjsify --save-dev选项###options.type 类型： String 此选项... src ( './path/to/dotjs/templates/*.dot' ) . pipe (
dotify:用于 doT.js 的 Browserify 转换插件
07-02
打点 用于Browserify 转换插件。 安装 npm install dotify 用法 在 main.js 中： ... 您还可以将选项传递给 doT.js 编译器，例如保留空格： $ browserify -t [ dotify --no-strip ] main.js 执照 麻省理工学院
doT.js
whatisthespring的博客
10-29 474
1.js超五个字节省略符号代替的用法 var str="这里是字符串aaaa";//原始字符串var s = str;//要展示的字符串if(str.length>10){ s=str.substring(0,10)+"...";} 2，其实doT.js和js差不多 之前的代码因为name过长导致样式出现了问题所有总想不出有什么方法解决尝试了一下竟然行了 之前的代码
doT.js简单入门
08-12
NULL 博文链接：https://0qingfeideyi0.iteye.com/blog/2274741
doT学习（一）之语法
weixin_30247159的博客
07-22 567
简介 创建搜索最快和简洁的JavaScript模板函数，强调V8和nodejs下的性能，它在nodejs和浏览器上都显示了很好的性能。 dot.js速度快，体积小，没有依赖关系，源js代码只有140行 特性 无依赖 极其快速 自定义定界符 (custom delimiters) 运行时求值 (runtime evaluation) ...
模板引擎doT.js
weixin_30456039的博客
07-12 80
作为一名前端攻城师，经常会遇到从后台ajax拉取数据再显示在页面的情境，一开始我们都是从后台拉取再用字符串拼接的方式去更达到数据显示在页面！ <!-- 显示区域 --> <div id="testid"></div> <script type="text/javascript"> var testjson={"name":"张三","ag...
JavaScript doT模板引擎
苦涩
07-09 534
doT模板引擎 js模板引擎，它的大小只有4KB，渲染性能很好，而且直接支持原生的写法，不用依赖别的库 doT模板引擎使用流程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="./js/doT.min.js"></script> <.
doT.js详细介绍
weixin_34018202的博客
01-05 313
doT.js特点是快，小，无依赖其他插件。官网：http://olado.github.iodoT.js详细使用介绍 使用方法：{{= }} for interpolation{{ }} for evaluation{{~ }} for array iteration{{? }} for conditionals{{! }} for interpolation with encodin...
doT.js 模板引擎
飞翔的熊blabla
05-29 524
插件描述：doT模板方便快捷的组织页面DOM doT.js特点是快，小，无依赖其他插件。压缩版仅有4K大小，最近使用dot的时候整理出这个dot.js教程api文档，是对dot.js的介绍和实例，希望能帮助到一部分需要的人。 doT.js详细使用介绍 使用方法： 1 2 3 4 5 6 7 {{=}}forinterpolation {{}}forevaluation {{~}}forar...
doT.js的基本使用
ZCLegendary的博客
02-17 580
http://blog.sina.com.cn/s/blog_12ff14c2c0102w5si.html
Javascript面向对象编程 及 doT的使用
寸草心的博客
05-20 432
Javascript面向对象编程 https://segmentfault.com/a/1190000002900676 doT模板的使用 官网： http://olado.github.io/doT/index.html js  doT定义调用使用；       调用方发： var tmpText = doT.template(模板); tmpText(数据源);
dot.js两个语法之间的空行符
06-08
在 dot.js 模板引擎中，两个语法之间的空行符会被忽略。 例如，下面的模板语句中，第一行和第二行之间有一个空行符： ``` {{ if (condition) { // do something } }} ``` 这个空行符不会对模板渲染结果产生...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值