车辆信息统计模块,菜单设计按天查询、按周查询和按月查询,功能上包括当天(周、月)查询,以及上一天(周、月)查询和下一天(周、月)查询,代码重构主要包括2个方面:
1、对多个url请求的优化
最初设计思路:由于开始时间startdate以及结束时间enddate各不相同,共需要9个url请求来完成上述9个功能。缺点:相似的代码段很多,渲染页面以及渲染数据的代码几乎相同,代码重复率高。
第一次优化方案:将get请求部分设成变量形式,采用3个url请求即可完成系统功能,3个请求分别实现当天(周、月)查询,以及上一天(周、月)查询和下一天(周、月)查询。缺点:部分简化了html的代码,但是后台controller层的代码还是很复杂。
最终优化方案:采用 postRequestData 函数,系统只需要这里面的1个url请求,startdate、enddate和idList通过参数形式传入函数中,避免了大段代码的重写,效率大大提高,并且简化了controller层的代码。
postRequestData : function(date1, date2, idList) { var self = this; //URL: /collection/cars/stat/user $.get('cars/stat/station' + '?startDate=' + date1 + '&endDate=' + date2 + '&idList=' + idList, function(json) { self.loading.hide(); if (+json.code === 0) { self.renderData(json); } else { var json = {}; json.data = []; self.renderData(json); } }, 'json'); },
2、对时间处理的优化
最初设计思路:由于涉及当天(周、月),以及上一天(周、月)和下一天(周、月)等多种对日期的处理,系统初始设计时应用了时间处理方法控件。缺点:对时间的处理放在了后台controller层,使得控制层变复杂,不符合设计规范;
需要从前端把时间信息传到后台,效率较低。
第一次优化方案:把对时间处理的业务逻辑放在前端。缺点:对时间的处理需要调用很多次函数来实现业务逻辑,代码依旧繁琐。
最终优化方案:只采用 nextStatPeriod 1个函数,函数接收revise参数,0代表是当天(周、月),1代表下一天(周、月)、-1代表上一天(周、月),按照日期搜索时只需要将参数
传递给nextStatPeriod ,在处理不同逻辑时,与revise相乘即可,不用每次搜索都调用计算时间的函数,简化了代码,重复率下降。
// 按日期搜索 dateSearch : function(e) { var _self = e.data.self; _self.nextStatPeriod(0); }, preSearch : function(e) { var _self = e.data.self; _self.nextStatPeriod(-1); }, backSearch : function(e) { var _self = e.data.self; _self.nextStatPeriod(1); }, nextStatPeriod : function(revise, idList) { //1:next, -1 previous if(revise == undefined){ revise = 0; } if(!idList){ idList = ""; } var curDate = $("#schedule_date").val(); var startDate = new Date(curDate.replace(/-/g, "/")); var endDate = startDate; var info = ""; if (!this.options.isLoadTask) { this.loading.show(); var e = $("#select").val(); if (e == 'day') { startDate = addDate(startDate, 1*revise); endDate = startDate; info = "统计时间(天):"; } else if (e == "week") { startDate = getCurrentMonday(startDate); startDate = addDate(startDate, 7*revise); endDate = addDate(startDate, 6); info = "统计时间(周):"; } else if (e == "month") { startDate = getCurrenMonthFirstDate(startDate); startDate = addMonth(startDate, 1*revise); endDate = addMonth(startDate, 1); endDate = addDate(endDate, -1); info= "统计时间(月):" ; } //重新设置时间 startDate =startDate.Format("yyyy-MM-dd"); endDate = endDate.Format("yyyy-MM-dd"); $('#schedule_date').attr("value",startDate); $("#monitor").html(info + startDate + "~" + endDate); this.postRequestData(startDate, endDate, idList); } },