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调用XML制作连动下拉列表框
Jun 25 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
js严格模式总结(分享)
Aug 22 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
vue实现路由切换改变title功能
May 28 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
JavaScript流程控制(分支)
Dec 06 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完整的日历类(CLASS)
2006/11/27 PHP
php microtime获取浮点的时间戳
2010/02/21 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
使用URL传输SESSION信息
2015/07/14 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
支付宝小程序tabbar底部导航
2018/11/06 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python实现百度语音识别api
2018/04/10 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
python三引号输出方法
2019/02/27 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
python爬虫要用到的库总结
2020/07/28 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
高分子材料个人求职信范文
2013/09/25 职场文书
保护动物的标语
2014/06/11 职场文书
四年级小学生评语
2014/12/26 职场文书
秋季运动会加油词
2015/07/18 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
PyTorch的Debug指南
2021/05/07 Python
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
python实现简单的三子棋游戏
2022/04/28 Python