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 parentElement和offsetParent之间的区别
Mar 23 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
vue自定义filters过滤器
Apr 26 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 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
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
Python切片知识解析
2016/03/06 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python小程序实现刷票功能详解
2019/07/17 Python
Python编写打字训练小程序
2019/09/26 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
节水倡议书
2015/01/19 职场文书
综合素质自我评价评语
2015/03/06 职场文书
民政局未婚证明
2015/06/15 职场文书
银行服务理念口号
2015/12/25 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android