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 相关文章推荐
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
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
基于mysql的bbs设计(四)
2006/10/09 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
python 弧度与角度互转实例
2020/04/15 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
python 动态绘制爱心的示例
2020/09/27 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
Linux的文件类型
2016/07/05 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
中学生在校期间的自我评价分享
2013/11/13 职场文书
学生安全责任书模板
2014/07/25 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
高二化学教学反思
2016/02/22 职场文书