repeater控件 php,JavaScript Repeater模板控件

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

一个模板控件规定了它的模板语法和js api，这是一个repeater控件的JS实现:

JavaScript Repeater控件

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

代码	名称	最新价	涨跌额	涨跌幅	开盘	最高	最低	昨收
{$dataRow[1]}	{$dataRow[2]}	{$dataRow[5]}	{$dataRow[17]}	{$dataRow[18]}	{$dataRow[4]}	{$dataRow[6]}	{$dataRow[7]}	{$dataRow[3]}

//View

(function(ns){

function init(){

var container = document.getElementById("crossRate");

container.setAttribute("data-headertemplate", document.getElementById("crossRateHeader").text);

container.setAttribute("data-itemtemplate", document.getElementById("crossRateItem").text);

container.setAttribute("data-footertemplate", document.getElementById("crossRateFooter").text);

}

function render(dt){

var container = document.getElementById("crossRate"),

headerhtml = container.getAttribute("data-headertemplate"),

rowhtml = container.getAttribute("data-itemtemplate"),

footerhtml = container.getAttribute("data-footertemplate");

var repater = new Repater(headerhtml,rowhtml,footerhtml);

var dataRow = [];

for(var i=0,n=dt.length; i

dataRow = dt[i].split(",");

repater.set("dataRow",dataRow);

repater.parse();

}

container.innerHTML = repater.toHTML();

}

ns.crossRate = {

init: init,

render: render,

fill: function(data){

render(data);

}

};

ns.crossRate.init();

}(window));

//异步获取数据渲染数据data

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"];

//填充数据到view

crossRate.fill(datas);

//Repater模板控件 www.2cto.com

function Repater(headerhtml,rowhtml,footerhtml) {

var _this = this;

var n = 0;

_this.cache = [];

_this.dic = {};

_this.header = headerhtml;

_this.row = rowhtml;

_this.footer = '';

if (headerhtml) _this.header = headerhtml;

if (rowhtml) _this.row = rowhtml;

if (footerhtml) _this.footer = footerhtml;

_this.set = function(tag, val) {

this.dic[tag] = val;

};

_this.parse = function(dic) {

var row = this.row,

dic = dic || this.dic,

re = /\{\$(\w+)(?:\[(\d+)\])?(?:\|(\w+))?\}/g,

html;

html = row.replace(re, function(a, b, c, d) {

var val;

if (typeof dic[b] == "undefined"){

return b;

}

if (dic[b].constructor == Array) {

val = dic[b][c];

} else {

val = dic[b];

}

if (Repater[d] || window[d]) {//修饰符

val = (Repater[d] || window[d])(val);

}

return val;

});

_this.cache[n++] = html;

return html;

};

_this.toHTML = function(args) {

var cache = _this.cache,

result;

_this.cache = [];

n = 0;

result = _this.header + cache.join("") + _this.footer;

for (i in args) {

if (args.hasOwnProperty(i)) {

result = result.replace("{$"+i+"}", args[i]);

}

}

return result;

};

}

本文原创发布php中文网，转载请注明出处，感谢您的尊重！