JavaScriptRepeater模板控件
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScriptRepeater模板控件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5124字，纯文字阅读大概需要8分钟。
内容图文
功能强大的模板引擎大都需要对模板进行语法解析，会有性能问题。通过把一个大的模板引擎根据不同呈现需求分隔成多个互相独立模板控件，可以降低处理复杂度提供处理性能,可以根据需求灵活组合这些模板控件得到一个可以定制的模板功能库。一个模板控件规定了它的模板语法和js api，这是一个repeater控件的JS实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>JavaScript Repeater控件</title>
</head>
<body>
<div id="crossRate">
<!-- PlaceHolder {-->
<table width="815" class="table-data">
<tr>
<th>代码</th>
<th>名称</th>
<th>最新价</th>
<th>涨跌额</th>
<th>涨跌幅</th>
<th>开盘</th>
<th>最高</th>
<th>最低</th>
<th>昨收</th>
</tr>
</table>
<!-- PlaceHolder }-->
<script type="text/template" id="crossRateHeader">
<table width="815" class="table-data">
<tr>
<th>代码</th>
<th>名称</th>
<th>最新价</th>
<th>涨跌额</th>
<th>涨跌幅</th>
<th>开盘</th>
<th>最高</th>
<th>最低</th>
<th>昨收</th>
</tr>
</script>
<script type="text/template" id="crossRateItem">
<tr>
<td>{$dataRow[1]}</td>
<td>{$dataRow[2]}</td>
<td>{$dataRow[5]}</td>
<td>{$dataRow[17]}</td>
<td>{$dataRow[18]}</td>
<td>{$dataRow[4]}</td>
<td>{$dataRow[6]}</td>
<td>{$dataRow[7]}</td>
<td>{$dataRow[3]}</td>
</tr>
</script>
<script type="text/template" id="crossRateFooter">
</table>
</script>
</div>
<script>
//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<n; 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 = '</table>';
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;
};
}
</script>
</body>
</html>
内容总结
以上是互联网集市为您收集整理的JavaScriptRepeater模板控件全部内容，希望文章能够帮你解决JavaScriptRepeater模板控件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。