JavaScript 반복기 템플릿 컨트롤

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

 

   
   
   
     
     
     
     
     
     
     
     
     
   
   

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

   
     
   
   
   

<script><br> <br> <br>//보기<br>(function(ns){<br> <br>    function init(){<br>        var 컨테이너 = 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>        var 컨테이너 = document.getElementById("crossRate"),<br>            headerhtml = 컨테이너.getAttribute("data-headertemplate"),<br>           rowhtml = 컨테이너.getAttribute("data-itemtemplate"),<br>            footerhtml = 컨테이너. 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>        컨테이너.innerHTML = repater.toHTML();<br>    }<br>     <br>    ns.crossRate = {<br>        init: init, <br>        렌더링: 렌더링,<br>        채우기 : 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","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>//填充数据到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 = 함수(태그, 발) {<br>        this.dic[태그] = 발;<br>    };<br> <br>    _this.parse = 함수(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 (dic[b] 유형 == "정의되지 않음"){<br> return b;<br>            }<br>            if (dic[b].constructor == Array) {<br>              val = dic[b][c];<br>           } else {                발 = dic[b ];<br>            }<br>            if (Repater[d] || window[d]) {//修饰符<br>               val = (Repater[d] || window[d])(val);<br>            }<br>            return val;<br>        });<br>        _this.cache[n++] = html;<br>        return html;<br>    };<br> <br>   _this.toHTML = 함수(인수 ) {<br>        var 캐시 = _this.cache,<br>            result;<br>        _this.cache = [];<br>        n = 0;<br>        result = _this.header +ache.join("") + _this.footer;<br>        for (i in args) {<br>            if (args.hasOwnProperty(i)) {<br>               result = result.replace("{$"+i+"}", args[i ]);<br>            }<br>        }<br>        결과 반환;<br>    };<br>}<br> <br></script>

< /html>