- 当前位置：首页 >域名 >【前端】重构，有品位的代码 06── 重新组织数据
【前端】重构，有品位的代码 06── 重新组织数据
发布时间：2025-11-05 07:38:07 来源：创站工坊 作者：IT科技类资讯
本文转载自微信公众号「前端万有引力」，前端作者一川。重构重新组织转载本文请联系前端万有引力公众号。有品
重新组织数据
常用的代码重新组织数据方式有：
拆分变量 字段改名 以查询取代派生变量 将引用对象改为值对象 将值对象改为引用对象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版)》
- Copyright © 2025 Powered by 【前端】重构，有品位的代码 06── 重新组织数据,创站工坊 滇ICP备2023006006号-44sitemap