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