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>

 
原文地址:https://www.cnblogs.com/liuqingxia/p/8994609.html