我的第一次"闭包"应用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37037492/article/details/84207838

结论：

闭包可以当作强类型语言如C++、Java的全局变量使用，非常巧妙

需求：

ssm项目，使用pagehelper分页，在写前一页、后一页、第一页、最后一页等页面跳转时，遇到了问题，如果查询全部的数据，访问控制器返回全部数据，跳转页面时没有问题，如果是条件查询，就会出现问题：如何在跳转页面时把相应的查询参数带上，毕竟无条件查询可以不带参数，但是如果条件查询不带参数就会乱套。

项目初始代码

最开始所有页面全部使用url进行跳转，其中queryCourseBynameandtime是条件查询，三个条件可以随机组合，也可以全为空，queryAllCourse为查询所有数据,

存在上面的问题，那么如何解决呢？

表单：

<form class="layui-form layui-col-md12 x-so" action="${pageContext.request.contextPath}/queryCourseBynameandtime">
<%--按照name进行查询--%>
    <input class="layui-input" placeholder="开始日" name="start" id="start">
    <input class="layui-input" placeholder="截止日" name="end" id="end">
    <input type="text" name="coursename"  placeholder="请输入课程名" autocomplete="off" class="layui-input">
    <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
    <label>是否模糊查询</label>
    <input  type="radio" value="true" name="fuzzquery">
</form>

跳转页面：

<a href="${pageContext.request.contextPath}/queryAllCourse?pn=1">首页</a>
<a href="${pageContext.request.contextPath}/queryAllCourse?pn=${pageInfo.pageNum-1}">上一页</a>
<a href="${pageContext.request.contextPath}/queryAllCourse?pn=${pageInfo.pageNum+1}">下一页</a>
<a href="${pageContext.request.contextPath}/queryAllCourse?pn=${pageInfo.pages}">尾页</a>

尝试一：js全局变量保存拼接的url

在学习了部分JQuery后，我觉得利用JQuery和字符串拼接可以解决这个问题
情景一

• 步骤一：填写查询条件
• 步骤二：点击查询，触发onclick，调用封装的js函数，对参数进行保存，拼接成url，其url访问queryCourseBynameandtime
• 步骤三：利用js进行页面跳转，摒弃form的action方式（因为其的url是不可以变化的）
• 步骤四：利用js将“首页、上一页”等取代a标签的跳转功能，根据已保存的全局变量url，传入pn参数进行跳转

情景二

• 步骤一：不填写查询条件，查询全部数据
• 步骤二：不触发onclick，调用封装的js函数，对全局url进行初始化，设置为queryAllCourse
• 步骤单：利用js将“首页、上一页”等取代a标签的跳转功能，根据已保存的全局变量url，传入pn参数进行跳转

实验代码

表单：

<form class="layui-form layui-col-md12 x-so">
    <%--按照name进行查询--%>
    <input class="layui-input" placeholder="开始日" name="start" id="start">
    <input class="layui-input" placeholder="截止日" name="end" id="end">
    <input type="text" name="coursename" placeholder="请输入课程名" autocomplete="off" class="layui-input" id="cname">
    <button class="layui-btn" type="button" lay-submit="" lay-filter="sreach" id="submit"><i class="layui-icon">&#xe615;</i>
    </button>
    <label>是否模糊查询</label>
    <input type="radio" value="true" name="fuzzquery" id="fuzzquery">
</form>

跳转页面：

<a href = "javascript:;" onclick="tiaozhuan(1)">首页</a>
<a href = "javascript:;" onclick="tiaozhuan(${pageInfo.pageNum-1})">上一页</a>
<a href = "javascript:;" onclick="tiaozhuan(${pageInfo.pageNum+1})">下一页</a>
<a href = "javascript:;" onclick="tiaozhuan(${pageInfo.pages})">尾页</a>

js：

	//全局变量
    window.url = null;
    //模糊查询url监测
  $("#submit").click(function () {
    function initurl(){
        var start = $("#start").val();
        var end = $("#end").val();
        var cname = $("#cname").val();
        var url1 = "queryCourseBynameandtime?";
        var url2 = "start=";
        var url3 = "&end=";
        var url4 = "&coursename=";
        //判断是否选中
        if ($('#fuzzquery').is(':checked')) {
            var url5 = "&fuzzquery=true";
        } else {
            var url5 = '';
        }
        //拼接url
        if (start == '' && end == '' && cname == '') {
            url = "queryAllCourse";
            window.location.href =url;
        } else {
            url = url1 + url2 + start + url3 + end + url4 + cname + url5;
            window.location.href =url;
        }
    };
    function tiaozhuan(num) {
        if (url == null) {
            window.location.href = "queryAllCourse" + "?pn=" + num;
        } else {
            var tempurl = url + '?pn=' + num;
            window.location.href = tempurl;
        }
    }

这个解法一开始我还很自信的，但是写完发现js 存在这样的规则：全局变量在页面跳转至新页面是自动置空，这个方法悲催的没有实现。

尝试二：js闭包保存拼接的url

我的理解，闭包可以巧妙地解决全局变量的问题，上面地代码只需稍加修改即可,将上面的JQuery使用id获取button改变为添加onclick，定义触发的函数

<form class="layui-form layui-col-md12 x-so">
    <%--按照name进行查询--%>
    <input class="layui-input" placeholder="开始日" name="start" id="start">
    <input class="layui-input" placeholder="截止日" name="end" id="end">
    <input type="text" name="coursename" placeholder="请输入课程名" autocomplete="off" class="layui-input" id="cname">
    <button class="layui-btn" type="button" lay-submit="" lay-filter="sreach" id="submit" onclick="initurl()"><i class="layui-icon">&#xe615;</i>
    </button>
    <label>是否模糊查询</label>
    <input type="radio" value="true" name="fuzzquery" id="fuzzquery">
</form>

<a href = "javascript:;" onclick="tiaozhuan(1)">首页</a>
<a href = "javascript:;" onclick="tiaozhuan(${pageInfo.pageNum-1})">上一页</a>
<a href = "javascript:;" onclick="tiaozhuan(${pageInfo.pageNum+1})">下一页</a>
<a href = "javascript:;" onclick="tiaozhuan(${pageInfo.pages})">尾页</a>

js:

 window.url = null;
    //模糊查询url监测
    function initurl(){
        var start = $("#start").val();
        var end = $("#end").val();
        var cname = $("#cname").val();
        var url1 = "queryCourseBynameandtime?";
        var url2 = "start=";
        var url3 = "&end=";
        var url4 = "&coursename=";
        //判断是否选中
        if ($('#fuzzquery').is(':checked')) {
            var url5 = "&fuzzquery=true";
        } else {
            var url5 = '';
        }
        //拼接url
        if (start == '' && end == '' && cname == '') {
            url = "queryAllCourse";
            window.location.href =url;
        } else {
            url = url1 + url2 + start + url3 + end + url4 + cname + url5;
            window.location.href =url;
        }
        return function tz(){
                url = url+'';
        }
    };
    function tiaozhuan(num) {
        var fn = initurl();
        fn();
        alert(url);
        if (url == null) {
            window.location.href = "queryAllCourse" + "?pn=" + num;
        } else {
            var tempurl = url + '?pn=' + num;
            window.location.href = tempurl;
        }
    }

这样，url变量便一直存在于内存之中了。嘿嘿~js新手，存在错误请指正！

---

突然意识到，如果使用Ajax传递url和参数，只需要简单判断是否存在参数便确定了大部分的url，利用data-*自定义属性或者利用jquery操作dom获取部分参数，就避免了页面间传递参数的问题，emmmmmm~~~~~~~

---

再一次更新，突然发现闭包好像不能实现，emmmmmmm~~~~~~~~~ 这里使用window的location对象实现

 function initurl() {
        var start = $("#start").val();
        var end = $("#end").val();
        var cname = $("#cname").val();
        var url1 = "queryCourseBynameandtime?";
        var url2 = "start=";
        var url3 = "&end=";
        var url4 = "&coursename=";
        //判断是否选中
        if ($('#fuzzquery').is(':checked')) {
            var url5 = "&fuzzquery=true";
        } else {
            var url5 = '';
        }
        //拼接url
        if (start == '' && end == '' && cname == '') {
            url = "queryAllCourse";
            window.location.href = url;
            console.log("initurl1：" + url);
        } else {
            url = url1 + url2 + start + url3 + end + url4 + cname + url5;
            window.location.href = url;
        }
    };
    function tiaozhuan(num) {
        console.log("tz2：" + window.location.href);
        if(window.location.href.indexOf('pn')==-1){//url中没有出现pn
            if(window.location.href.indexOf("queryAllCourse")==-1){//url中不存在queryAllCourse
            	//pn不是第一个参数
                window.location.href =window.location.href + "&pn=" + num;
            }else {
            	//pn是第一个参数
                window.location.href =window.location.href + "?pn=" + num;
            }
        }else {//地址url中存在pn
            //获取最后=的位置，左闭右开
            index = window.location.href.lastIndexOf("=");
            //获取上一次访问地址
            url = window.location.href;
            //地址拼接，拼接页数pn
            window.location.href= url.substr(0,index)+"="+num;
        }
    }

参考：window.location获取url各项参数详解