DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS 文件傳參及處理技巧分析
JS 文件傳參及處理技巧分析
編輯:關於JavaScript     
解決思路:

1、首先獲取到當前JS文件的SRC屬性,這裡有一個小技巧:我們只需要獲取當前頁面最後一個script標記內容即可。
為什麼??因為JS是順序解析的,當前JS腳本解析時後面的js都還沒有解析到,當然就認為自己就是最後一個script了。此外,這樣獲取還有一個好處:我們可以多次引用同一個文件且傳入不同的參數,這樣可以在js文件中根據參數不同做不同處理,很巧妙把!簡直就是動態語言了。
代碼如下:
復制代碼 代碼如下:
var scripts=document.getElementsByTagName("script");
var curJS=scripts[scripts.length-1]; //curJS就是我們當前的js文件

得到這個就好辦了,通過curJS.src即可獲取到完整的路徑內容(包括參數)。

2、下面的就是解析參數內容了,解析的過程相當簡單,相信很多人都容易完成這一步。
但我們要對一個特殊情況進行處理:如果一個參數被傳入了多次,則要將該參數值轉換為數組存儲每一個傳入的值。

完整測試腳本如下:

復制代碼 代碼如下:
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"){ //參數尚不存在
args[name]=value;
}else if(typeof args[name]=="string"){ //參數已經存在則保存為數組
args[name]=[args[name]]
args[name].push(value);
}else{ //已經是數組的
args[name].push(value);
}
}
/*在實際應用中下面的showArg和args.toString可以刪掉,這裡只是為了測試函數getArgs返回的內容*/
var showArg=function(x){ //轉換不同數據的顯示方式
if(typeof(x)=="string"&&!/\d+/.test(x)) return "'"+x+"'"; //字符串
if(x instanceof Array) return "["+x+"]" //數組
return x; //數字
}
//組裝成json格式
args.toString=function(){
for(var i in args) argsStr.push(i+':'+showArg(args[i]));
return '{'+argsStr.join(',')+'}';
}
return function(){return args;} //以json格式返回獲取的所有參數
})();

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


測試示例的HTML源碼:
復制代碼 代碼如下:
<!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>

演示代碼 http://demo.jb51.net/js/2011/jscc/
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved