逻辑之美，从重构谈起

   在《重构 改善既有代码的设计》一书中，称一些不完美的，甚至写的很烂的程序叫做有“坏味道”。当程序有“坏味道”时我们就要对它进行重构。作为程序猿，做几次重构后你就会发现你喜欢上重构，不知道别人是不是，反正我是喜欢上重构了。重构是一种对逻辑的审查与修改的过程，在一次做完对一个系统40%代码的重构后，我把代码量减少了90%，但是代码变得更容易理解了，而且可扩展性更强了，那时觉得非常有成就感。脑子还瞬间蹦出来一个词——逻辑之美，但是感觉这应该是一本书的名字，但是网上搜了一下竟然没有这本书《逻辑之美》。

   下面，我们来看一个我刚刚重构过的方法（部分注释是我为了读者容易理解加上去的）。

/*
* 功能：下面方法功能是对js框架dhtmlx的表格控件dhtmlxgrid对象一次刷新
* 背景：本方法的应用背景是对mygrid内多行进行拖动排序，排序原理是先获取行的初始位置，目标位置，然后获取以数组形式获取mygrid中的数据（行id，每一个单元格的数据），将数组进行排序后重新填充进原表格mygrid
* 参数：参数array是将要重新填充进表格的数组数据，参数mygrid的是将要操作的dhtmlxgrid对象
*/
function reCreatMygrid(array,mygrid){     //刷新新的指标列表
             mygrid.clearAll(false);     //不清除表头
             var cellIndicatorArrayLength = mygrid.getColumnsNum()+1;     //单位指标的数组长度(所有列的值加上行id)
             var newArray=[];    //用来存储指标列表内容
             var newArrayId=[];    //用来存储新列表的Id
             /*
             * 因为是提供给所有已定义dhtmlxgrid表格应用接口，所以每个表格的列数有差异
             */
             if(cellIndicatorArrayLength==7){        //如果表格总共有6列
                             for( var i=0;i<array.length;i=i+7){
                                         newArray.push([array[i],array[i+1],array[i+2],array[i+3],array[i+4],array[i+5]]);
                                         newArrayId.push(array[i+6]);            
                         }
             }else if(cellIndicatorArrayLength==6){        //如果表格总共有5列
                             for( var i=0;i<array.length;i=i+6){
                                         newArray.push([array[i],array[i+1],array[i+2],array[i+3],array[i+4]]);
                                         newArrayId.push(array[i+5]);            
                         }
             }else if(cellIndicatorArrayLength==5){         //如果表格总共有4列
                             for( var i=0;i<array.length;i=i+5){
                                         newArray.push([array[i],array[i+1],array[i+2],array[i+3]]);
                                         newArrayId.push(array[i+4]);    
                         }
             }else if(cellIndicatorArrayLength==4){
                            for( var i=0;i<array.length;i=i+4){
                                         newArray.push([array[i],array[i+1],array[i+2]]);
                                         newArrayId.push(array[i+3]);            
                         }
             }else if(cellIndicatorArrayLength==3){
                            for( var i=0;i<array.length;i=i+3){
                                         newArray.push([array[i],array[i+1]]);
                                         newArrayId.push(array[i+2]);            
                         }
             }
             //将数据填充进表格（dhtmlxgrid提供的接口）
             mygrid.parse(newArray,"jsarray" );
             /*
             * dhtmlxgrid提供的数组填充方式不能为其赋予行id，初始化后为默认id，即1,2,3……
             * 现在我们必须把每行原有的id赋给每一行
             */
             for( var j=0;j<mygrid.getRowsNum();j++){
                         mygrid.setRowId(j, newArrayId[j]);
             }
}
 

         上面方法这是我一年前写的。这不，前两天这块出问题了，当mygrid的行过多的时候（其实也不多就60多行），当使用拖拽排序的时候，就会出现问题。什么问题呢？首先，拖动之后浏览器会出现崩溃现象；其次，经过我调试，发现问题就在最后一个循环里面，即dhtmlxgrid的原生的为行设置行id的方法setRowId会失效，就这么一个循环，但是设置了行id后，并不是理想状态的。我不想去查setRowId的原因了，因为我觉得我的这个方法本身就很烂，我想重构它。

    对，就是重构。

 重构的首要任务是解决bug，我得使用另一种方法初始化mygrid，即不用Array数据了，我打算使用Json格式(dhtmlx控件基本都支持HTML table， xml，array，json），因为json格式可以再填充表格数据的时候同时赋给每行id值，它绝对可以解决目前的bug。经过查阅了dhtmlxgrid的帮助文档，我成功的完成任务，代码如下：

 

function reCreatMyrightgrid(array,mygrid){     //刷新新的指标列表
             mygrid.clearAll(false);     //不清除表头
             var cellIndicatorArrayLength = mygrid.getColumnsNum()+1;     //单位指标的数组长度(所有列的值加上行id)
             //var newArray=[];    //用来存储指标列表内容
             //var newArrayId=[];    //用来存储新列表的Id
             var rowsArray = [];     //存放行数据的数组[{"id":行id,"data":本行每一列的数据数组}]
             var dataAll = {};
             if(cellIndicatorArrayLength==7){        //如果表格总共有5列
                         for( var i=0;i<array.length;i=i+7){
                                        //newArray.push([array[i],array[i+1],array[i+2],array[i+3],array[i+4],array[i+5]]);
                                        //newArrayId.push(array[i+6]);
                                rowsArray.push({"id":array[i+6], "data":[array[i],array[i+1],array[i+2],array[i+3],array[i+4],array[i+5]]});
                    }
             }else if(cellIndicatorArrayLength==6){        //如果表格总共有5列
                         for( var i=0;i<array.length;i=i+6){
                                //newArray.push([array[i],array[i+1],array[i+2],array[i+3],array[i+4]]);
                                //newArrayId.push(array[i+5]);    
                                rowsArray.push({"id":array[i+5], "data":[array[i],array[i+1],array[i+2],array[i+3],array[i+4]]});
                    }
             }else if(cellIndicatorArrayLength==5){         //如果表格总共有4列
                         for( var i=0;i<array.length;i=i+5){
                                //newArray.push([array[i],array[i+1],array[i+2],array[i+3]]);
                                //newArrayId.push(array[i+4]);
                        rowsArray.push({"id":array[i+4], "data":[array[i],array[i+1],array[i+2],array[i+3]]});
                    }
             }else if(cellIndicatorArrayLength==4){
                         for( var i=0;i<array.length;i=i+4){
                                //newArray.push([array[i],array[i+1],array[i+2]]);
                                //newArrayId.push(array[i+3]);
                                rowsArray.push({"id":array[i+3], "data":[array[i],array[i+1],array[i+2]]});
                    }
             }else if(cellIndicatorArrayLength==3){
                         for( var i=0;i<array.length;i=i+3){
                                //newArray.push([array[i],array[i+1]]);
                                //newArrayId.push(array[i+2]);
                                rowsArray.push({"id":array[i+2], "data":[array[i],array[i+1]]});
                    }
             }
             dataAll.rows=rowsArray;
             mygrid.parse(dataAll,"json" );
             //mygrid.parse(newArray,"jsarray");
             //for(var j=0;j<mygrid.getRowsNum();j++){    //为新列表附上行id
             //        mygrid.setRowId(j, newArrayId[j]);
             //}
}
 

         处理bug的任务已经完成，为什么还留有这个多注释呢？别急，其实重构才刚刚开始。

 刚才称其为重构，其实我们只是选择了一个更合适的方案来代替原来的方案。但是代码中这一串if else语句明显带有坏味道，在性能方面可以使用switch代替；以后要是有其他列数的表格需要排序，我们还得为它再添加一个else if?No,这就是坏味道。

 就像《重构 改善既有代码的设计》中提到的某一种程序员，我盯着屏幕开始发呆……

 过了几分钟，思路慢慢有了，在过了几分钟，好了，问题解决了。对，我就要删除这些if else语句，下面是再次重构后的代码：

function reCreatMyrightgrid(array,mygrid){     //刷新新的指标列表
             mygrid.clearAll(false);     //不清除表头
             var cellIndicatorArrayLength = mygrid.getColumnsNum()+1;     //单位指标的数组长度(所有列的值加上行id)
             var rowsArray = [];     //存放行数据的数组[{"id":行id,"data":本行每一列的数据数组}]
             var dataAll = {};
             for( var i=0;i<array.length;i=i+cellIndicatorArrayLength){
                         var data = [];
                         for( var n=0;n<cellIndicatorArrayLength-1;n++){
                                     data.push(array[i+n]);
                         }
                         rowsArray.push({"id" :array[i+cellIndicatorArrayLength-1],"data":data});
             }
             dataAll.rows=rowsArray;
             mygrid.parse(dataAll,"json" );
}
 

 到此，对这个方法的重构告一段落。这次重构的效果是很明显的，但从代码量角度看，删除了20/36，最后剩了仅仅16行代码；其次，它解决了很重要的bug;最后它净化了代码，提供了更好的扩展。所以，这次重构是成功的。

 是的，逻辑之美就是如此之美！曾记得逻辑之美在我脑海中时，还没有《研究之美》这本以XX之美命名的书，随后可能还会陆续出来其他XX之美的书，而我仅仅等待的是《逻辑之美》。