快捷導(dǎo)航

JS 文件傳參及處理技巧分析

更新時(shí)間：2010年05月13日 17:32:53 作者：

其實(shí)為js文件傳參是很久就接觸過(guò)的一個(gè)問(wèn)題，只是一直沒(méi)有放在心上，今天在無(wú)憂看到又有人問(wèn)這個(gè)問(wèn)題，今日總結(jié)一下。

解決思路：

1、首先獲取到當(dāng)前JS文件的SRC屬性，這里有一個(gè)小技巧：我們只需要獲取當(dāng)前頁(yè)面最后一個(gè)script標(biāo)記內(nèi)容即可。
為什么？？因?yàn)镴S是順序解析的，當(dāng)前JS腳本解析時(shí)后面的js都還沒(méi)有解析到，當(dāng)然就認(rèn)為自己就是最后一個(gè)script了。此外，這樣獲取還有一個(gè)好處：我們可以多次引用同一個(gè)文件且傳入不同的參數(shù)，這樣可以在js文件中根據(jù)參數(shù)不同做不同處理，很巧妙把！簡(jiǎn)直就是動(dòng)態(tài)語(yǔ)言了。
代碼如下：

復(fù)制代碼代碼如下:

 
var scripts=document.getElementsByTagName("script"); 
var curJS=scripts[scripts.length-1]; //curJS就是我們當(dāng)前的js文件 

得到這個(gè)就好辦了，通過(guò)curJS.src即可獲取到完整的路徑內(nèi)容（包括參數(shù)）。

2、下面的就是解析參數(shù)內(nèi)容了，解析的過(guò)程相當(dāng)簡(jiǎn)單，相信很多人都容易完成這一步。
但我們要對(duì)一個(gè)特殊情況進(jìn)行處理：如果一個(gè)參數(shù)被傳入了多次，則要將該參數(shù)值轉(zhuǎn)換為數(shù)組存儲(chǔ)每一個(gè)傳入的值。

完整測(cè)試腳本如下：

復(fù)制代碼代碼如下:

 
var getArgs=(function(){ 
var sc=document.getElementsByTagName('script'); 
var paramsArr=sc[sc.length-1].src.split('?')[1].split('&'); 
var args={},argsStr=[],param,t,name,value; 
for(var i=0,len=paramsArr.length;i<len;i++){ 
param=paramsArr[i].split('='); 
name=param[0],value=param[1]; 
if(typeof args[name]=="undefined"){ //參數(shù)尚不存在 
args[name]=value; 
}else if(typeof args[name]=="string"){ //參數(shù)已經(jīng)存在則保存為數(shù)組 
args[name]=[args[name]] 
args[name].push(value); 
}else{ //已經(jīng)是數(shù)組的 
args[name].push(value); 
} 
} 
/*在實(shí)際應(yīng)用中下面的showArg和args.toString可以刪掉，這里只是為了測(cè)試函數(shù)getArgs返回的內(nèi)容*/ 
var showArg=function(x){ //轉(zhuǎn)換不同數(shù)據(jù)的顯示方式 
if(typeof(x)=="string"&&!/\d+/.test(x)) return "'"+x+"'"; //字符串 
if(x instanceof Array) return "["+x+"]" //數(shù)組 
return x; //數(shù)字 
} 
//組裝成json格式 
args.toString=function(){ 
for(var i in args) argsStr.push(i+':'+showArg(args[i])); 
return '{'+argsStr.join(',')+'}'; 
} 
return function(){return args;} //以json格式返回獲取的所有參數(shù) 
})(); 

alert(getArgs()); 
alert("username:"+getArgs()["username"]); 

測(cè)試示例的HTML源碼：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> new document </title> 
<meta name="generator" content="editplus" /> 
<meta name="author" content="" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<script type="text/javascript" src="test.js?id=4&username=yemoo&id=1&uid=110"></script> 
<script type="text/javascript" src="test.js?id=5&username=ajaxbbs&id=7&uid=253"></script> 
<script type="text/javascript" src="test.js?id=6&username=jack&id=8&uid=258"></script> 
</head> 
<body> 
</body> 
</html> 