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

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

我们提供的服务有：网站制作、网站设计、微信公众号开发、网站优化、网站认证、东宁ssl等。为超过千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的东宁网站制作公司

重新组织数据

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

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

1. 拆分变量

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

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

原始代码：

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

重构代码：

 
 
 
    
  
  
  
  1. const height = 2, width = 3; 
    2. 
  
  
  
  2. const perimeter = 4 * ( height + width); 
    3. 
  
  
  
  3. console.log(perimeter); 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. const area = height * width; 
    6. 
  
  
  
  6. console.log(area); 
    7.

2. 字段改名

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

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

原始代码：

 
 
 
    
  
  
  
  1. class User{ 
    2. 
  
  
  
  2.   constructor(data){ 
    3. 
  
  
  
  3.     this._name = data.name; 
    4. 
  
  
  
  4.     this._age = data.age; 
    5. 
  
  
  
  5.   } 
    6. 
  
  
  
  6.   get name(){ 
    7. 
  
  
  
  7.     return this._name; 
    8. 
  
  
  
  8.   } 
    9. 
  
  
  
  9.   set name(newName){ 
    10. 
  
  
  
  10.     this._name = newName; 
    11. 
  
  
  
  11.   } 
    12. 
  
  
  
  12.   get age(){ 
    13. 
  
  
  
  13.     return this._age; 
    14. 
  
  
  
  14.   } 
    15. 
  
  
  
  15.   set age(newAge){ 
    16. 
  
  
  
  16.     this._age = newAge; 
    17. 
  
  
  
  17.   } 
    18. 
  
  
  
  18. } 
    19. 
  
  
  
  19. const yichuan = new User({name:"yichuan",age:18}); 
    20.

重构代码：

 
 
 
    
  
  
  
  1. class User{ 
    2. 
  
  
  
  2.   constructor(data){ 
    3. 
  
  
  
  3.     this._title = data.title; 
    4. 
  
  
  
  4.     this._age = data.age; 
    5. 
  
  
  
  5.   } 
    6. 
  
  
  
  6.   get title(){ 
    7. 
  
  
  
  7.     return this._title; 
    8. 
  
  
  
  8.   } 
    9. 
  
  
  
  9.   set title(newTitle){ 
    10. 
  
  
  
  10.     this._name = newTitle; 
    11. 
  
  
  
  11.   } 
    12. 
  
  
  
  12.   get age(){ 
    13. 
  
  
  
  13.     return this._age; 
    14. 
  
  
  
  14.   } 
    15. 
  
  
  
  15.   set age(newAge){ 
    16. 
  
  
  
  16.     this._age = newAge; 
    17. 
  
  
  
  17.   } 
    18. 
  
  
  
  18. } 
    19.

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

3. 以查询取代派生变量

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

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

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

 
 
 
    
  
  
  
  1. get discountedTotal(){ 
    2. 
  
  
  
  2.   return this._discountedTotal; 
    3. 
  
  
  
  3. } 
    4. 
  
  
  
  4. set discountedTotal(discount){ 
    5. 
  
  
  
  5.   const old = this._discount; 
    6. 
  
  
  
  6.   this._discount = discount; 
    7. 
  
  
  
  7.   this._discountedTotal += old - discount; 
    8. 
  
  
  
  8. } 
    9.

重构代码：

 
 
 
    
  
  
  
  1. get discountedTotal(){ 
    2. 
  
  
  
  2.   return this._baseTotal - this._discount; 
    3. 
  
  
  
  3. } 
    4. 
  
  
  
  4. set discountedTotal(discount){ 
    5. 
  
  
  
  5.   this._discount = discount; 
    6. 
  
  
  
  6. } 
    7.

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

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

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

原始代码：

 
 
 
    
  
  
  
  1. class Product{ 
    2. 
  
  
  
  2.   applyDiscount(arg){ 
    3. 
  
  
  
  3.     this._price.aount -= arg; 
    4. 
  
  
  
  4.   } 
    5. 
  
  
  
  5. } 
    6.

重构代码：

 
 
 
    
  
  
  
  1. class Product{ 
    2. 
  
  
  
  2.   applyDiscount(arg){ 
    3. 
  
  
  
  3.     this._price = new Money(this._price.amount - arg, this._price.currency) 
    4. 
  
  
  
  4.   } 
    5. 
  
  
  
  5. } 
    6.

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

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

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

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

小结

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

参考文章

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

文章题目：【前端】重构，有品位的代码06──重新组织数据
分享地址：http://www.shufengxianlan.com/qtweb/news2/216552.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

定制网站知识

分类信息网站

传美奇电器　　 　网站排名　　 　重庆服务器托管　　 　成都电信光华数据中心　　 　泸县网站建设　　 　甘孜州博瑞斯　　 　成都网页设计　　 　中国电信成都枢纽中心　　 　成都网络营销　　 　明安消防器材　　 　支点广告　　 　SF双层罐　　 　成都塑料加工　　 　成都网站建设　　 　成都网站建设　　 　成都众诚伟业　　 　卖友情链接　　 　重庆水土机房托管　　 　铁科精智测控　　 　网站运维托管