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 }}
<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 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、使用方式

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

5、实例

//实例1：简单语法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test doT.js</title>
</head>
<body>
    <div id="content"></div>
    <template id="tmpl">
        {{ for(var prop in it) { }}
            <div>{{=prop}}</div>
        {{ } }}
    </template>
    <script src='doT.js'></script>
    <script>
        var data={"name":"Jake","age":31,"mother":"Kate","father":"John","interests":["basketball","hockey","photography"],"contact":{"email":"jake@xyz.com","phone":"999999999"}};
        var tmpl=document.getElementById('tmpl');
        var rendered=doT.template(tmpl.innerHTML)(data);
        var content=document.getElementById('content');
        content.innerHTML=rendered;
    </script>
</body>
</html>

//实例2：编译时定义与取值
<html>
    <head>

    <script id="headertmpl" type="text/x-dot-template">
        <h1>{{=it.title}}</h1>
    </script>

    <script id="pagetmpl" type="text/x-dot-template">
        <h2>Here is the page using a header template</h2>
        {{#def.header}}
        {{=it.name}}
    </script>

    <script id="customizableheadertmpl" type="text/x-dot-template">
         {{#def.header}}
         {{#def.mycustominjectionintoheader || ''}}
     </script>

    <script id="pagetmplwithcustomizableheader" type="text/x-dot-template">
        <h2>Here is the page with customized header template</h2>
        {{##def.mycustominjectionintoheader:
            <div>{{=it.title}} is not {{=it.name}}</div>
        #}}
        {{#def.customheader}}
        {{=it.name}}
    </script>

    <script src="./doT.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="content"></div>
        <div id="contentcustom"></div>
    </body>

    <script type="text/javascript">
        var def = {
            header: document.getElementById('headertmpl').text,
            customheader: document.getElementById('customizableheadertmpl').text
        };
        var data = {
            title: "My title",
            name: "My name"
        };

        var pagefn = doT.template(document.getElementById('pagetmpl').text, undefined, def);
        document.getElementById('content').innerHTML = pagefn(data);

        pagefn = doT.template(document.getElementById('pagetmplwithcustomizableheader').text, undefined, def);
        document.getElementById('contentcustom').innerHTML = pagefn(data);

    </script>

</html>

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, "\"");
    // s = s.replace(/<br>/g, "\n");
    return s;
}