位置:IT落伍者 >> javascript >> 浏览文章
功能强大的模板引擎大都需要对模板进行语法解析会有性能问题通过把一个大的模板引擎根据不同呈现需求分隔成多个互相独立模板控件可以降低处理复杂度提供处理性能可以根据需求灵活组合这些模板控件得到一个可以定制的模板功能库
<!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 == "undefined"){ return b; } if (dicconstructor == Array) { val = dic[c]; } else { val = dic; } 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>
上一篇:ExtJs设置GridPanel表格文本垂直居中示例
下一篇:javascript中自定义对象的属性方法分享