前端转型全栈萌新的一次bug处理日记

入坑前端领域有段时间了，越是深入学习，越觉得自己的知识储备有点少。以前一直是工作需要，只做前端的内容，和后端人员进行数据交互时，对后端的东西产生了兴趣。于是开始有计划的自学后端，由于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，都会让我的眼光变得狭窄一分，让我忽略了最基础，最“笨”的办法。
做代码，不应该是这样的。不管是人文语言，还是机器语言，每一门语言，都是一种交流的方式。想想在日常生活中，我们是怎么做的？能说一个字，绝对不说两个字，和计算机交流也该如此。

偶尔总结一下经验教训，也不错，人总会有各种各样的问题，常总结才会进步。

最后说一句，我爱代码！