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 相关文章推荐
jQuery中dequeue()方法用法实例
Dec 29 Javascript
JavaScript Date对象详解
Mar 01 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
node.js文件操作系统实例详解
Nov 05 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
PHP开发注意事项总结
2015/02/04 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
基python实现多线程网页爬虫
2015/09/06 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
解决Django no such table: django_session的问题
2020/04/07 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
区域销售经理岗位职责
2015/04/02 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
导游词之杭州西湖
2019/09/19 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL