【前端】重构，有品位的代码 06── 重新组织数据

写在前面

数据结构在程序中扮演着重要角色，那么在进行代码编写时，同样需要选择合适的数据结构，对其进行组织重构。

前情回顾：

• 《重构，有品位的代码 01──走上重构之道》
• 《重构，有品位的代码 02──构建测试体系》
• 《重构，有品位的代码 03──常用重构手法》
• 《重构，有品位的代码 04──封装》
• 《重构，有品位的代码 05──搬移特性》

重新组织数据

常用的重新组织数据方式有：

• 拆分变量
• 字段改名
• 以查询取代派生变量
• 将引用对象改为值对象
• 将值对象改为引用对象

1. 拆分变量

变量在代码中有着不同的用途，而有些用途毁导致临时变量被多次赋值，比如：循环语句中的变量以及结果收集变量（通过整个函数运算构成的值）。当然，还有许多变量只被赋值一次，用于保存冗长代码的运算结果，如果其承担多个责任（被赋值多次），那么就意味着需要对其进行拆分为多个单独责任的变量。

其实，就是在待分解变量的声明及其初次被赋值处，修改其名称，尽量将其变量声明设置为不可修改（其实就是使用const）。以该变量的第二次赋值动作为界，修改此时对该变量的所有引用，让其引用新变量。

原始代码：

let height = 2, width = 3;
let temp = 4 * ( height + width);
console.log(temp);

temp = height * width;
console.log(temp);

重构代码：

const height = 2, width = 3;
const perimeter = 4 * ( height + width);
console.log(perimeter);

const area = height * width;
console.log(area);

2. 字段改名

对于程序中广泛使用的记录结构，数据结构有助于阅读理解代码逻辑，其字段的命名显得格外重要。数据结构作用无非就是让代码更加简洁有条理，但事实上随着时间的推移，我们对代码的理解更加透彻，此时就会对于某些字段根据作用和业务进行改名。

来看看如何对字段进行改名，首先判断当前记录的作用域的范围，当其作用域小时可以直接修改所有该字段的代码。当然如果作用域范围大时，可以先对记录进行封装，在对象内部对私有字段进行改名，并对应调整内部访问该字段的函数。

原始代码：

class User{
  constructor(data){
    this._name = data.name;
    this._age = data.age;
  }
  get name(){
    return this._name;
  }
  set name(newName){
    this._name = newName;
  }
  get age(){
    return this._age;
  }
  set age(newAge){
    this._age = newAge;
  }
}
const yichuan = new User({name:"yichuan",age:18});

重构代码：

class User{
  constructor(data){
    this._title = data.title;
    this._age = data.age;
  }
  get title(){
    return this._title;
  }
  set title(newTitle){
    this._name = newTitle;
  }
  get age(){
    return this._age;
  }
  set age(newAge){
    this._age = newAge;
  }
}

是不是很简单，就是对应的改变字段名字而已。

3. 以查询取代派生变量

要知道数据可变时软件犯错的源头，对数据的修改常导致代码各部分耦合，即在某处进行修改后，却对另外一处造成意想不到的灾难。当然，完全消灭可变数据这是不现实的，所以应该将可变数据的作用域缩小到可控制范围内。

计算能够清晰地表达数据的含义，能够最大化避免源数据修改时忘更新派生变量的情况。有些变量很容易随时被计算，如果能够将其消除此变量，那么也就朝着消除数据可变性更进一步。如果计算的源数据是不可变的，也可以强制计算得到的结果是不可变的，这样就不必消除计算得到的派生变量。因此，可以根据源数据生成新数据结构的变换操作保持不变，即使已经将其替换为计算操作。

看看具体例子，其原始代码如下：

get discountedTotal(){
  return this._discountedTotal;
}
set discountedTotal(discount){
  const old = this._discount;
  this._discount = discount;
  this._discountedTotal += old - discount;
}

重构代码：

get discountedTotal(){
  return this._baseTotal - this._discount;
}
set discountedTotal(discount){
  this._discount = discount;
}

4. 将引用对象改为值对象

在将一个对象嵌入到另一个对象时，位于内部的这个对象被称为引用对象，亦可称为值对象。当然两者最明显差异在于如何更新内部对象的属性：如果将内部对象视为引用对象，在更新其属性时可以保留原对象不动，只更新内部对象的属性；如果将内部对象视为值对象，可以替换整个内部对象，对新对象可以设置新的属性值，

在实际操作中，得先检查重构目标是否是不可变对象，或者是否可修改不可变对象，再逐步去除所有设置函数。提供一个基于值的相等性判断函数，在其中使用对象的字段。

原始代码：

class Product{
  applyDiscount(arg){
    this._price.aount -= arg;
  }
}

重构代码：

class Product{
  applyDiscount(arg){
    this._price = new Money(this._price.amount - arg, this._price.currency)
  }
}

5. 将值对象改为引用对象

在数据结构中有可能包含多个记录，这些记录都关联到同个逻辑数据结构。同份数据复制多次可能造成困扰，因为会导致内存占用问题，会导致性能问题。如果共享数据需要更新，可以将多份数据副本变成单一引用，可以将数据修改反映到变化中。

在为相关对象创建一个仓库，确保构造函数可以找到关联对象的正确实例，修改宿主对象的构造函数，令其从仓库中获取关联对象。

// 原始代码
let customer = new Customer(data);
// 重构代码
let customer = customerRespository.get(data.id);

小结

在本文中，主要介绍了如何重新组织数据，可以将代码中的数据结构进行改善。

参考文章

《重构──改善既有代码的设计（第2版）》

写在最后

我是前端小菜鸡，感谢大家的阅读，我将继续和大家分享更多优秀的文章，此文参考了大量书籍和文章，如果有错误和纰漏，希望能给予指正。

更多最新文章敬请关注笔者掘金账号一川萤火和公众号前端万有引力。