split 方法的正確使用姿勢

本文同步自我的個人博客：http://www.52cik.com/2015/11/02/split-skill.html

通過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 無論是否分割成功，都會返回數組，所以最合適處理這樣的問題。

/**
 * 獲取 QueryString
 * @param  {string} [name] 參數名，可空
 * @param  {string} [search] search部分值，可空
 * @return {string|object} 值或整個對象
 */
function getQueryString(name, search) {
    var url = search || location.search;
    var params = {};

    if (url.indexOf("?") != -1) {
        var arr = url.substr(1).split("&"); // 分割參數
        for(var i = 0, l = arr.length; i < l; i ++) { // 遍歷參數
        	var kv = arr[i].split("="); // 分隔鍵值對
            params[kv[0]] = kv[1] && unescape(kv[1]); // 如果有值就解碼存儲
        }
    }

    return name ? params[name] : params; // 輸出name的值或整個參數對象
}

// 假設 search 值為 ?id=22&name=abc&DEBUG
console.log( getQueryString() ); // {id: "22", name: "abc", DEBUG: undefined}
console.log( getQueryString("name") ); // abc

console.log( getQueryString("name", "?id=22&name=abc&DEBUG") ); // abc

/**
 * 獲取 pathname
 * @param  {string} [name] 參數名，可空
 * @param  {string} [path] pathname部分值，可空
 * @return {string|object} 值或整個對象
 */
function getPathNmae(name, path) {
    var params = {};
    path = (path || location.pathname)
        .split(".html")[0] // 獲取 .html 之前的部分
        .split("/"); // 分隔目錄

    while (path.length) { // 從后遍歷數組
        var val = path.pop(); // 得到值
        var key = path.pop(); // 得到鍵

        if (key) {
            params[key] = unescape(val); // 解碼存儲
        }
    }

    return name ? params[name] : params; // 輸出name的值或整個參數對象
}

// 假設 pathname 值為 /index/id/22/name/abc.html
console.log( getPathNmae() ); // {id: "22", name: "abc"}
console.log( getPathNmae("name") ); // abc

console.log( getPathNmae("name", "/index/id/22/name/abc.html") ); // abc

這樣，簡單又精確，而且兼容性比網上那些滿天飛的代碼要好。