JavaScript リピーター テンプレート コントロール

功能强大的模板引擎大都需要对模板进行语法解析，会有性能问题。通过把一个大的模板引擎根据不同呈现需求分隔成多个互相独立模板控件，可以降低处理复杂度提供处理性能,可以根据需求灵活组合这些模板控件得到一个可以定制的模板功能库。
一个模板控件规定了它的模板语法和js api，这是一个repeater控件的JS实现:

 

   
   
   
     
     
     
     
     
     
     
     
     
   
   

代码	名称	最新价	涨跌额	涨跌幅	开盘	最高	最低	昨收

   
     
   
   
   

<script><br> <br> <br>//View<br>(function(ns){<br> <br> function init(){<br> varcontainer = document.getElementById("crossRate");<br> container.setAttribute("data-headertemplate", document.getElementById("crossRateHeader").text);<br> container.setAttribute("data-itemtemplate", document.getElementById("crossRateItem").text);<br> container.setAttribute("data-footertemplate", document.getElementById( "crossRateFooter").text);<br> }<br> <br> function render(dt){<br> varcontainer = document.getElementById("crossRate"),<br> headerhtml =container.getAttribute("data-headertemplate"),<br> rowhtml = コンテナ。 getAttribute("data-itemtemplate"),<br> footerhtml =container.getAttribute("data-footertemplate");<br> <br> var repater = new Repater(headerhtml,rowhtml,footerhtml);<br> var dataRow = []; <br> for(var i =0,n=dt.length; i<n; i++){<br> dataRow = dt[i].split(",");<br> repater.set("dataRow",dataRow);<br> repater.parse(); <br> }<br> container.innerHTML = repater.toHTML();<br> }<br> <br> ns.crossRate = {<br> init: init, <br> render: render, <br> fill: { <br> render(data);<br> }<br> } ;<br> ns.crossRate.init();<br>}(window));<br> <br> <br>//异步获取数据渲染データデータ<br>var datas = ["USDEUR0,USDEUR,美元欧元,0.7731,0.7732,0.7723,0.7734,0.77 17 ,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","GBPUSD0,GBPUSD,英镑美元,1.6134,1.6136,1.6138,1.6144,1.6121, 0,20808,0.0000,0,0,1.6134,0.0000,0,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>//充填データツービュー<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] == "未定義"){<br> return b;<br> }<br> if ( dic[b].constructor == 配列) {<br> val = dic[b][c];<br> } else {<br> val = dic[b];<br> }<br> } if (リピーター[d] || ウィンドウ[d]) {//修饰符<br> val = (Repater[d] || window[d])(val);<br> }<br> return val;<br> _this.cache[n++] = ;<br> HTML を返す;<br> } ;<br> <br> _this.toHTML = function(args) {<br> var queue = _this.cache,<br> result;<br> _this.cache = [];<br> n = 0;<br> result = _this.header +キャッシュ.ジョイン("") + _this.footer;<br> for (i in args) {<br> if (args.hasOwnProperty(i)) {<br> result = result.replace("{$"+i+"}", args[i]);<br> } <br> }<br> return result;<br> };<br>}<br> <br></script>