看到这个标题你的脑海中一定会浮现出两本书，一本就是，《重构--改善既有代码设计》 和 《代码整洁之道》 。这确实是两本非常伟大的图书，但是很遗憾里面提供的 code 都是 Java 的版本。《重构--改善既有代码设计》 的第2版提供了 JavaScript 的版本，已经非常方便我们前端同学阅读了，但是在 TypeScrip 如此火热的今天，缺了 TS 的版本，始终觉得是些遗憾，所以老袁打算每天拿出一些时间将一些非常经典的案例，结合老袁十年的经验总结到一块使用 TS 重写，希望能陪伴各位的技术成长之路，我会从大致如下方向跟各位共同分享：

利用npm有效的工具校验代码的坏味道

使用Jest等前端测试工具构筑测试体系

使用TypeScript重新组织你的函数、数据

简化你的函数表达式、函数调用

处理概括关系、重构实战、基于重构的cli工具

更多....

希望你能和我一起完成这段旅程，写出整洁的TypeScript：

什么是重构 ?

简单理解就是不改变软件可观察行为的前提下，改善其内部结构,以提高理解性和降低修改成本。

何时开始我们的重构？

① 重复性工作，既有的代码无法帮助你轻松添加新特性时
② 修补bug时，排查逻辑困难
③ 太多的代码无注释，已然连自己都无法快速理清代码逻辑

1. 这是如下我们要实现的目标任务列表（打✔的为我们已经实践过的）

Add Parameter（添加参数）
Change Bidirectional Association to Unidirectional（将双向关联改为单向关联）
Change Unidirectional Association to Bidirectional（将单向关联改为双向关联）
Change Reference to Value（将引用对象改为值对象）
Change Value to Reference（将值对象改为引用对象）
Collapse Hierarchy（折叠继承体系）
Consolidate Conditional Expression（合并条件表达式）
Consolidate Duplicate Conditional Fragments（合并重复的条件片段）
Convert Procedural Design to Objects（将过程化设计转化为对象设计）
Decompose Conditional（分解条件表达式）
Duplicate Observed Data（复制“被监视数据”）
Encapsulate Collection（封装集合）
Encapsulate Downcast（封装向下转型）
Encapsulate Field（封装字段）
Extract Class（提炼类）
Extract Hierarchy（提炼继承体系）
Extract Interface（提炼接口）
Extract Method（提炼函数）
Extract Subclass（提炼子类）
Extract Superclass（提炼超类）
Form Template Method（塑造模板函数）
Hide Delegate（隐藏“委托关系”）
Hide Method（隐藏函数）
Inline Class（将类内联化）
Inline Method（内联函数）
Inline Temp（内联临时变量）
Introduce Assertion（引入断言）
Introduce Explaining Variable（引入解释性变量）
Introduce Foreign Method（引入外加函数）
Introduce Local Extension（引入本地扩展）
Introduce Null Object（引入Null对象）
Introduce Parameter Object（引入参数对象）
Move Field（搬移字段）
Move Method（搬移函数）
Parameterize Method（令函数携带参数）
Preserve Whole Object（保持对象完整）
Pull Up Constructor Body（构造函数本体上移）
Pull Up Field（字段上移）
Pull Up Method（函数上移）
Push Down Field（字段下移）
Push Down Method（函数下移）
Remove Assignments to Parameters（移除对参数的赋值）
Remove Control Flag（移除控制标记）
Remove Middle Man（移除中间人）
Remove Parameter（移除参数）
Remove Setting Method（移除设值函数）
Rename Method（函数改名）
Replace Array with Object（以对象取代数组）
Replace Conditional with Polymorphism（以多态取代条件表达式）
Replace Constructor with Factory Method（以工厂函数取代构造函数）
Replace Data Value with Object（以对象取代数据值）
Replace Delegation with Inheritance（以继承取代委托)
Replace Error Code with Exception（以异常取代错误码）
Replace Exception with Test（以测试取代异常）
Replace Inheritance with Delegation（以委托取代继承）
Replace Magic Number with Symbolic Constant（以字面常量取代魔法数）
Replace Method with Method Object（以函数对象取代函数）
Replace Nested Conditional with Guard Clauses（以卫语句取代嵌套条件表达式）
Replace Parameter with Explicit Methods（以明确函数取代参数）
Replace Parameter with Methods（以函数取代参数）
Replace Record with Data Class（以数据类取代记录）
Replace Subclass with Fields（以字段取代子类）
Replace Temp with Query（以查询取代临时变量）
Replace Type Code with Class（以类取代类型码）
Replace Type Code with State/Strategy（以State/Strategy取代类型码）
Replace Type Code with Subclasses（以子类取代类型码）
Self Encapsulate Field（自封装字段）
Separate Domain from Presentation（将领域和表述/显示分离）
Separate Query from Modifier（将查询函数和修改函数分离）
Split Temporary Variable（分解临时变量）
Substitute Algorithm（替换算法）
Tease Apart Inheritance（梳理并分解继承体系）

2. Add Parameter（添加参数）

描述🍏：如果一个函数能够不需要任何参数能够解决你的问题（包括使用其他的函数，），这当然是绝佳的。但是在我们日常开发中需要经常为函数添加参数。

动机🍃：所以使用这个重构的动机很简单，你必须添加一个函数，而修改后的函数需要一些过去没有的信息。

// ① 函数参数 (理论上少于等于2个)
function createMenu(title, body, buttonText, cancellable) {
  ...
}
// ② 超过2个参数 使用对象统一传递
interface IMenuConfig {
  title?: string;
  body?: string;
  buttonText?: string;
  cancellable?: boolean;
}
const menuConfig: IMenuConfig = {
  title: 'Foo',
  body: 'Bar',
  buttonText: 'Baz',
  cancellable: true,
};

function createMenu(menuConfig: IMenuConfig) {}

我们上面解决了将多个参数合并为一个，减少了过长的参数（它是代码的坏味道Data Clnmps，坏味道不是翻译的尴尬是坏味道包含如下）,后面也会给大家逐步介绍。

Duplicated Code（重复代码)

Long Method（过长函数）

Large Class（过大的类）

Long Parameter List（过长的参数列）

Divergent Change（发散式变化）等...

function add(...rest: number[]): number;
function add(...rest: string[]): string;
function add(...rest: any[]) {
    let first = rest[0];
    if (typeof first === 'number') {
        return rest.reduce((pre, cur) => pre + cur);
    }
    if (typeof first === 'string') {
        return rest.join('');
    }
}
console.log(add(1, 2))
console.log(add('a', 'b', 'c'));
//不过如上代码我们可以更加简洁的完成它
interface ConfigFn {
  <T>(value: T): void;
}
var getData2: ConfigFn = function <T>(value: T): T {
  return value;
};
getData2<string>('老袁');

当然有关于函数这里我们还有很多其他的重构规则我们后续再慢慢给大家渗透。

3. Change Bidirectional Association to Unidirectional（将双向关联改为单向关联）

描述🐥：两个类之间有双向关联，但其中一个类如今不再需要另一个类的特性。

动机🐈：双向关联很有用，但是也必须为它付出代价，那就是维护双向链接。大量的双向链接很用以造成某个对象已经死亡，但是依然存在堆区造成内存泄漏。此外双向连接之间有了依赖，如果这是两个独立的文件没有经过webpack打包，比如运行在node中，这样就是跨文件的依赖。跨文件的依赖就会造成耦合系统，使得任何一点点像小改动都造成许多无法预知的后果。所以只有真正需要双向关联的时候，才去使用它。

// 打折商品订单类
class Order {
  private _customer: Customer;
  public getCustomer(): Customer {
    return this._customer;
  }
  public setCustomer(customerName: string, customer: Customer): void {
    const { _customer } = this;
    if (_customer) {
      // 假设我们规定一个打折商品只能购买一单 价格实时计算
      customer.friendOrders.delete(customerName);
    } else {
      this._customer = customer;
      customer.friendOrders.set(customerName, this);
    }
  }
  public disCountedPrice(): number {
    return Math.random() * this._customer.getDiscount();
  }
}
class Customer {
  private _orders = new Map<string, Order>();
  public addOrder(orderName: string, order: Order): void {
    order.setCustomer(orderName, this);
  }
  public getDiscount(): number {
    //根据用户等级获取除折扣以外的价格
    return 0.8;
  }
  public getPriceFor(order: Order): number {
    return order.disCountedPrice();
  }
  get friendOrders() {
    return this._orders;
  }
}
const john = new Customer();
const basket = new Order();
john.addOrder('shoes', basket);
const priceShoes = john.getPriceFor(basket);
console.log('①', priceShoes);
john.addOrder('clothes', basket);
const priceClothes = john.getPriceFor(basket);
console.log('②', priceClothes);
console.log('一共消费', priceShoes + priceClothes);

/* ①以上这段的核心是为了计算最后商品的价格
*  ②获取商品的价格我们分为了2步骤 一个是获取用户的VIP级别
*  ③然后获取了商品本身的随机打折数  最终相乘
*  ④其核心代码是addOrder好给Order的_customer赋值 
     其实完全没必要
*/

仔细想想，先有Customer才会有Order，我们完全可以把链接移除。Order获取折扣信息依赖_customer，所以：

//修改Order 然后外部传入customer 将两个类彻底分开
public disCountedPrice(customer: Customer): number {
    return Math.random() * customer.getDiscount();
}
//或者直接修改Customer
public getPriceFor(order: Order): number {
    return order.disCountedPrice(this);
}

最后还有一种暴力的手段，我们可以修改getCustomer主动去寻找Customer的实例。这样就保持了单向，最后我们把setCustomer其实就可以取消了。核心就是去除反向指针。

4. Change Unidirectional Association to Bidirectional（将单向关联改为双向关联）

这个就跟上面👆刚好相反了，也就是说如果两个类之间相互需要制约，必须由某个类控制某个类，就刚好符合将单向关联改为双向关联，那么vue的双向数据绑定的watcher 和 data之间的关系就是刚好最适合不过了。

前端圈最好用的刷题工具

扫码 get 前端圈刷题神器，解锁800+道 有答案和解析的 前端面试真题，全部来自BAT、TMD等一二线互联网公司。

每一次我们不会给大家写过多的重构规则，力求每天用几分钟时间真正去理解了重构。明天见~如果您有什么意见和反馈，欢迎您在下方留言。

作者【老袁】
2020 年 07月 28日