doT.js-doT模板方便快捷的组织页面DOM

重来没有想过，作为一个坐吃等死的前端也会有学习引擎模板的一天

都是被现实所逼呀.学习优秀代码时，一句一句翻译。忽然看到{{   }}这个包裹的代码。糟心了！看不懂，咋办？学呀！！！！！！

这是我开始学习的第一个引擎模板！！！鼓掌

doT.js

插件描述：doT模板方便快捷的组织页面DOM

doT.js特点是快，小，无依赖其他插件

当然了，网上有很多同僚都有介绍这个模板的，基本全部一样。所以我也不会有所改动（照搬）

 

1.基本使用套路百度翻译：（真心的，这个百度翻译后的中文我自己都不明白）

{{    }}for evaluation（百度翻译：为了评价）

{{=    }}for interpolation（百度翻译：插值法）   //理解为：赋值

{{~    }}for array iteration（百度翻译：数组代）

{{?     }}for conditionals（百度翻译：条件句）

{{！   }}for interpolation with encoding（百度翻译：用编码进行插值）

{{#    }}for compile-time evaluation/includes and partials（百度翻译：编译时的评估/包含和部分）

{{##  #}}for compile-time defines（百度翻译：编译时间定义）

 

2.举例

首先是要引用插件的

 

<script type="text/javascript" src="jquery-1.11.3.js" ></script>
<script type="text/javascript" src="doT.js" ></script>

 

 

1）.for interpolation 赋值

格式：

{{=    }}

 

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

 

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

 

<script>

     var dataInter1 = {
           "name": "Jake",
           "age": 31
     };
      var interText1 = doT.template($("#interpolationtmpl1").text());
       $("#interpolation").html(interText1(dataInter1));
</script>