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

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

原文地址:https://www.cnblogs.com/niuyourou/p/12459290.html