移动端开发中模板引擎的选择

移动端开发常常需要创建大量具有相同代码结构，只有其中数据不同的代码，如果使用for循环来不停的判断不停地动态创建dom，这样不仅繁琐而且效率低，较高效的办法是拼接html字符串，然后将整个html字符串解析成dom添加到所需要的位置，然而拼接字符串也是有技术的，并不是用+=来拼接就可以的，这样做反而使效率低下，因为这里涉及到js的高效编程，js中字符串拼接使用=+在拼接次数少的时候效率非常高，但是在次数多，也就是多次循环的时候效率会非常低下。而与之相反的使用数组的push与join或者concat来拼接字符串在拼接数量较少的情况下效率比+=拼接略低，但是在拼接数量多的情况下，明显优于+=拼接，那么这里所说的拼接数量到底是多少呢？说实话没人知道，js的执行时间本来就不一样的，同一个代码第一次测试与第二次测试的事件不可能一样，但是在你使用模板的地方肯定不止一点点的字符串拼接吧，这样考虑，简单点的地方，一个模板其中涉及到5个值，3个判断，每次加载20条数据，那么就是9*20=180次拼接，180次不是一个小数了，况且一般的情况下会只有3个判断？因此使用数组来拼接才是最佳方式，现在流行的模板引擎的核心应该都是使用的数组拼接法来拼接dom元素的，可能在处理方式上有些不同，例如artTemplate所称之为的“预编译”，那些模板都是功能扩展的比较多的了，像artTemplate支持文件与目录组织模板，支持子模板嵌套，支持调试信息输出等等，已经成为一个多元化的模板工具，所以其js文件较为大，而对应的doT.js相对功能就少，只是针对模板创建与渲染，因此大小只有4kb。

　　流行的模板js框架有很多，例如最先jquery中的tmpl,artTemplate,juicer,doT,HandleBars等等，但是受其编译与渲染效率影响在移动端适合使用的却不多，主要有artTemplate,doT这两种，artTemplate渲染速度较快，doT编译速度较快，各有优点，但往往选择artTemplate的比较多，因为artTemplate具有原生语法版，这种语法更容易使开发者接受，同时在一个页面中同一种模板只需要编译一次，后面的都是渲染过程，并不需要在每次都去编译然后渲染，这样artTemplate就具有相当的优势，当然如果你觉得doT较轻量，从而选择他的话，那我也没办法。最近在GitHub看到一个新的模板tppl.js，代码非常少，一共26行代码，但是测试效率却非常高，测试是在手机端多次测试的，能够具有一定的说服性，测试连接：http://yangjiepro.github.io/tppl/test/test.htm 而其并没有专门的模板语法，并不像doT和artTemplate那样有专门的模板语法，例如在dot中{{？}}表示if,{{~}}表示数组循环遍历，这些奇怪的语法，在artTemplate中也存在，当然这样写获取会使得代码比较简单，但是原生js支持这样的语法吗？还不是要在模板引擎中转换成原生js所支持的语法，这就多了一部转换过程。虽然少了点代码，但是增加了引擎工作，因此我自己是不倾向使用模板独特语法的，在使用artTemplate的时候也是使用的是原生语法版。而tppl语法完全是js原生语法，只是在js方法外面包一层[: 以及:]，这与artTemplate中的<%...%>类似，当然如果你不习惯[::]这种，而习惯<%%>，那么也很容易DIY啊，只要把里面的[::]替换成<%%>就好，具体的GitHub地址：https://github.com/yangjiePro/tppl 

github源码：

GitHub - jojoin/tppl: 纳米级 js 模板引擎

　　在此感谢作者的分享，可能看到这么点代码顿时觉得你也能写出来，那么恭喜你，你已经高大上了！

　　具体代码如下：

/************************************************
 ** Copyright (C) 2000-2015 TIZA Inc..
 ** 类    名：模板类js
 ** 作    者：yanxlg
 ** 描    述：
 ** 生成日期：2015/12/1
 ** 修改日志：
 ** 基于GitHub中tppl.js源码修改
 ** 原作者：杨捷
 *************************************************/
;(function ($) {
    /**
     * @param tpl {String}    模板字符串
     * @param data {Object}   模板数据（不传或为null时返回渲染方法）
     *
     * @return  {String}    渲染结果
     * @return  {Function}  渲染方法
     *
     */
    function tppl(tpl, data){
        var fn =  function(d) {
            var i, k = [], v = [];
            for (i in d) {
                k.push(i);
                v.push(d[i]);
            };
            return (new Function(k, fn.$)).apply(d, v);
        };
        if(!fn.$){
            var tpls = tpl.replace(/[\r\n]/g, "").split('<%');
            // log(tpls);
            fn.$ = "var $=''";
            for(var t in tpls){
                var p = tpls[t].split('%>');
                if(t!=0){
                    fn.$ += '='==p[0].charAt(0)
                        ? "+("+p[0].substr(1)+")"
                        : ";"+p[0]+"$=$"
                }
                fn.$ += "+'"+p[p.length-1].replace(/\'/g,"\\'")+"'"
            }
            fn.$ += ";return $;";
            // log(fn.$);
        }
        return data ? fn(data) : fn;
    }
    $.tppl=tppl;
})(Zepto)

使用方法：

　　1、在html中使用script节点创建单独的模板，在该script中与普通html一样的写，只有用到涉及js的时候需要使用<%%>包装，然后使用$.tppl(document.querySelector("#tpl").innerHTML)即可编译成模板，也可以直接在编译的同时渲染$.tppl(document.querySelector("#tpl").innerHTML,{});

<script type="text/html" id="tpl">
    <div class="ub ub-ver">
        <%if(data.length>0){%>
            数量值:<%=data.length%>
        <%}else{%>
            数量值：0
        <%}%>
    </div>
</script>