Javascript版的Repeater控件实现

其实有点标题党了,呵呵,主要是项目的特殊性,出于性能考虑项目经理规定不能用任何服务端控件(包括Repeater控件),同时尽量减少服务端处理,并尽可能压缩最终生成的html源代码,所以只用JS实现。

代码:

<html>
<head>
 <title>JavaScript的Repeater控件实现--made by 菩提树下的杨过</title>

 <script type="text/javascript">
 /*
        hashTable的javascript实现
 */
 function hashTable() {

 this.__hash = {};


 //添加key-value键值对
 this.add = function(key, value) {
 if (typeof (key) != "undefined") {
 //if it not contains in hashtable 
 if (!this.contains(key)) {
 this.__hash[key] = typeof (value) == "undefined" ? null : value;
 return true;
                    }
 else {
 return false;
                    }
                }
            };

 //删除key-value键值对
 this.remove = function(key) {
 delete this.__hash[key];
            };

 this.count = function() {
 var i = 0;
 for (var obj in this.__hash) {
                    i++;
                }
 return i;
            };

 //取得指定键值
 this.items = function(key) {
 return this.__hash[key];
            };


 //检查是否包含指定键
 this.contains = function(key) {
 return typeof (this.__hash[key]) != "undefined";
            };

 //清空哈希表
 this.clear = function() {
 for (var obj in this.__hash) {
 delete this.__hash[k];
                }
            };
        }


 //替换字符串函数(strReplace中如果有正则表达式的特殊字符串,可能会出错)
 function replace(strSource, strReplace, strDestination) {
 var reg = new RegExp(strReplace, "g");
 return strSource.replace(reg, strDestination);
        }

 /*测试replace函数
        var s = "a1{0}2{0}3";
        s = replace(s,"\\{0\\}","***");
        alert(s);
 */ 
 
 </script>

</head>
<body>
 <div id="Repleater1">
 </div>

 <script type="text/javascript">
 //模板替换开始
 var _sData = "1,2,3|a,b,c|x,y,z"; //实际数据字符串(服务端输出)
 var _arrData = _sData.split("|"); //数据数组
 var _template = "<div>{1}--{2}--{3}--{2}</div>"; //数据行模板
 var _fields = ['1', '2', '3']; //模板中包含的标识数组

 var _html = "";

 for (var i = 0; i < _arrData.length; i++) {
 var _htmlRows = _template; //初始行默认为行模板
 var _arrTemp = _arrData[i].split(",");
 var _hash = new hashTable();
 //将模板标识与实际数据,变成key-value键值对
 for (var j = 0; j < _fields.length; j++) {
                _hash.add(_fields[j], _arrTemp[j]);
                _htmlRows = replace(_htmlRows, "\\{" + _fields[j] + "\\}", _hash.items(_fields[j]))//根据模板标识替换为实际数据
            }

            _html += _htmlRows;
        }

        document.getElementById("Repleater1").innerHTML = _html;
 </script>
</body>
</html>

欢迎转载 ,但请注明来自菩提树下的杨过

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

做网站-如何将设计稿还原为网页

做网站开发的伙伴应该很清楚,一个网站从设计到开发完成,经过的步骤,除了需求功能这些不说以外,其余的就是展现给用户的视觉上的效果了。一般由美工或者说设计师设计出页...

333100
来自专栏企鹅号快讯

欲练JS,必先攻CSS——前端修行之路

来源:子慕大诗人 http://www.cnblogs.com/1wen/p/6839779.html 今天我讲的主题是css,具体聊一下我大概的css学习历史...

339100
来自专栏葡萄城控件技术团队

前端代码标准最佳实践:javascript篇

前言 最近一直重构项目的前端代码,也参考了各种前端代码的最佳实践,目的是让前端的HTML,CSS,JavaScript代码更符合标准,有更好的性能,更好的可维护...

26850
来自专栏葡萄城控件技术团队

哪些JavaScript IDE最好用?

阅读本文之前,分享大家一张图片,看图会发现JavaScript开发需求最高,占比达到42.84%,因此掌握JavaScript语言好工作就不愁啦,工欲善其事必先...

35350
来自专栏葡萄城控件技术团队

超越Web,Javascript在物联网的应用

引子 Patrick Catanzariti 是一名Web开发工程师,最近他在 sitepoint 发表了《JavaScript Beyond the Web ...

50560
来自专栏编程

14个你可能不知道的JavaScript调试技巧

问题:我怎么才能收到你们公众号平台的推送文章呢? ? 熟悉工具可以让工具在工作中发挥出更大的作用。尽管江湖传言 JavaScript 很难调试,但如果你掌握了几...

21790
来自专栏代码小睿

一句命令快速合并 JS、CSS

  在项目开发环境下,我们会把 JS 代码尽可能模块化,方便管理和修改,这就避免不了会出现一个项目自身 JS 文件数量达到 10 个或者更多。   而项目上线后...

84490
来自专栏葡萄城控件技术团队

JavaScript 常用功能总结

小编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的JS 对象,基本数据结构,功能函数等,还有一些常用的设计模...

237100
来自专栏编程

Java基础知识之Scanner类和String类学习,讲明白了,适合初学者

1、Scanner 的概述和方法介绍 A:Scanner 的概述 B:Scanner 的构造方法原理 Scanner(InputStream source) S...

21660
来自专栏葡萄城控件技术团队

Mobile First! Wijmo 5 之 架构

本文就开发者关心的话题之一架构,展开叙述。 ? Wijmo 5是一组JavaScript控件,但是不要与Widgets混淆。在此前开发Wijmo的时候,我们能够...

274100

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励