DoT.js前端模板引擎使用方法

作者: 一线青年 | 来源:发表于2017-07-19 09:11 被阅读1187次

一键获取doT.js
doT.js演示说明文档
JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,现在各大型网站 Twitter、淘宝网、新浪浪微博、腾讯QQ空间、腾讯微博等都纷纷使用了自家的模板引擎,Look:
baiduTemplate(百度)
artTemplate(腾讯)
juicer(淘宝)
doT
tmpl
handlebars
easyTemplate
underscoretemplate
mustache
kissytemplate

今天给大家推荐一下dot.js,因为它极小却功能极强,先看性能测试:
引擎渲染速度竞赛

100 条数据 × 10000 次渲染测试 [isEscape:false, isCache:true]
ie8浏览器(8.0.6001.18702)


chrome浏览器(版本 26.0.1410.64 m)
chrome测试数据
Apple safari浏览器(5.1.7(7534.57.2))
safari测试数
firefox浏览器(19.0.2)
firefox测试数据
奇虎360浏览器(版本号6.1.0.356,内核版本:21.0.1180.89)
360测试数据

测试结果


js模板引擎对比数据

通过对各模板引擎测试结果,可以看出
artTemplate,juicer与doT引擎模板整体性能要有绝对优势;
其中doT引擎模板在IE与safari浏览器表现非常优越;另外doT.js小巧且毫无依赖。dot.min.js大小才4K,一百多行代码!

这么好的东西,赶紧用起来,接下来说一下使用方法!

doT.js可以更好的在html端使用json数据。

基本语法

{{ }} for evaluation 模板标记符
{{= }} for interpolation 输出显示,默认变量名叫it
{{! }} for interpolation with encoding 编码后输出显示
{{? }} for conditionals 条件分支,if条件的简写
{{~ }} for array iteration 遍历数组

使用

引入js
<script type="text/javascript" src="../script/doT.min.js"></script>

<script type="text/javascript" src="../script/zepto.min.js"></script>

功能点
#######1.for interpolation 赋值
格式:

{{= }}

数据源:

{"name":"Jake","age":31}

区域:

<div id="interpolation"></div>

模板:

<script id="interpolationtmpl" type="text/x-dot-template">
<div>Hi {{=it.name}}!</div>
<div>{{=it.age || ''}}</div>
</script>

调用方式:

var dataInter = {"name":"Jake","age":31};
var interText = doT.template($("#interpolationtmpl").text());
$("#interpolation").html(interText(dataInter));

#######2.for evaluation for in 循环

格式:

{{ for var key in data { }} 
{{= key }} 
{{ } }}

数据源:

{"name":"Jake","age":31,"interests":["basketball","hockey","photography"],"contact":{"email":"jake@xyz.com","phone":"999999999"}}

区域:

<div id="evaluation"></div>

模板:

<script id="evaluationtmpl" type="text/x-dot-template">
{{ for(var prop in it) { }}
<div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>
{{ } }}
</script>

调用方式:

var dataEval = {"name":"Jake","age":31,"interests":["basketball","hockey","photography"],"contact":{"email":"jake@xyz.com","phone":"999999999"}};
var evalText = doT.template($("#evaluationtmpl").text());
$("#evaluation").html(evalText(dataEval));

#######3.for array iteration 数组
格式:

{{~data.array :value:index }}
{{~}}

数据源:

{"array":["banana","apple","orange"]}

区域:

<div id="arrays"></div>

模板:

<script id="arraystmpl" type="text/x-dot-template">
{{~it.array:value:index}}
<div>{{= index+1 }}{{= value }}!</div>
{{~}}
</script>

调用方式:

var dataArr = {"array":["banana","apple","orange"]};
var arrText = doT.template($("#arraystmpl").text());
$("#arrays").html(arrText(dataArr));

#######4.for conditionals 条件
格式:

{{? }} if
{{?? }} else if
{{??}} else

数据源:

{"name":"Jake","age":31}

区域:

<div id="condition"></div>

模板:

<script id="conditionstmpl" type="text/x-dot-template">
{{? it.name }}
<div>Oh, I love your name, {{=it.name}}!</div>
{{?? !it.age === 0}}
<div>Guess nobody named you yet!</div>
{{??}}
You are {{=it.age}} and still dont have a name?
{{?}}
</script>

调用方式:

var dataCondition = {"age":31};
var conText = doT.template($("#conditionstmpl").text());
$("#condition").html(conText(dataCondition));

以上调用方法都借助了jq,来个原生态的调用示例!

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Dot.js示例文档</title>
    </head>
    <body >
        <ul id='showInfo'>
           <script type="text/template" charset="utf-8" id='template_1'>
            {{if( it && it.length>0 ){ }}
            {{for(var i=0; i<it.length; i++){ }}
                <li>{{=it[i].name}}</li>
            {{ } }}
            {{ }else{ }}
                <li>没有数据。</li>
            {{ } }}
          </script>
      </ul>
    <br>
    <hr >
    <br>
     <ul id='showInfo2'>
     </ul>
  </body>

<script type="text/javascript" charset="utf-8" src='doT.min.js'></script>
<script type="text/javascript" charset="utf-8">
    var template=document.getElementById('template_1').innerHTML;
    var obj=[{name:'d1'},{name:'d2'},{name:'d3'}];
    //传递一个有数据的数组进去
    document.getElementById('showInfo').innerHTML=doT.template( template )( obj );
    //传入的数据为空
    document.getElementById('showInfo2').innerHTML=doT.template( template )( [] );
</script>
</html>

相关文章

  • DoT.js前端模板引擎使用方法

    一键获取doT.jsdoT.js演示说明文档JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来...

  • 必须掌握的前端模板引擎之art-template

    常用的模板引擎有tpl.js、baiduTemplate、doT.js、art-template等等; 我所理解的...

  • 前端模板引擎doT.js的使用

    前言 我们在做前端开发时,经常需要根据后台返回的json数据动态生成html并插入到页面中显示。最简单的方法就是通...

  • doT.js 模板引擎

    介绍 一个适用于混合开发的模板引擎最近在做一个Apicloud的webApp,使用了Apicloud提供的api....

  • doT.js 模板引擎

    介绍 1.特点是快,小,无依赖其他插件,可适用于webApp2.常用语法 3.在Safari模板引擎渲染速度测试 ...

  • 模板引擎dot.js

    一、基本符号 二、调用方式 三、实例 实例1 for interpolation 赋值 数据源: 区域: 模板: ...

  • doT.js 模板引擎

    doT.js详细使用介绍 使用方法: 调用方式: 例子一: 1、for interpolation 赋值 格式: ...

  • 模板引擎原理

    # 模板引擎 ## 原理 ![模板引擎原理](F:\前端学习资料\模板引擎原理.jpg) ## 使用到的正则表达式...

  • 无标题文章

    # 模板引擎 ## 原理 ![模板引擎原理](F:\前端学习资料\模板引擎原理.jpg) ## 使用到的正则表达式...

  • Thymeleaf 模板引擎的使用

    发问: 模板引擎和前端框架的区别是什么? 解答: 1.JSP、Velocity、Thymeleaf等这是模板引擎,...

网友评论

    本文标题:DoT.js前端模板引擎使用方法

    本文链接:https://www.haomeiwen.com/subject/sygkkxtx.html