页面需要什么,id+name;
功能实现了,调用接口返回什么,orgAndPosVo(id,empId,empName,..);
方法慢,被新bug遮挡视线。
/** * 人员选择起弹框 * orgIdParam:部门id。默认是全公司,当人员选择器或部门选择器选择了可选择范围后传入这个部门的id */ personSelectDialog:function(target, parameter){ if(typeof target !=‘string‘){ var left = $(target).offset().left + $(target).outerWidth() - 350; var top = $(target).offset().top + $(target).outerHeight(); } parameter = parameter || {}; if ($("#personSelectDialog").length > 0) { $("#personSelectDialog").remove(); } else { var stringBuilder = JCPublicUtil.StringBuilder(); stringBuilder.Append(‘<div class="personSelectDialog row" id="personSelectDialog" style="left:‘+left+‘px; top:‘+top+‘px;">‘); stringBuilder.Append(‘ <div class="selectcontent">‘); if (parameter.isMultiselect !== false) { stringBuilder.Append(‘ <a href="javascript:;" id="personMultipBtn">批量选择</a>‘); stringBuilder.Append(‘ <div style="display:none">‘); stringBuilder.Append(‘ <a href="javascript:;" id="personMultipBtnSure" >确认</a>‘); stringBuilder.Append(‘ <a style="margin-left:15px" href="javascript:;" id="personMultipCancle">取消</a>‘); stringBuilder.Append(‘ </div>‘); } stringBuilder.Append(‘ </div>‘); stringBuilder.Append(‘ <div class="leftcontent"><div class="orgContent org_scroller" id="js_orgSelect" style="height:300px; width:320px;overflow-y:hidden; overflow-x:auto"></div></div>‘); stringBuilder.Append(‘ <div class="rightcontent"><div class="personContent org_scroller" id="js_emSelect" style="height:310px; width:158px;"></div></div>‘); stringBuilder.Append(‘</div>‘); if(target !=‘‘){ $("body").append(stringBuilder.ToString()); } $(".personSelectDialog").click(function(e){ e.stopPropagation(); }) $(".page-wrapper").bind("click",function(){ $("#personSelectDialog").remove(); $(".page-wrapper").unbind(‘click‘); }) $("body").bind("click",function(){ $("#personSelectDialog").remove(); $("body").unbind(‘click‘); }) $("#personSelectDialog").show(); //批量选择 $("#personMultipBtn").bind(‘click‘,function(){ $(‘.jstree-icon.jstree-checkbox‘).css(‘display‘, ‘inline-block‘); $(this).siblings(‘div‘).show(); $(this).hide(); $(this).parent().addClass(‘Multip‘); }) //取消 $("#personMultipCancle").bind(‘click‘,function(){ $(‘.jstree-icon.jstree-checkbox‘).hide(); $(this).parent(‘div‘).hide(); $(this).parent(‘div‘).siblings(‘a‘).show(); $(this).parents(‘.selectcontent‘).removeClass(‘Multip‘); }) //确定 $("#personMultipBtnSure").unbind(‘click‘).bind(‘click‘,function(){ $(‘.jstree-icon.jstree-checkbox‘).hide(); $(this).parent(‘div‘).hide(); $(this).parent(‘div‘).siblings(‘a‘).show(); $(this).parents(‘.selectcontent‘).removeClass(‘Multip‘); var data = $("#js_orgSelect").jstree(‘get_selected‘); var batchObj = {"orgIds":data.join(‘,‘)}; if(parameter.paramsObj != undefined){ $.extend(batchObj, {calendarId: parameter.paramsObj}); } JCPublicUtil.Ajax(basePath + "/pc/A","GET",batchObj,function(data){ if(data.resultCode == "000000"){ var data = data.data; //信息传阅人员列表 if(parameter.empIdList != undefined){ if (parameter.callBack != undefined) { parameter.callBack(data); } }else{ for (var i = 0; i < data.length; i++) { var person = {}; person.id = data[i].id; person.text = data[i].name; if (parameter.callBack != undefined) { parameter.callBack(person); } } } } },function(){},60000,false,"json"); }) var demoDiv = document.getElementsByClassName(‘org_scroller‘); if (demoDiv != undefined && demoDiv.length > 0) { for(var i=0; i<demoDiv.length; i++){ var ps = new PerfectScrollbar(demoDiv[i]); $(".ps__rail-x").css(‘opacity‘,1) } } if(typeof target ==‘string‘){ var person = {}; if(parameter.callBack != undefined){ parameter.callBack(person); } }else{ //加载数据 companyId 是个全局变量 JCPublicUtil.Ajax(basePath + "/pc/B","GET",{"orgId":parameter.orgIdParam},function(result){ if(result.resultCode == "000000"){ var data = $.parseJSON(result.data); if(data != undefined && data.length > 0){ var nodeArray = []; for(var j = 0; j < data.length; j++){ var item = data[j]; if (j == 0) { var parent = "#"; } else { var parent = item.pId; } var node = {"id" : item.id, "parent" : parent, "text" : item.orgName}; nodeArray.push(node); } } //初始化tree $(‘#js_orgSelect‘).jstree({ "plugins" : [ "checkbox" ], "core":{ "themes" : { "responsive": false }, "data" : nodeArray, "multiple": false }, "checkbox" : { "whole_node": false } }).on(‘loaded.jstree‘,function(e, data){ var inst = data.instance; var obj = inst.get_node(e.target.firstChild.firstChild.lastChild); inst.select_node(obj); }).bind(‘select_node.jstree‘, function(node,selected,event) { if ($(".selectcontent").hasClass(‘Multip‘)) { $(‘.jstree-icon.jstree-checkbox‘).css(‘display‘, ‘inline-block‘); }else{ $(‘.jstree-icon.jstree-checkbox‘).css(‘display‘, ‘none‘); } var params = {"orgId":selected.node.id,dataType:1}; //考勤 - 添加排班第一步 根据日历获取该日历下的人员 if(parameter.paramsObj != undefined){ $.extend(params, {calendarId: parameter.paramsObj}); } JCPublicUtil.Ajax(basePath + "/pc/C","GET",params,function(result){ var emlist = result.list; var stringBuilder = JCPublicUtil.StringBuilder(); if(emlist != undefined){ stringBuilder.Append(‘<ul class="list-group">‘); for(var i = 0 ; i < emlist.length; i++){ var em = emlist[i]; stringBuilder.Append(‘<li class="list-group-item" data-id="‘+em.id+‘">‘+em.name+‘</li>‘); } stringBuilder.Append(‘</ul>‘); } $("#js_emSelect").html(stringBuilder.ToString()); $("#js_emSelect .list-group-item").click(function(e){ var person = {id:"",text:""}; person.id = $(this).attr("data-id"); person.text = $(this).text(); if(parameter.callBack != undefined){ parameter.callBack(person); } }); },function(){},60000,false,"json"); }).bind(‘open_node.jstree‘, function(node){ if ($(".selectcontent").hasClass(‘Multip‘)) { $(‘.jstree-icon.jstree-checkbox‘).css(‘display‘, ‘inline-block‘); }else{ $(‘.jstree-icon.jstree-checkbox‘).css(‘display‘, ‘none‘); } }); $("#js_orgSelect").on("ready.jstree", function (event, data) { $("#js_orgSelect").jstree(‘open_all‘) }); } },function(){},60000,false,"json"); } } }
A,C方法类似,但是C方法取出的数据要远远大于A;而此处只要id-name即可,多余的内容导致了慢方法。
错误:
1、我在查找此方法的时候,想的第一个问题不是方法实现有没有问题,而是方法能不能优化;这导致我修改了两天的bug,最后问题不在这里。 2、由于js这段代码太长了,我潦草的看了一半就开始动工了,虽然最后将C方法由原来的3秒缩进成2秒,但是由于问题原因找错了,一直在做无用功;还需要特别注意,这期间我还被新发现的bug遮挡了“视线”,竟然忘记自己是改bug的去找bug了,哎,粗心,自以为是害了自己。 3、因为没有跟进js这段代码,没有进行数据比对,也就没有搞清楚页面到底要返回什么数据,以至于接口返回的那些过多数据都以为是页面需要的,真的是实力打脸。
总结:
1、先从页面看起,明白业务与需求,如果你正在纠正的代码本身就是错误的(可能是逻辑上、也可能是js处理上的),那么接下来你的改动无论看起来多么有效简化,都是瞎改。重要的是你在做无用功。 2、明白了业务需求,最重要的就是页面给你的数据,你要返回的数据;简单来说就是,你拿到页面给的数据后能从后端做些什么。 3、调试,为什么会被新的bug干扰视线,归根到底就是你的调试方法有问题,应该勤加练习、找出正确且适合你的调试套路。 4、最后,也是重要的一点,远离惯性思维,千万不要在别人的代码让以为。否则,痛苦都是自找的
原文:https://www.cnblogs.com/huakaiyoushi/p/10644885.html