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 函数式编程的原理
Oct 16 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
javascript模块化简单解析
Apr 07 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
php之CodeIgniter学习笔记
2013/06/17 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Python语言进阶知识点总结
2019/05/28 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
市场营销专业个人自荐信格式
2013/09/21 职场文书
九年级英语教学反思
2014/01/31 职场文书
物流专业自荐信
2014/05/23 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
2014年城管工作总结
2014/11/20 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
springboot+VUE实现登录注册
2021/05/27 Vue.js
MySQL库表名大小写的选择
2021/06/05 MySQL