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 相关文章推荐
jquery+javascript编写国籍控件
Feb 12 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 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
CodeIgniter模板引擎使用实例
2014/07/15 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
深入解析Python编程中JSON模块的使用
2015/10/15 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
大学本科毕业生求职信范文
2013/12/18 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
高中同学会活动方案
2014/08/14 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
水知道答案观后感
2015/06/08 职场文书
开业庆典致辞
2015/08/01 职场文书
导游词之井冈山
2019/11/20 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL