JavaScript Repeater 模板控件

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

一个模板控件规定了它的模板语法和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模板控件
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>

转载于:https://www.cnblogs.com/rentj1/archive/2012/05/10/2494550.html

JavaScript Repeater 模板控件相关推荐

repeater控件 php,JavaScript Repeater模板控件
功能强大的模板引擎大都需要对模板进行语法解析,会有性能问题.通过把一个大的模板引擎根据不同呈现需求分隔成多个互相独立模板控件,可以降低处理复杂度提供处理性能,可以根据需求灵活组合这些模板控件得到一个可 ...
Asp.Net就业课堂之模板控件
模板控件 ASP.NET 提供了三个控件,使得在 ASP.NET Web 页面中显示数据绝对比传统 ASP 所需的迭代方式简单得多. 这三个控件是 DataGrid.DataList 和 Repeat ...
JavaScript使用ACTIVEX控件引起崩溃问题的解决
JavaScript使用ACTIVEX控件引起崩溃问题的解决问题在本人目前的项目中,前端部分完全使用EXTJS基于"One-Page"理念搭建.除了一个HTML作为基本容器外, ...
Javascript调用OCX控件
什么是ocx控件? 对象链接和嵌入用户控件(OCX)是一种可以由在微软的Windows系统中运行的应用软件创建使用的特殊用途的程序. 想知道究竟的可以看看这个帖子. http://www.tososo ...
javascript调用activex控件
代码 <HTML> <BODY> <object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000&quo ...
JavaScript 操作 COM 控件
目标:用JavaScript 脚本代码调用COM控件,实现基本功能操作: 1.定义及初始化COM控件: 2.调用COM接口: 3.注册COM事件并实现事件调用. 1. 定义及初始化COM控件 ...
通过javascript动态显示界面控件
通过javascript动态显示界面控件作者: zyf0808 发表日期: 2006-03-30 08:47 文章属性: 原创复制链接 <script language="java ...
asp.net模板控件示例
asp.net模板控件示例原文:asp.net模板控件示例模板控件允许将控件数据与其表示形式相分离,模板化控件不提供用户界面. 编写它则是为了实现一个命名容器以及包含属性和方法可由宿主页访问的类, ...
javascript控制页面控件隐藏显示的两种方法
javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位方法一: document.all<"PanelSMS">.styl ...

JavaScript Repeater 模板控件

JavaScript Repeater 模板控件相关推荐

最新文章

热门文章