入坑前端領域有段時間了，越是深入學習，越覺得自己的知識儲備有點少。以前一直是工作需要，只做前端的內容，和後端人員進行資料互動時，對後端的東西產生了興趣。於是開始有計劃的自學後端，由於js基礎不算差，學起來還是比較輕鬆的，這是我在學習nodejs時製作一個基於mongodb資料庫的商城後臺管理系統時，產生的bug日誌。

廢話不多說，先上程式碼：

                       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向後端傳送資料，這段程式碼寫在success回撥函式中，本意是用伺服器返回的資料動態生成頁碼，並用jQuery實現頁面跳轉的功能，從理論上講，是完全沒什麼問題的。

頁面跳轉功能的實現利用了在按鈕中呼叫ajax，結合後端mongoose的Model.find功能每一次點選跳頁按鈕，對頁面中的資料進行重繪，這樣簡單的實現了跳頁功能，來段後端程式碼：

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);
		});
	})
});
 

這裡提一下，在ajax拿到response後，console.log輸出一下response真的是一個很好的習慣。不輸出你根本不知道處理之後傳出來的data資料是個陣列（一般我們的第一反應應該是個json格式的物件）。

好了迴歸正題，從邏輯角度講，這樣做是沒有問題的。於是開始試執行，bug來了，前兩次點選執行正常，也沒有報錯。但是再次點選，會出現第二頁資料生成四條的效果，仔細檢查程式碼，發現在success中呼叫ajax函式本身會形成函式自呼叫，相當於一個迴圈體，這樣好說，我將按鈕事件放在函式外部，從外部獲取到，並將ajax所需要的值傳進去。這時，新的bug就產生了。

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);
		}
	})
 

我在頁面中取不到資料（因為所有的頁碼資料都是使用ajax傳回來的資料動態生成的），這時我意識到自己把自己坑了。ajax和點選事件函式是非同步執行的，取不到資料很正常。將程式碼發到前端交流群裡，查閱網上資料，我將目光放在了ES6中的Promise上，Promise的then可以實現函式的同步執行。很無奈，自己的坑自己來補，於是，開始了Promise的編寫...

然而，正在我瘋狂碼字的時候，前端交流群裡一個大佬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，都會讓我的眼光變得狹窄一分，讓我忽略了最基礎，最“笨”的辦法。
做程式碼，不應該是這樣的。不管是人文語言，還是機器語言，每一門語言，都是一種交流的方式。想想在日常生活中，我們是怎麼做的？能說一個字，絕對不說兩個字，和計算機交流也該如此。

偶爾總結一下經驗教訓，也不錯，人總會有各種各樣的問題，常總結才會進步。

最後說一句，我愛程式碼！