最近做的一个项目需要大量地使用到js脚本,于是花了点时间阅读了prototype及extjs等流行js库的一些实现。js作为已经应用了多年的面向过程的客户端脚本语言,近两年随着Ajax技术的应用而再度流行起来,并且在代码实现的复杂度提高了许多,因此需要通过模拟服务端语言的一些面向对象特征,使得js代码的编写更有抽象性、灵活性及可维护性。
Map的数据结果对于服务端语言来说是再平常不过,但对于js语言却没有默认的实现。因此我自己尝试写了一个简单Map的实现,尽量模拟了一些面向对象的特征。
代码如下实现:
js 代码 ih-map.js
/*
* ih-map
* Copyright(c) 2006-2007, Islandhill
* yufengsu@gmail.com
*/
// name space
var Ih = {} ;
Ih.Map = Class.create();
// defines the prototype of the Map.
Ih.Map.prototype = {
initialize:function(){
this.m=new Array();
},
put:function(k,v){
var newEntry=new Ih.MapEntry(k,v);
for(var i=0;i<this.m.length;i++){
var entry=this.m[i];
if(entry.keyEquals(k)){
return;
}
}
this.m.push(newEntry);
},
get:function(k){
for(var i=0;i<this.m.length;i++){
var entry=this.m[i];
if(entry.keyEquals(k)){
return entry.value;
}
}
return null;
},
remove:function(k){
var entryPoped;
for(var i=0;i<this.m.length;i++){
entryPoped=this.m.pop();
if(entryPoped.keyEquals(k)){
break;
}else{
this.m.unshift(entryPoped);
}
}
}
,
getSize:function(){
return this.m.length;
},
getKeys:function(){
var keys=new Array();
for(var i=0;i<this.m.length;i++){
keys.push(this.m[i].key);
}
return keys;
},
getValues:function(){
var values=new Array();
for(var i=0;i<this.m.length;i++){
values.push(this.m[i].value);
}
return values;
},
isEmpty:function(){
return (this.m==null||this.m.length<=0);
},
containsKey:function(k){
for(var i=0;i<this.m.length;i++){
if(this.m[i].keyEquals(k))
return true;
}
return false;
},
putAll:function(map){
if(map==null||typeof map!="object"){
throw new Error("the object to be put should be a valid object");
}
for(var i=0;i<map.getSize();i++){
this.put(map.m[i].key,map.m[i].value);
}
}
} ;
// single entry structure in the Map
Ih.MapEntry = function (k,v) {
this.key=k;
this.value=v;
this.keyEquals=function(key2){
if(this.key==key2){
return true;
}else{
return false;
}
}
}
测试代码:simpleMapTest.html ,另外需包含prototype的库
Map的数据结果对于服务端语言来说是再平常不过,但对于js语言却没有默认的实现。因此我自己尝试写了一个简单Map的实现,尽量模拟了一些面向对象的特征。
代码如下实现:
js 代码 ih-map.js
/*
* ih-map
* Copyright(c) 2006-2007, Islandhill
* yufengsu@gmail.com
*/
// name space
var Ih = {} ;
Ih.Map = Class.create();
// defines the prototype of the Map.
Ih.Map.prototype = {
initialize:function(){
this.m=new Array();
},
put:function(k,v){
var newEntry=new Ih.MapEntry(k,v);
for(var i=0;i<this.m.length;i++){
var entry=this.m[i];
if(entry.keyEquals(k)){
return;
}
}
this.m.push(newEntry);
},
get:function(k){
for(var i=0;i<this.m.length;i++){
var entry=this.m[i];
if(entry.keyEquals(k)){
return entry.value;
}
}
return null;
},
remove:function(k){
var entryPoped;
for(var i=0;i<this.m.length;i++){
entryPoped=this.m.pop();
if(entryPoped.keyEquals(k)){
break;
}else{
this.m.unshift(entryPoped);
}
}
}
,
getSize:function(){
return this.m.length;
},
getKeys:function(){
var keys=new Array();
for(var i=0;i<this.m.length;i++){
keys.push(this.m[i].key);
}
return keys;
},
getValues:function(){
var values=new Array();
for(var i=0;i<this.m.length;i++){
values.push(this.m[i].value);
}
return values;
},
isEmpty:function(){
return (this.m==null||this.m.length<=0);
},
containsKey:function(k){
for(var i=0;i<this.m.length;i++){
if(this.m[i].keyEquals(k))
return true;
}
return false;
},
putAll:function(map){
if(map==null||typeof map!="object"){
throw new Error("the object to be put should be a valid object");
}
for(var i=0;i<map.getSize();i++){
this.put(map.m[i].key,map.m[i].value);
}
}
} ;
// single entry structure in the Map
Ih.MapEntry = function (k,v) {
this.key=k;
this.value=v;
this.keyEquals=function(key2){
if(this.key==key2){
return true;
}else{
return false;
}
}
}
测试代码:simpleMapTest.html ,另外需包含prototype的库
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>
< html >
< head >
< title > simpleMapTest.html </ title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
<!-- <link rel="stylesheet" type="text/css" href="./styles.css"> -->
< script type ="text/javascript" src ="js/prototype.js" ></ script >
< script type ="text/javascript" src ="js/ih-map.js" ></ script >
< script type ="text/javascript" >
var map=new Ih.Map();
map.put('name','islandhill');
map.put('gender','male');
map.put('location','xiamen');
//test get size
alert(map.getSize());
//test get
alert(map.get('name')+","+map.get('gender')+","+map.get('location')+","+map.get('notDefined'));
//test remove,containsKey,isEmpty
map.remove('location');
map.remove('notDefined');
alert(map.containsKey('location'));
alert(map.isEmpty());
alert(map.getSize());
//test getKeys, get values is the same stuff
var keys=map.getKeys();
var keysStr="";
for(var i=0;i<keys.length;i++){
keysStr+=keys[i]+" ";
}
alert(keysStr);
//get put all
var map2=new Ih.Map();
map2.put('dept','sdev');
map2.put('position','CTO');
map.putAll(map2);
alert(map.getSize());
alert(map.get('position'));
//test
</ script >
</ head >
< body >
</ body >
</ html >
< html >
< head >
< title > simpleMapTest.html </ title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
<!-- <link rel="stylesheet" type="text/css" href="./styles.css"> -->
< script type ="text/javascript" src ="js/prototype.js" ></ script >
< script type ="text/javascript" src ="js/ih-map.js" ></ script >
< script type ="text/javascript" >
var map=new Ih.Map();
map.put('name','islandhill');
map.put('gender','male');
map.put('location','xiamen');
//test get size
alert(map.getSize());
//test get
alert(map.get('name')+","+map.get('gender')+","+map.get('location')+","+map.get('notDefined'));
//test remove,containsKey,isEmpty
map.remove('location');
map.remove('notDefined');
alert(map.containsKey('location'));
alert(map.isEmpty());
alert(map.getSize());
//test getKeys, get values is the same stuff
var keys=map.getKeys();
var keysStr="";
for(var i=0;i<keys.length;i++){
keysStr+=keys[i]+" ";
}
alert(keysStr);
//get put all
var map2=new Ih.Map();
map2.put('dept','sdev');
map2.put('position','CTO');
map.putAll(map2);
alert(map.getSize());
alert(map.get('position'));
//test
</ script >
</ head >
< body >
</ body >
</ html >