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 相关文章推荐
使用JavaScript库还是自己写代码?
Jan 28 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 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关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
PHP7 弃用功能
2021/03/09 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
python解析xml简单示例
2019/06/21 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
ECHT官方网站:男女健身服
2020/02/14 全球购物
学前班教师的自我鉴定
2013/12/05 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
党员公开承诺书2015
2015/01/21 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技