JS 文件传参及处理技巧分析


Posted in Javascript onMay 13, 2010

解决思路:

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.3water.com/js/2011/jscc/
Javascript 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
详解Vue This$Store总结
Dec 17 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
Javascript 面向对象 继承
May 13 #Javascript
Javascript 面向对象 对象(Object)
May 13 #Javascript
Javascript 面向对象 命名空间
May 13 #Javascript
javascript 面向对象 function类
May 13 #Javascript
该如何加载google-analytics(或其他第三方)的JS
May 13 #Javascript
Javascript 面向对象 继承
May 13 #Javascript
Javascript 面向对象 重载
May 13 #Javascript
You might like
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
php while循环得到循环次数
2013/10/26 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
js实现批量删除功能
2020/08/27 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python装饰器初探(推荐)
2016/07/21 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
python自动化办公操作PPT的实现
2021/02/05 Python
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
大学本科生的个人自我评价
2013/12/09 职场文书
物流业务员岗位职责
2014/02/08 职场文书
服务质量承诺书
2014/03/27 职场文书
本科应届生求职信
2014/08/05 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL