zoukankan      html  css  js  c++  java
  • JS文件传参及处理技巧

    其实为js文件传参是很久就接触过的一个问题,只是一直没有放在心上,今天在无忧看到又有人问这个问题,今日总结一下。

    解决思路:

    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://www.cnitblog.com/yemoo/archive/2008/03/11/40799.html

  • 相关阅读:
    Android SHA1与Package获取方式
    《C++语言基础》实践參考——数组作数据成员
    Linux进程间通信——使用共享内存
    Java中ArrayList和LinkedList差别
    hdu1695(莫比乌斯)或欧拉函数+容斥
    Android学习路线(二十四)ActionBar Fragment运用最佳实践
    HTML——使用表格对表单进行布局
    Nginx 訪问日志增长暴增出现尖刀的具体分析
    基于特定值来推断隐藏显示元素的jQuery插件
    怎样配置PHP环境和安装Zendstdio编辑器
  • 原文地址:https://www.cnblogs.com/Lewis/p/1734694.html
Copyright © 2011-2022 走看看