頁面間通過 window.location 進行參數傳遞

 

　　今天接手了一個新項目，發現框架中有一些點很有意思。

　　在之前接手的項目中，資源類的請求（比如請求一個頁面），都是通過后台接口接收請求參數，再由模板引擎（比如FreeMarker/Thymeleaf 等）將動態數據拼裝到靜態頁面中，再向請求方返回拼裝好的頁面。

　　但如果是 get 請求，其請求參數是包含在 window.location 中的。我們其實並不需要通過后台去拿這些參數，直接由 JS 在前台獲取即可。

　　比如封裝一個方法：

function getQueryString(name){
            if (!name) return null;
            // 查詢參數：先通過search取值，如果取不到就通過hash來取
            var after = window.location.search;
            after = after.substr(1) || window.location.hash.split('?')[1];
            // 地址欄URL沒有查詢參數，返回空
            if (!after) return null;
            // 如果查詢參數中沒有"name"，返回空
            if (after.indexOf(name) === -1) return null;
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
            // 當地址欄參數存在中文時，需要解碼，不然會亂碼
            var r = decodeURI(after).match(reg);
            // 如果url中"name"沒有值，返回空
            if (!r) return null;
            return r[2];
        }

　　我們在進行類似 http://127.0.0.1/xxx?name=name1&age=18 的頁面請求時，在返回的頁面中：

　　var name = getQueryString("name");

　　var age = getQueryString("age");

　　再對其進行處理可以得到與模板引擎拼裝數據相同的效果，既然前台可以直接進行參數傳遞參數，那么在非特殊場景下（比如數據需要經過后台的加密或其它處理），我感覺這種方式比模板引擎更加高效。

　　還沒有接手過純種的前后端分離的項目（ 水平 low ），不知道前后端分離的情況下是不是這種寫法會比較多。

　　一個疑問留在這里，日后再來看。