页面间通过 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 ），不知道前后端分离的情况下是不是这种写法会比较多。

　　一个疑问留在这里，日后再来看。