代码重构实例之数据聚集

敏捷开发强调，要经常重构代码。在开发过程中，往往是开发和重构交替进行。短暂的重构，可以使得后续的开发维护更加容易。我觉得，代码重构可以分为逻辑重构和数据结构重构。数据结构的重构往往需要对代码进行多处改动；但是，数据结构的重构也可以为后续的开发维护带来更大的便利。这里就是一个数据结构重构的例子。

这是以前的一次代码重构经历，今天想起了，就记下来，帮助自己记忆。当然，既然是重构，总得承认自己写的第一版丑陋的代码。

为了方便描述，采用javascript来进行说明。

故事是这样的。刚开始，任务是画一些方框，并且用线将其连接起来，而且方框的大小都一样。本着代码应该越简单越好的原则，这里就只需要用一个数组记录每个方框的位置就可以了。然后遍历数组，画出方框就可以。

var positions = [];
positions.forEach(function(p) {
  drawRect(p); 
});

可是，接下来任务变了，需要在每个方框中间显示一个名字。好，那我们不改动原来代码的基础上，再加一个数组来记录每个方框的名字就可以，只是画方框的函数需要添加一个新的参数，方框的名字。似乎还可以。

var positions = [];
var names = [];
for (var i = 0; i < positions.length; i++) {
  drawRect(positions[i], names[i]);
}

等等，如果这里positions和names长度不一样怎么办？所以得加上判断

var positions = [];
var names = [];

if (positions.length != names.length) {
  return;
}

for (var i = 0; i < positions.length; i++) {
  drawRect(positions[i], names[i]);
}

接下来，任务又变了。方框有几种不同的类型，不同的类型要有不同的画法。还是如法炮制？可是，假如还有处理方框的其他函数，岂不是每个函数都要改？而且，随着代码越来越复杂，这种改动也会越来越多，改动也就越来越难。

那怎么办呢？其实这些数据之间是相互关联的。方框的名字，位置，类型，其实都是方框的一个属性。既然如此，我们就定义一个方框类，包括所有的这些属性就可以了。

var rects = [
  {“name”: “”, “position”: []}
];

rects.forEach(function(r) {
  drawRect(r);
});

接下来，任务又发生了各种变化，比如，我们需要给每个方框画个图片，所以需要记录图片地址；我们需要删除方框，所以需要记录方框的句柄。这时候就容易了，修改方框这个类的定义就好了。而所有对方框进行处理的函数的参数都不需要进行修改。

最后，这样把相关的数据聚集起来，另外一个好处是使得程序更容易理解，因此开发中出错的概率更低，修改也更容易。