博客园  :: 首页  :: 管理

总结两个Javascript的哈稀对象的一些编程技巧

Posted on 2006-12-14 13:31  Go_Rush  阅读(3407)  评论(20编辑  收藏  举报

博客几天没有更新了,主要是项目比较忙,还有女朋友店里生意也特别好,周末我还要去档口卖衣服
哎,真忙,今天决定中午不睡觉了,po文一篇先........

我喜欢从最基础的内容讲起,然后慢慢深入,高手可能要给点耐心啊。
先看一个最简单的应用。在下面的代码中,我们需要实现一个功能,就是点击每个按钮显示相应的网址

<input type="button" value="百度" onclick="javascript:showUrl(this)">
<input type="button" value="Google" onclick="javascript:showUrl(this)">
<input type="button" value="微软" onclick="javascript:showUrl(this)">
<input type="button" value="博客园" onclick="javascript:showUrl(this)">
<input type="button" value="阿舜的博客" onclick="javascript:showUrl(this)">
那么。怎么写这个 showUrl函数呢? 我想大多数人可能会这样写.
<script type="text/javascript">

// by Go_Rush(阿舜)  from http://ashun.cnblogs.com/
function showUrl(element){
    
var url;
    
switch (element.value){
        
case "百度":          url="http://www.baidu.com/"    ;break;
        
case "Google":         url="http://www.google.com/"    ;break;
        
case "微软":          url="http://www.microsoft.com/";break;
        
case "博客园":          url="http://www.cnblogs.com/"    ;break;
        
case "阿舜的博客":  url="http://ashun.cmblogs.com/" ;break;
        
default:             url=""
    }
    alert(url)
}
</script>
这样写不太好,原因有二:
1.写太长,很麻烦,用if, switch 语句来写,如果有100个条件,那岂不要写100个语句
2.不便于维护和扩展,如果需求经常变化,那些数据从数据库来怎么办,每变一下都要改程序的逻辑结构

对JavaScript比较有经验的程序员肯定不会这样写,一般用数组来实现。 可以是二维数组,也可以是双数组

1.双数组方法
<script type="text/javascript">
// by Go_Rush(阿舜)  from http://ashun.cnblogs.com/
var arrText=["百度","Google","微软","博客园","阿舜的博客"];
var arrUrl=["http://www.baidu.com/","http://www.google.com/","http://www.microsoft.com/","http://www.cnblogs.com/","http://ashun.cmblogs.com/"]

function showUrl(element){    //用双数组方法
    var value=element.value;
    
for(var i=0;i<arrText.length;i++){
        
if (arrText[i]===value) return alert(arrUrl[i])
    }
}
</script>

2. 二维数组方法
<script type="text/javascript">
// by Go_Rush(阿舜)  from http://ashun.cnblogs.com/
var arr=[
    [
"百度"            ,"http://www.baidu.com/"],
    [
"Google"        ,"http://www.google.com/"],
    [
"微软"            ,"http://www.microsoft.com/"],
    [
"博客园"        ,"http://www.cnblogs.com/"],
    [
"阿舜的博客"    ,"http://ashun.cmblogs.com/"]
];

function showUrl(element){    //用二维数组方法
    var value=element.value;
    
for(var i=0;i<arr.length;i++){
        
if (arr[i][0]===value) return alert(arr[i][1])
    }
}
</script>

以上两种方法借用数组作为数据结构,实现了程序要求的功能,而且为以后的扩展,变动做好了充分的准备
但是,效率呢? 每次都要遍历数组,每次都要判断。。。。

下面,我来介绍一种不用数组,不用循环遍历,也不要判断比较的方法。
先来一段:
<script type="text/javascript">
// by Go_Rush(阿舜)  from http://ashun.cnblogs.com/
var hash={
    
"百度"            :"http://www.baidu.com/",
    
"Google"        :"http://www.google.com/",
    
"微软"            :"http://www.microsoft.com/",
    
"博客园"        :"http://www.cnblogs.com/",
    
"阿舜的博客"    :"http://ashun.cmblogs.com/"
};

function showUrl(element){    //使用哈稀对象
    alert(hash[element.value])
}
</script>


看到没有,以前要用循环的,要用判断的函数,现在只要一行代码就OK了,而且扩展性还是最好的。

如果您对JavaScript比较熟悉,您一定会对数组情有独钟,因为它确实是一种非常方便,应用非常广泛的
数据结构,但是对于哈稀对象这个青苹果,哪怕您只啃过它一口,你一定永远不会忘记它的甜美。
他作为一种数据结构,在许多场合可以简化编程,在海量数据面前,他的性能要远远高于数组。(这个在
我日后的po文里面会提到的,请关注
)
他作为一种对象,可以在JavaScript实现类,模拟面向对象编程。

 以上讲得非常简单,仅作为抛砖引入,大家有兴趣的可以在回复里面谈谈自己的应用心得啊。

临走之前再讲个例子----判断上传的文件是否为图像文件.

<script type="text/javascript">
// by Go_Rush(阿舜)  from http://ashun.cnblogs.com/

//获取扩展名
function getExtName(url){
    
if (!/\./.test(url)) return "";
    
var arr=url.split(".");
    
return arr[arr.length-1].toLowerCase();
}

/*********方法1*******/

function isImageFile1(url){
    
var ext=getExtName(url)
    
return ext=="jpg" || ext=="bmp" ||ext=="gif" || ext=="png" || ext=="jpeg"
}


/*********方法2********/
function set(){
    
for(var i=0,hash={};i<arguments.length;i++) hash[arguments[i]]=1
    
return hash
}

function isImageFile2(url){
    
return  getExtName(url) in set("jpg","gif","pnp","jpeg","bmp")    
}
/*********方法2********/

var url="go_rush.gif"
alert(isImageFile1(url))
alert(isImageFile2(url))
</script>

请注意那个set函数,当我们实现这个函数后,就可以像python一样使用集合对象了,是不是很方便呢