最近做的一个项目需要大量地使用到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的库
<!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>
发表于 @ 2007年09月19日 15:46:00|评论(loading...)