• 代码重构


        车辆信息统计模块,菜单设计按天查询、按周查询和按月查询,功能上包括当天(周、月)查询,以及上一天(周、月)查询和下一天(周、月)查询,代码重构主要包括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);
    			}
    		},
    
    热血高校3结局里旋风雄能打得过林田惠吗?
  • 相关阅读:
    mysql面试题1
    vim常用命令总结转
    centos7编译php扩展详细版
    php阻塞模式与非阻塞模式
    Linux 基础入门
    Jenkins搭建
    Git教程 注: 该博客为转载博客!!!
    centos7 安装apache+php
    熟知error_log快速调试
    Centos7yum安装Redis详细教程
  • 原文地址:https://www.cnblogs.com/crows/p/4886002.html
Copyright © 2020-2023  润新知