移動端開發中模板引擎的選擇

　　移動端開發經常須要建立大量具備相同代碼結構，只有其中數據不一樣的代碼，若是使用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 

　　在此感謝做者的分享，可能看到這麼點代碼頓時以爲你也能寫出來，那麼恭喜你，你已經高大上了！

　　具體代碼以下：

/************************************************
 ** 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)

使用方法：

　　一、在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>