移動端開發常常需要創建大量具有相同代碼結構，只有其中數據不同的代碼，如果使用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)
使用方法：
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>