前端轉型全棧萌新的一次bug處理日記
入坑前端領域有段時間了,越是深入學習,越覺得自己的知識儲備有點少。以前一直是工作需要,只做前端的內容,和後端人員進行資料互動時,對後端的東西產生了興趣。於是開始有計劃的自學後端,由於js基礎不算差,學起來還是比較輕鬆的,這是我在學習nodejs時製作一個基於mongodb資料庫的商城後臺管理系統時,產生的bug日誌。
廢話不多說,先上程式碼:
在這裡我使用了ajax向後端傳送資料,這段程式碼寫在success回撥函式中,本意是用伺服器返回的資料動態生成頁碼,並用jQuery實現頁面跳轉的功能,從理論上講,是完全沒什麼問題的。console.log(res); //動態新增頁碼 var pageNumber = res.pageNO; $("#pageCurrent").text(pageNumber); var pageRecode = res.total; $("#totalRecode").text(pageRecode); var num = parseInt(pageRecode) / parseInt($("#pageSize").val()); $("#totalPages").text(Math.ceil(num)); $("#prevPage").click(function(){ $("#goods-msg .trs").remove(); if(pageNO > 1){ pageNO --; $("#pageCurrent").text(pageNumber); paging(); }else if(pageNO == 1){ alert("已經是第一頁了"); $("#pageCurrent").text(1); paging(); } })
頁面跳轉功能的實現利用了在按鈕中呼叫ajax,結合後端mongoose的Model.find功能每一次點選跳頁按鈕,對頁面中的資料進行重繪,這樣簡單的實現了跳頁功能,來段後端程式碼:
這裡提一下,在ajax拿到response後,console.log輸出一下response真的是一個很好的習慣。不輸出你根本不知道處理之後傳出來的data資料是個陣列(一般我們的第一反應應該是個json格式的物件)。router.get('/list', function(req, res, next) { var condition = req.query.condition || "good"; // 注意程式碼的健壯性 // 測試中,有異常系測試。 後端最頭疼的是異常系測試。 var pageNO = req.query.pageNO || 1; pageNO = parseInt(pageNO); var perPageCnt = req.query.perPageCnt || 10; perPageCnt = parseInt(perPageCnt); GoodsModel.count({goods_name: {$regex: condition}}, function(err, count){ console.log("數量:" + count); var query = GoodsModel.find({goods_name: {$regex: condition}}) .skip((pageNO-1)*perPageCnt).limit(perPageCnt); query.exec(function(err, docs){ console.log(err, docs); var result = { total: count, data: docs, pageNO: pageNO } res.json(result); }); }) });
好了迴歸正題,從邏輯角度講,這樣做是沒有問題的。於是開始試執行,bug來了,前兩次點選執行正常,也沒有報錯。但是再次點選,會出現第二頁資料生成四條的效果,仔細檢查程式碼,發現在success中呼叫ajax函式本身會形成函式自呼叫,相當於一個迴圈體,這樣好說,我將按鈕事件放在函式外部,從外部獲取到,並將ajax所需要的值傳進去。這時,新的bug就產生了。
我在頁面中取不到資料(因為所有的頁碼資料都是使用ajax傳回來的資料動態生成的),這時我意識到自己把自己坑了。ajax和點選事件函式是非同步執行的,取不到資料很正常。將程式碼發到前端交流群裡,查閱網上資料,我將目光放在了ES6中的Promise上,Promise的then可以實現函式的同步執行。很無奈,自己的坑自己來補,於是,開始了Promise的編寫...var condition = $("#search-word").val(); var pageNO = $("#pageCurrent").html(); var perPageCnt = $("#pageSize").val(); var num = $("#totalPages").html(); $("#nextPage").click(function(){ $("#goods-msg .trs").remove(); if(pageNO < num){ pageNO ++; $("#pageCurrent").text(pageNO); paging(condition,pageNO,perPageCnt); }else if(pageNO == num){ alert("已經是最後一頁了"); $("#pageCurrent").text(num); paging(condition,pageNO,perPageCnt); } })
然而,正在我瘋狂碼字的時候,前端交流群裡一個大佬call了過來,看了他的程式碼,我才明白,是我想多了:
$("#prevPage").click(function(){
var condition = $("#search-word").val();
var pageNO = $("#pageCurrent").html();
var perPageCnt = $("#pageSize").val();
$("#goods-msg .trs").remove();
if(pageNO > 1){
pageNO --;
$("#pageCurrent").text(pageNO);
paging(condition,pageNO,perPageCnt);
}else if(pageNO == 1){
alert("已經是第一頁了");
$("#pageCurrent").text(1);
paging(condition,pageNO,perPageCnt);
}
})
$("#nextPage").click(function(){
var condition = $("#search-word").val();
var pageNO = $("#pageCurrent").html();
var perPageCnt = $("#pageSize").val();
var num = $("#totalPages").html();
$("#goods-msg .trs").remove();
if(pageNO < num){
pageNO ++;
$("#pageCurrent").text(pageNO);
paging(condition,pageNO,perPageCnt);
}else if(pageNO == num){
alert("已經是最後一頁了");
$("#pageCurrent").text(num);
paging(condition,pageNO,perPageCnt);
}
})
按鈕功能,只需要最簡單的方法,“哪裡需要,哪裡取值”就可以實現啦!很沒有技術含量,但是也不由得讓我反思。
為什麼我在這種時候會想多了?
這可能是我自己的毛病,也可能是很多人通病。在經歷了很多開發之後,我知道了很多bug的處理方法,但這樣,會讓我的思維被侷限,可以說,我沉迷攻破一個又一個bug,每解決了一個bug,都會讓我的眼光變得狹窄一分,讓我忽略了最基礎,最“笨”的辦法。
做程式碼,不應該是這樣的。不管是人文語言,還是機器語言,每一門語言,都是一種交流的方式。想想在日常生活中,我們是怎麼做的?能說一個字,絕對不說兩個字,和計算機交流也該如此。
偶爾總結一下經驗教訓,也不錯,人總會有各種各樣的問題,常總結才會進步。
最後說一句,我愛程式碼!