H5 doT.js模板语法记录

1、各种模板引擎性能对比

移动端稍微复杂点的页面肯定是需要用模板的，模板越小越好，当然也得兼顾性能，目前doT.js是一个不错的选择。
各模板性能对比
doT地址
该模板各方面性能都很优秀，缺点在于不好调试，不过只要保证语法正确，一般不会出错

2、语法

• 插值
  {{=it.xxx }}
• 取值
  {{=xxx }}
  插值和取值差不多，取值一般用于for循环中，取值不用加it
• JS运算
  {{...}} 可以放js表达式，如for循环
• 遍历数组
  {{~it.array :value:index}} ...{{~}}
• 遍历对象
  {{ for var key in data { }}
  {{= key }}
  {{ } }}
• 三木运算
  {{=(it.value=='somevalue'?'value1':'value2')}}
  常用于动态添加某个类名
• 条件判断
  {{? }} 表if
  {{??}}表else if
  {{??}}表else
  example:

//template
{{? it.name }}
Oh, I love your name, {{=it.name}}!
{{?? it.age === 0}}
Guess nobody named you yet!
{{??}}
You are {{=it.age}} and still don't have a name?
{{?}}
//data
{"name":"Jake","age":31}

• encoding后再插值
  {{!it.xxx}}
• 编译时取值
  {{# }} for compile-time evaluation/includes and partials
• 编译时定义
  {{## #}} for compile-time defines

3、使用注意

• 双括号中的前缀，如'?',"~","#"等要紧挨左边的双括号，不能有空格，这些前缀后面的表达式与前缀之间有没有空格无所谓；
• 条件判断和数组遍历语法要有对应的结束符，如{{?it.xxx}}{{?}},
  {{~it.array :value:index}}{{~}}

4、使用方式

1. 引入dot.js;
2. render=doT.template(tpl),这一步返回一个函数;
3. domString=render(data),这一步返回dom的string形式;
4. xxx.innerHTML=domString;

5、实例

//实例1：简单语法



    
    


    

    
    
    



//实例2：编译时定义与取值

    

    

    

    

    

    
    

    
        

        

    

    

6、使用注意

• 在使用条件判断时{{?it.value>=number}},其中的大于号会被转义，因此需要自己进行反转义：

function htmlDecode(str) {
    var s = "";
    if (str.length == 0) return "";
    s = str.replace(/&/g, "&");
    s = s.replace(//g, ">");
    s = s.replace(/ /g, " ");
    s = s.replace(/'/g, "\'");
    s = s.replace(/"/g, "\"");
    // s = s.replace(/
/g, "\n");
    return s;
}