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中的107个基础知识收集整理 推荐
Mar 29 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
小程序自定义圆形进度条
Nov 17 Javascript
jQuery实现简单轮播图效果
Dec 27 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实现递归复制整个文件夹的类实例
2015/08/03 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
python 中random模块的常用方法总结
2017/07/08 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
python批量创建指定名称的文件夹
2019/03/21 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
Jar包的作用是什么
2014/03/30 面试题
四年大学生活的个人自我评价
2013/12/11 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis