JavaScript Repeater模板控件

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

 

   
   
   
     
     
     
     
     
     
     
     
     
   
   

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

   
     
   
   
   

<script><br/> <br/> <br/>//View<br/>(function(ns){<br/> <br/>    function init(){<br/>    container.setAttribute("data-headertemplate", document .getElementById("crossRateHeader").text);<br/>       container.setAttribute("data-itemtemplate", document.getElementById("crossRateItem .); ById( " crossRateFooter").text);<br/>    }<br/>     <br/>    function render(dt){<br/>        headerhtml = container.getAttribute("data-headertemplate"),<br/>            rowhtml = Container 。屬性("data-itemtemplate"),<br/>            footerhtml = container.getAttribute("data-footertemplate");<br/>  rowhtml,footerhtml);<br/>        var dataRow = [];<br/>        for(var i = 0,n=dt.length; i<n; i++){<br/>           dataRow = dt[i].split(",");<br/>         repater.parse(); }<br/>        container.innerHTML = repater.toHTML();<br/>    }<br/>     <br/>      render: render, <br/>        函數(data: ){ <br/>           ns.crossRate.init();<br/>}(window));<br/> <br/> <br/>//非同步取得資料渲染資料data<br/>var datas = ["USDEUR0,USDEUR,美元歐元,0.7731,0.7732,0.7723,0723,0732,0.723,0732,0.743,0732,0.723,0732,0.723,0732,0.723,0732,0.723,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-13: 4013: 53,3","USDHKD0,USDHKD,美元港幣,7.7625,7.7633,7.7621,7.7634,7.7617,0,14208,0.0000,0,0,7.7625,0.00. 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.77,79.62,79.77,79. 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"," 美元瑞郎0, 美元瑞郎, 美元瑞郎,0.9285,0.9287,0.9276,0.9289,0.9266,0,29637,0.0000,0,0,0.9285,0,29637,0.0000,0,0,0.9285,0.000,00, -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,"GBPUSD0,GBPUSD,英鎊美元,1.6134,1.6136,1.4136,1. ,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. 50:04 ,3"];<br/> <br/>//填入資料到view<br/>crossRate.fill(datas);<br/> <br/> <br/>//Repater範本_this = this ;<br/>    var n = 0;<br/>    _this.cache = [];<br/>    _this.dic = {};<br/>    '; <br/>    if (headerhtml) _this.header = headerhtml;<br/>    if (rowhtml) _this.row = rowhtml;<br/>    if (footerhtml) _this.footer = yhtml;    this.dic[ tag] = val;<br/>    };<br/> <br/>    _this.parse = function(dic) {<br/>         this.dic,<br/>                re = /{$(w+)(?:[(d+)])?(?:|(w+))?}/g,<br/>html;<br/>        html = row.replace(re, function(a, b, c, d) {<br/>            var <br/>                return b;<br/>            }🎠           }🎠   dic[b].constructor == Array) {<br/>                val = dic[b][c];<br/>        val = dic[b];<br/>            }<br/>          }<br/>           }<br/>    ]) {//修飾符<br/>                val = (Repater[d] || window[d])(val);<br/>    <br/>        });<br/>        _this.cache[n++] = html; <br/>        返回html; <br/>    } ;<br/> <br/>    _this.toHTML = function(args) {<br/>        var cache = _this.cache, this.cache = [];<br/>        n = 0;<br/>        result = _this.header + 快取。加入（「」） + _this.footer;<br/>        for (i in args) {<br/>             replace("{$"+i+"}", args[i] );<br/>            } <br/> }<br/>        回傳結果;<br/>    };<br/>}<br/></<br/></<br/></<br/> <br/></script>