功能強大的模板引擎大都需要對模板進行語法解析會有性能問題通過把一個大的模板引擎根據不同呈現需求分隔成多個互相獨立模板控件可以降低處理復雜度提供處理性能可以根據需求靈活組合這些模板控件得到一個可以定制的模板功能庫
<!DOCTYPE html> <html> <head> <meta charset="gb" /> <title>JavaScript Repeater控件</title> </head> <body> <div id="crossRate"> <! PlaceHolder {> <table width="" class="tabledata"> <tr> <th>代碼</th> <th>名稱</th> <th>最新價</th> <th>漲跌額</th> <th>漲跌幅</th> <th>開盤</th> <th>最高</th> <th>最低</th> <th>昨收</th> </tr> </table> <! PlaceHolder }> <script type="text/template" id="crossRateHeader"> <table width="" class="tabledata"> <tr> <th>代碼</th> <th>名稱</th> <th>最新價</th> <th>漲跌額</th> <th>漲跌幅</th> <th>開盤</th> <th>最高</th> <th>最低</th> <th>昨收</th> </tr> </script> <script type="text/template" id="crossRateItem"> <tr> <td>{$dataRow[]}</td> <td>{$dataRow[]}</td> <td>{$dataRow[]}</td> <td>{$dataRow[]}</td> <td>{$dataRow[]}</td> <td>{$dataRow[]}</td> <td>{$dataRow[]}</td> <td>{$dataRow[]}</td> <td>{$dataRow[]}</td> </tr> </script> <script type="text/template" id="crossRateFooter"> </table> </script> </div> <script> //View (function(ns){ function init(){ var container = documentgetElementById("crossRate"); containersetAttribute("dataheadertemplate" documentgetElementById("crossRateHeader")text); containersetAttribute("dataitemtemplate" documentgetElementById("crossRateItem")text); containersetAttribute("datafootertemplate" documentgetElementById("crossRateFooter")text); } function render(dt){ var container = documentgetElementById("crossRate") headerhtml = containergetAttribute("dataheadertemplate") rowhtml = containergetAttribute("dataitemtemplate") footerhtml = containergetAttribute("datafootertemplate"); var repater = new Repater(headerhtmlrowhtmlfooterhtml); var dataRow = []; for(var i=n=dtlength; i<n; i++){ dataRow = dt[i]split(""); repaterset("dataRow"dataRow); repaterparse(); } containerinnerHTML = repatertoHTML(); } nscrossRate = { init: init render: render fill: function(data){ render(data); } }; nscrossRateinit(); } (window)); //異步獲取數據渲染數據data var datas = ["USDEURUSDEUR美元歐 元% ::""USDHKDUSDHKD美元港 幣% ::""USDJPYUSDJPY美元日 元% ::""USDCHFUSDCHF美元瑞 郎% ::""GBPUSDGBPUSD英鎊美 元% ::"]; //填充數據到view crossRatefill(datas); //Repater模板控件 function Repater(headerhtmlrowhtmlfooterhtml) { var _this = this; var n = ; _thiscache = []; _thisdic = {}; _thisheader = headerhtml; _thisrow = rowhtml; _thisfooter = </table>; if (headerhtml) _thisheader = headerhtml; if (rowhtml) _thisrow = rowhtml; if (footerhtml) _thisfooter = footerhtml; _thisset = function(tag val) { thisdic[tag] = val; }; _thisparse = function(dic) { var row = thisrow dic = dic || thisdic re = /{$(w+)(?:[(d+)])?(?:|(w+))?}/g html; html = rowreplace(re function(a b c d) { var val; if (typeof dic[b] == "undefined"){ return b; } if (dic[b]constructor == Array) { val = dic[b][c]; } else { val = dic[b]; } if (Repater[d] || window[d]) {//修飾符 val = (Repater[d] || window[d])(val); } return val; }); _thiscache[n++] = html; return html; }; _thistoHTML = function(args) { var cache = _thiscache result; _thiscache = []; n = ; result = _thisheader + cachejoin("") + _thisfooter; for (i in args) { if (argshasOwnProperty(i)) { result = resultreplace("{$"+i+"}" args[i]); } } return result; }; } </script> </body> </html>