我的第一次"閉包"應用
阿新 • • 發佈：2018-11-25
結論：
閉包可以當作強型別語言如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= 跳轉頁面：
<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"></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"></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;
}
}