• Js中split()方法的正确使用


    通过 js 获取 QueryString (location.search部分) 参数很常见,网上代码也满天飞。
    不过现在的框架,基本上都通过路由伪静态了,把以前的 QueryString 变成了
    pathname (location.pathname部分) 路径参数了。

    例如:/index.html?id=22&name=abc
    很多框架都是渲染为 /index/id/22/name/abc.html

    那么怎么获取 pathname 级的参数呢?有人觉得改下 QueryString 代码的正则即可。
    虽然可以,但是比较麻烦,而且正则写的不严谨,可能匹配不精确,导致有些参数匹配不到。

    其实无论是 QueryString,pathname,用正则都不是最合理的,而应该采取 split 大法。
    为什么这么说呢,我举个例子,大家就会明白了。

    例如 /index.html?id=22&name=abc&DEBUG
    例如 /index/id/22/name/ab.cd?DEBUG

    正则都很难处理这的情况,QueryString 到还好,pathname 的,就纠结的要死了。
    这种情况,我们就应该祭出 split 大法来处理这些烦人的问题了。
    由于 split 无论是否分割成功,都会返回数组,所以最合适处理这样的问题。

     1 /**
     2  * 获取 QueryString
     3  * @param  {string} [name] 参数名,可空
     4  * @param  {string} [search] search部分值,可空
     5  * @return {string|object} 值或整个对象
     6  */
     7 function getQueryString(name, search) {
     8     var url = search || location.search;
     9     var params = {};
    10 
    11     if (url.indexOf('?') != -1) {
    12         var arr = url.substring(1).split('&'); // 分割参数
    13         for(var i = 0, l = arr.length; i < l; i ++) { // 遍历参数
    14             var kv = arr[i].split('='); // 分隔键值对
    15             params[kv.shift()] = kv.length ? decodeURIComponent(kv.join('=')) : undefined; // 如果有值就解码存储
    16         }
    17     }
    18 
    19     return name ? params[name] : params; // 输出 name 的值或整个参数对象
    20 }
    21 
    22 // 假设 search 值为 ?uid=KB1R+qyhl24II350DQ=&name=abc&DEBUG
    23 console.log( getQueryString() ); // => {uid: "KB1R+qyhl24II350DQ=", name: "abc", DEBUG: undefined}
    24 console.log( getQueryString('uid') ); // => KB1R+qyhl24II350DQ=
    25 //
    26 console.log( getQueryString('name', '?uid=KB1R+qyhl24II350DQ=&name=abc&DEBUG') ); // => abc
     1 /**
     2  * 获取 pathname
     3  * @param  {string} [name] 参数名,可空
     4  * @param  {string} [path] pathname部分值,可空
     5  * @return {string|object} 值或整个对象
     6  */
     7 function getPathNmae(name, path) {
     8     var params = {};
     9     path = (path || location.pathname)
    10         .split('.html')[0] // 获取 .html 之前的部分
    11         .split('/'); // 分隔目录
    12 
    13     while (path.length) { // 从后遍历数组
    14         var val = path.pop(); // 得到值
    15         var key = path.pop(); // 得到键
    16 
    17         if (key) {
    18             params[key] = decodeURIComponent(val); // 解码存储
    19         }
    20     }
    21 
    22     return name ? params[name] : params; // 输出name的值或整个参数对象
    23 }
    24 
    25 // 假设 pathname 值为 /index/id/22/name/abc.html
    26 console.log( getPathNmae() ); // {id: "22", name: "abc"}
    27 console.log( getPathNmae('name') ); // abc
    28 //
    29 console.log( getPathNmae('name', '/index/id/22/name/abc.html') ); // abc
  • 相关阅读:
    算法之美_源码公布(5)
    SDL2源码分析2:窗体(SDL_Window)
    hdu5303Delicious Apples
    Android之怎样给ListView加入过滤器
    EntboostChat 0.9(越狱版)公布,iOS免费企业IM
    unix关于打包命令zip的使用
    用 query 方法 获得xml 节点的值
    用友ERP T6技术解析(六) 库龄分析
    [笔试题] 两个有趣的问题
    使用SecueCRT在本地主机与远程主机之间交互文件
  • 原文地址:https://www.cnblogs.com/guangyan/p/6685375.html
Copyright © 2020-2023  润新知