doT.js模板学习笔记

doT.js模板学习笔记

  • 欢迎学习doT.js模板学习笔记
    • doT.js模板是什么
    • doT.js 主要优势在
    • doT.js好处
    • 引入方式
    • 基本语法
    • 语法示例
    • 结尾

欢迎学习doT.js模板学习笔记

doT.js官方网站
本文章得示例源码

doT.js模板是什么

doT.js 是一个 JavaScript 模板框架,在 web 前端使用 dot.js 作为模板引擎,主要的用途就是,在写好的模板上,放进数据,生成含有数据的 html 代码。

doT.js 主要优势在

  1. 小巧精简,源代码不超过两百行,6KB 的大小,压缩版只有 4KB;
  2. 支持表达式丰富,涵盖几乎所有应用场景的表达式语句;
  3. 性能优秀;
  4. 不依赖第三方库。

doT.js好处

和后端渲染不同,doT.js 的渲染完全交由前端来进行,这样做主要有以下好处:

  • 脱离后端渲染语言,不需要依赖后端项目的启动,从而降低了开发耦合度、提升开发效率;
  • View 层渲染逻辑全在 JavaScript 层实现,容易维护和修改;
  • 数据通过接口得到,无需考虑后端数据模型变化,只需关心数据格式。

引入方式

  • javascript 文件引入:
<script type="text/javascript" src="./js/doT.min.js"></script>
  • node.js 方式
 npm install dot

然后在代码中使用

require('dot')

基本语法

  1. 插值:{{=it.xxx }}
  2. 取值:{{=xxx }}
  3. 遍历数组:{{~it.array :value:index}} ...{{~}}
  4. 遍历对象:javascript {{ for var key in data { }} {{= key }} {{ } }}
  5. 三木运算:{{=(it.value=='somevalue'?'value1':'value2')}}
  6. 条件判断:{{? }} 表if{{??}}表else if{{??}}表else
  7. encoding后再插值:{{!it.xxx}}
  8. 编译时取值:{{# }} for compile-time evaluation/includes and partials
  9. 编译时定义:{{## #}} for compile-time defines

语法示例

  1. 插值:{{=it.xxx }} 用法:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="./js/doT.min.js"></script>
    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
</head>

<body>
    <div id="showHtml"></div>
    <script type="text/javascript">
            var data = {"name":"Jake","age":31};
            var str = "
Hi {{=it.name}}!
{{=it.age || ''}}
"
var tempFn = doT.template(str); $("#showHtml").html(tempFn(data)); </script> </body> </html>

输出:doT.js模板学习笔记_第1张图片

  1. 取值:{{=xxx }} 和 遍历对象 用法:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="./js/doT.min.js"></script>
    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
</head>

<body>
    <div id="showHtml"></div>
    <script type="text/javascript">
            var data = {"name":"Jake","age":31,"mother":"Kate","father":"John",
            "interests":["basketball","hockey","photography"],"contact":{"email"
            :"[email protected]","phone":"999999999"}};
            var str = "{{ for(var prop in it) { }}
{{=prop}}
{{ } }}"
var tempFn = doT.template(str); $("#showHtml").html(tempFn(data)); </script> </body> </html>

输出:doT.js模板学习笔记_第2张图片

  1. 遍历数组:{{~it.array :value:index}} ...{{~}}用法:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="./js/doT.min.js"></script>
    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
</head>

<body>
    <div id="showHtml"></div>
    <script type="text/javascript">
            var data = {"array":["banana","apple","orange"]};
            var str = "{{~it.array:value:index}}
{{=value}}!
{{~}}"
var tempFn = doT.template(str); $("#showHtml").html(tempFn(data)); </script> </body> </html>

输出:doT.js模板学习笔记_第3张图片

  1. 三木运算:{{=(it.value=='somevalue'?'value1':'value2')}} 用法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="./js/doT.min.js"></script>
    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
</head>

<body>
    <div id="showHtml"></div>
    <script type="text/javascript">
            var data = {"name":"Jake","age":31};
            var str = "{{=(it.name=='Tom'?'我':'他')}}"
            var tempFn = doT.template(str);
            $("#showHtml").html(tempFn(data));
    </script>
</body>
</html>

输出:doT.js模板学习笔记_第4张图片

  1. 条件判断:{{? }} 表if{{??}}表else if{{??}}表else 用法:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="./js/doT.min.js"></script>
    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
</head>

<body>
    <div id="showHtml"></div>
    <script type="text/javascript">
            var data = {"name":"Jake","age":31};
            var str = "{{? !it.name == 'Tom'}} 
我叫Tom
"
+ "{{??}}
我叫Jake
{{?}}"
; var tempFn = doT.template(str); $("#showHtml").html(tempFn(data)); </script> </body> </html>

输出:doT.js模板学习笔记_第5张图片

结尾

以上是doT.js的基础用法。

你可能感兴趣的:(JavaScript,javascript,学习,笔记)