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

本文转载自微信公众号「前端万有引力」，前端作者一川。重构重新组织转载本文请联系前端万有引力公众号。有品

重新组织数据

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

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

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. 将引用对象改为值对象

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

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

原始代码：

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版)》

很赞哦!（819）