我的第一次"閉包"應用
阿新 • • 發佈: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= "截止日" 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"></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"></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;
}
}