JavaScript doT模板引擎
2024-05-20 05:17:02
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模板引擎相关推荐
- 13 款 JavaScript 模板引擎
JavaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...
- if laytpl 非_laytpl : 一款非常轻量的JavaScript模板引擎
//假设你得到了这么一段数据 var data = { title: '前端圈', intro: '一群码js的骚年,幻想改变世界,却被世界改变.', list: [{name: '贤心', city ...
- JavaScript模板引擎详解
JavaScript模板引擎是一种用于生成HTML.XML和其他文本格式的工具,它将特定的模板语法转换为相应的文本输出,通常用于前端开发中动态生成页面内容.下面是一个JavaScript模板引擎的详细 ...
- doT.js 模板引擎的使用
dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...
- laytpl语法_laytpl 精致巧妙的JavaScript模板引擎
laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统前端引擎的几乎所有功能.所有的变身魔法都由不到1KB的代码创造,这 ...
- 【JavsScript】推荐五款流行的JavaScript模板引擎
摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...
- Javascript模板引擎handlebars使用实例及技巧
我们在开发的时候针对DOM操作,用简单的JS应用来说不成问题,但如果你对视图的每次更新都需要对我文档中非常大量的块进行操作呢?这时JS模版就派上用场了. 源地址:http://rfyiamcool.b ...
- html模块开发模板引擎,一个前端html模板处理引擎(javascript)
http://www.cnblogs.com/jcli/p/javascript_template_pure.html 做后台开发(java/python)的同学开发web应用,对于前端页面生成技术并 ...
- 高性能JavaScript模板引擎原理解析
来源:http://cdc.tencent.com/?p=5723 随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascr ...
最新文章
- ubuntu18.04下双机驱动调试
- win7一直提示格式化磁盘_win10磁盘分区操作步骤
- 想和产品大咖一对一沟通吗？
- acid四大特性_深入理解MySQL的ACID四大特性原理
- [转]Linux之ACL权限
- 用python 画炫酷的图并讲解-超炫酷动态排序图、视频，我都帮你用Python实现了...
- Unity3d 镜面反射 vertex and frag Shader源代码
- docker 中 NGINX+PHP+MYSQL+REDIS+Elasticsearch 环境搭建 (windows系统)
- 指纹识别算法的matlab实现
- vb/vb.net开发技巧荟萃(九)
- 马王堆汉墓帛书‧老子乙本——道经
- react 子组件回调父组件函数
- 唐太宗管理之道：收人，收心，收天下
- SSH Tunnel隧道
- layui的layer的用法
- 在win10中如何运行c语言,Win10技巧：如何把“运行”固定到开始菜单？
- 全民目击之“波状登录”
- 【杀软】Win7内置恶意软件删除工具——MRT
- 头条搜索Bytespider蜘蛛说明
- JAVA:实现买入和卖出股票的最佳时机算法(附完整源码)