一次慢方法的优化

页面需要什么,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、最后，也是重要的一点，远离惯性思维，千万不要在别人的代码让以为。否则，痛苦都是自找的

一次慢方法的优化

猜你喜欢