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文件 document.createElement
Oct 14 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
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_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
php cli配置文件问题分析
2015/10/15 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
简单的自定义php模板引擎
2016/08/26 PHP
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
Python网页解析器使用实例详解
2020/05/30 Python
浅析Python迭代器的高级用法
2020/07/16 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
2014年度党员自我评议
2014/09/13 职场文书
防汛通知
2015/04/25 职场文书
博物馆观后感
2015/06/05 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书