1. 首页
  2. 文章中心
  3. Web前端

快速上手超级实用的JS模板引擎--doT.js

84 阅读 0 评论
我是靠谱客的博主 迷人心锁，最近开发中收集的这篇文章主要介绍快速上手超级实用的JS模板引擎--doT.js，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

      • 总体结构
      • 使用教程
        • 1. 赋值
        • 2. 数组
        • 3. 条件
        • 4. 编码渲染
        • 5. 定义与引用公共模块
        • 6. 循环
      • Reference

总体结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dot</title>
<!--引入jQuery和doT.js文件 -->
<script src="assets/vendor/jquery/jquery-1.12.4.js"></script>
<script src="assets/js/doT.js"></script>
</head>
<body>
<!--显示区-->
<!--js模板-->
<!--数据源-->
<!--模板渲染-->
</body>
</html>

下面的例子中使用的都是写死的数据，具体项目中数据源使用的是Ajax从后台获取数据

使用教程

1. 赋值

格式

{{= }}

Demo

<!--显示区-->
<div id="view"></div>
<!--js模板-->
<script type="text/x-dot-template" id="js-template">
<h1>Hello, {{=it.name}}!</h1>
</script>
<!--数据源-->
<script>
let json = {
"name": "秋叶依剑",
"age": "23"
};
</script>
<!--模板渲染-->
<script>
let tmpl = doT.template($("#js-template").html());
/*生成模板方法*/
$("#view").html(tmpl(json));
//数据渲染
</script>

2. 数组

格式

{{~it:value:index }}
...
{{~}}

Demo

 <!--显示区-->
<div id="view"></div>
<!--js模板-->
<script type="text/x-dot-template" id="js-template">
<ul>
{{~it:value:index}}
<li>姓名: {{=value.name}} 年龄: {{=value.age}}</li>
{{~}}
</ul>
</script>
<!--数据源-->
<script>
let json = [{
"name": "张三",
"age": 21
}, {
"name": "李四",
"age": 22
}, {
"name": "王五",
"age": 23
}];
</script>
<!--模板渲染-->
<script>
let tmpl = doT.template($("#js-template").html()); /*生成模板方法*/
$("#view").html(tmpl(json)); //数据渲染
</script>

3. 条件

格式

{{? value.age >= 100}}
<!--if(value.age == 100)-->
<li>姓名: {{=value.name}} 年龄: 百岁老人</li>
{{?? value.age <= 3}}
<!--else if(value.age == 3)-->
<li>姓名: {{=value.name}} 年龄: 可爱baby</li>
{{??}}
<!--else-->
<li>姓名: {{=value.name}} 年龄: {{=value.age}}</li>
{{?}}
<!--结束条件判断-->

Demo


<!--显示区-->
<div id="view"></div>
<!--js模板-->
<script type="text/x-dot-template" id="js-template">
<ul>
{{~it:value:index}}
{{? value.age >= 100}}
<!--if(value.age == 100)-->
<li>姓名: {{=value.name}} 年龄: 百岁老人</li>
{{?? value.age <= 3}}
<!--else if(value.age == 3)-->
<li>姓名: {{=value.name}} 年龄: 可爱baby</li>
{{??}}
<!--else-->
<li>姓名: {{=value.name}} 年龄: {{=value.age}}</li>
{{?}}
<!--结束条件判断-->
{{~}}
<!--结束数组循环-->
</ul>
</script>
<!--数据源-->
<script>
let json = [{
"name": "张三",
"age": 21
}, {
"name": "李四",
"age": 100
}, {
"name": "王五",
"age": 3
}];
</script>
<!--模板渲染-->
<script>
let tmpl = doT.template($("#js-template").html()); /*生成模板方法*/
$("#view").html(tmpl(json)); //数据渲染
</script>

4. 编码渲染

将获取的数据以字符串的形式渲染，html标签不会被浏览器解析，可以防止代码注入

格式

{{! }}

Demo

 <!--显示区-->
<div id="view"></div>
<!--js模板-->
<script type="text/x-dot-template" id="js-template">
<ul>
{{~it:value:index}}
{{? value.age == 20}}
<!--按照原来的样式形式输出，html标签会被浏览器解析-->
<li>姓名: {{=value.name}} FreeStyle: {{=value.freeStyle}}</li>
{{??}}
<!--字符串的形式输出，html标签不会被浏览器解析，可以防止代码注入-->
<li>姓名: {{=value.name}} FreeStyle: {{!value.freeStyle}}</li>
{{?}}
{{~}}
</ul>
</script>
<!--数据源-->
<script>
let json = [{
"name": "张三",
"age": 20,
"freeStyle": "<h3>Rap</h3>"
}, {
"name": "李四",
"age": 18,
"freeStyle": "<h3>Basketball</h3>"
}];
</script>
<!--模板渲染-->
<script>
let tmpl = doT.template($("#js-template").html()); /*生成模板方法*/
$("#view").html(tmpl(json)); //数据渲染
</script>

5. 定义与引用公共模块

格式

 <!--定义公共模块1-->
{{##def.module1:
...
#}}
<!--引用模块1-->
{{#def.module1}}

Demo

 <!--显示区-->
<div id="view"></div>
<!--js模板-->
<script type="text/x-dot-template" id="js-template">
<!--定义公共模块1-->
{{##def.module1:
<li style="color: red">姓名: {{=value.name}} FreeStyle: {{=value.freeStyle}} <span>你引用了模块1</span></li>
#}}
<!--定义公共模块2-->
{{##def.module2:
<li style="color: pink">姓名: {{=value.name}} FreeStyle: {{=value.freeStyle}} <span>你引用了模块2</span></li>
#}}
<ul>
{{~it:value:index}}
{{? value.age == 18}}
<!--引用模块1-->
{{#def.module1}}
{{?? value.age == 20}}
<!--引用模块2-->
{{#def.module2}}
{{?}}
{{~}}
</ul>
</script>
<!--数据源-->
<script>
let json = [{
"name": "张三",
"age": 20,
"freeStyle": "Rap"
}, {
"name": "李四",
"age": 18,
"freeStyle": "BasketBall"
}];
</script>
<!--模板渲染-->
<script>
let tmpl = doT.template($("#js-template").html()); /*生成模板方法*/
$("#view").html(tmpl(json)); //数据渲染
</script>

6. 循环

格式

每行JS语句均需要 {{ }}包住

{{ for(let i = 0; i < it.length; i++){ }}
{{ let value = it[i]; }}
{{ if(value.age === 20) { }}
...
{{ }else{ }}
...
{{ } }}
{{ } }}

Demo


<!--显示区-->
<div id="view"></div>
<!--js模板-->
<script type="text/x-dot-template" id="js-template">
<!--定义公共模块1-->
{{##def.module1:
<li style="color: red">姓名: {{=value.name}} FreeStyle: {{=value.freeStyle}} <span>你引用了模块1</span></li>
#}}
<!--定义公共模块2-->
{{##def.module2:
<li style="color: pink">姓名: {{=value.name}} FreeStyle: {{=value.freeStyle}} <span>你引用了模块2</span></li>
#}}
<ul>
{{ for(let i = 0; i < it.length; i++){ }}
{{ let value = it[i]; }}
{{ if(value.age === 20) { }}
{{#def.module1}}
{{ }else{ }}
{{#def.module2}}
{{ } }}
{{ } }}
</ul>
</script>
<!--数据源-->
<script>
let json = [{
"name": "张三",
"age": 20,
"freeStyle": "Rap"
}, {
"name": "李四",
"age": 18,
"freeStyle": "BasketBall"
}];
</script>
<!--模板渲染-->
<script>
let tmpl = doT.template($("#js-template").html()); /*生成模板方法*/
$("#view").html(tmpl(json)); //数据渲染
</script>

Reference

  • http://www.jq22.com/jquery-info8648
  • https://www.cnblogs.com/zhao-yi/p/7485447.html

最后

以上就是迷人心锁为你收集整理的快速上手超级实用的JS模板引擎--doT.js的全部内容，希望文章能够帮你解决快速上手超级实用的JS模板引擎--doT.js所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(56)

相关文章

doT.js
doT.js
dot.js教程文档api
dot.js教程文档api
doT.js详细介绍
doT.js详细介绍
dotjsdotjs
dotjsdotjs
快速上手超级实用的JS模板引擎--doT.js
快速上手超级实用的JS模板引擎--doT.js
nodejs模板引擎doT使用方法
nodejs模板引擎doT使用方法
文本溢出解决方案---jquery-dotdotdot插件的使用方法
文本溢出解决方案---jquery-dotdotdot插件的使用方法
Django入门：template(模板)一、变量二、模板过滤器三、标签附：具体的格式化字符串如下所示
Django入门：template(模板)一、变量二、模板过滤器三、标签附：具体的格式化字符串如下所示

评论列表共有 0 条评论

立即
投稿
返回
顶部