功能强大的模板引擎大都需要对模板进行语法解析,会有性能问题。通过把一个大的模板引擎根据不同呈现需求分隔成多个互相独立模板控件,可以降低处理复杂度提供处理性能,可以根据需求灵活组合这些模板控件得到一个可以定制的模板功能库。一个模板控件规定了它的模板语法和js api,这是一个repeater控件的JS实现: JavaScript Repeater控件 代码 名称 最新价 涨跌额 涨跌幅 开盘 最高 最低 昨收 <br> <table width="815" class="table-data"><br> <tr><br> <th>代码</th><br> <th>名称</th><br> <th>最新价</th><br> <th>涨跌额</th><br> <th>涨跌幅</th><br> <th>开盘</th><br> <th>最高</th><br> <th>最低</th><br> <th>昨收</th><br> </tr><br> <br> <tr><br> <td>{$dataRow[1]}</td><br> <td>{$dataRow[2]}</td><br> <td>{$dataRow[5]}</td><br> <td>{$dataRow[17]}</td><br> <td>{$dataRow[18]}</td><br> <td>{$dataRow[4]}</td><br> <td>{$dataRow[6]}</td><br> <td>{$dataRow[7]}</td><br> <td>{$dataRow[3]}</td><br> </tr><br> <br> </table><br> <br> <br> <br>//View<br>(function(ns){<br> <br> function init(){<br> var container = document.getElementById( "crossRate");<br> container.setAttribute("data-headertemplate", document.getElementById("crossRateHeader").text);<br> container.setAttribute("data-itemtemplate", document.getElementById("crossRateItem" ) .text); container = document.getElementById("crossRate"),<br> headerhtml = container.getAttribute("data-headertemplate"),<br> rowhtml = container.getAttribute("data-itemtemplate"),<br> footerhtml = Container. getAttribute("data-footertemplate");<br> .length; i<n; i++){<br> dataRow = dt[i].split(",");<br> repater.set("dataRow",dataRow);<br> repater.parse(); <br> }<br> container.innerHTML = repater.toHTML();<br> 🎜> ausfüllen : function(data){ <br> render(data);<br> }<br> };<br> ns.crossRate.init();<br>}(window));<br> <br> <br>//异步获取数据渲染数据data<br>var datas =. ["USDEUR0,USDEUR,美元欧元,0.7731,0.7732,0.7723,0.7734,0.7717,0,22913,0.0000,0 ,0,0.7731,0.0000,0 ,0,-0.0008,-0.10%,0.0000,1,3848,0,-1,1,0.0000,0.0000,2012-05-10 13:49:53,3","USDHKD0,USDHKD,美元港币,7.7625 ,7.7633,7.7621,7.7634,7.7617,0,14208,0.0000,0,0,7.7625,0.0000,0,0,-0.0004,-0.01%,0.0000,2,2062,0,-1,0,0.0000,0.0000 ,2012-05-10 13:49:49,3","USDJPY0,USDJPY,美元日元,79.71,79.73,79.62,79.77,79.57,0,25489,0.00,0,0,79.71,0.00,0, 0,-0.09,-0.11%,0.00,1,4307,0,-1,-1,0.00,0.00,2012-05-10 13:50:13,3","USDCHF0,USDCHF,美元瑞郎, 0.9285,0.9287,0.9276,0.9289,0.9266,0,29637,0.0000,0,0,0.9285,0.0000,0,0,-0.0009,-0.10%,0.0000,1,4960,0,-1,1,0.0000, 0,0000,2012-05-10 13:50:02,3, 0,0.0004,0.02%,0.0000,2,5381,0,-1,0,0.0000,0.0000,2012-05-10 13:50:04,3"];<br> <br>//填充数据到view<br>crossRate.fill(datas);<br> <br> <br>//Repater模板控件 www.2cto.com<br>function Repater(headerhtml,rowhtml,footerhtml) {<br> var _this = this ;<br> var n = 0;<br> _this.cache = [];<br> _this.dic = {};<br> _this.header = headerhtml;<br> _this.row = rowhtml;<br> _this.footer = '</table>';<br> if (headerhtml) _this.header = headerhtml;<br> if (rowhtml) _this.row = rowhtml;<br> if (footerhtml) _this.footer = footerhtml ;<br> _this.set = function(tag, val) {<br> this.dic[tag] = val;<br> };<br> <br> _this.parse = function(dic) {<br> var row = this.row,<br> dic = dic || this.dic,<br> re = /{$(w+)(?:[(d+)])?(?:|(w+))?}/g,<br> html;<br> html = row.replace(re, function(a, b, c, d) {<br> var val;<br> if (typeof dic[b] == "undefiniert"){<br> return b;<br> val = dic[b ];<br> }<br> if (Repater[d] || window[d]) {//修饰符<br> val = (Repater[d] || window[d])(val);<br> _this.toHTML = function(args ): + _this.footer;<br> for (i in args) {<br> if (args.hasOwnProperty(i)) {<br> result = result.replace("{$"+i+"}", args[i ]);<br> }<br> /html><br> <br><br><br><br></p>