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 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
js实现二级导航功能
Mar 03 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
vue的$http的get请求要加上params操作
Nov 12 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
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
python有证书的加密解密实现方法
2014/11/19 Python
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
法律进企业活动方案
2014/03/04 职场文书
詹天佑教学反思
2014/04/30 职场文书
公司聚餐通知
2015/04/22 职场文书
2015年教务工作总结
2015/05/23 职场文书
换届选举主持词
2015/07/03 职场文书
同学会演讲稿
2019/04/02 职场文书
PyTorch的Debug指南
2021/05/07 Python
python实现语音常用度量方法的代码详解
2021/05/25 Python
Java集成swagger文档组件
2021/06/28 Java/Android
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL