【TypeScript】常见的设计模式

设计模式就是软件开发过程中形成的套路和经验总结，熟悉设计模式能够在编程过程中更高效有自信，毕竟是前人印证过的最好的设计，同时也能够更好地掌控项目，方便预估开发时间以及对团队成员进行管理。

通常所提的前端工程化，设计模式才是前端工程化的灵魂。

一、类型分类

可以将设计模式分为三种类型，分别为创建型，结构型，和行为型。

类型	说明
创建型模式	主要解决对象创建什么，由谁创建，何时创建的3w问题，对类的实例化进行了抽象，分离概念和实现，使得系统更加符合单一职责原则。
结构型模式	描述如何将类或者对象组合在一起，形成更大的数据结构，因此也可以分为类结构型和对象结构型。
行为型模型	对不同的对象划分责任和算法的抽象，关注类和对象之间的相互作用，同样也分为类和对象。

二、创建型模式

创建型模式一共有4个，分别为工厂（工厂，工厂方法，抽象工厂合并），建造者，原型，单例。

工厂模式

简而言之，工厂模式就是要替代掉“new操作符”*

new执行步骤：

• 在内存中创建一个新对象
• 让构造函数的this指针指向这个空对象
• 执行构造函数内的操作
• 返回这个新对象

原因：因为有时候创建实例时需要大量的准备工作，而将这些准备工作 全部放在构造函数 中是非常危险的行为，有必要 将 创建实例的逻辑 和 使用实例的逻辑 分开 ，方便以后扩展。

class People {
 
  constructor(des) {
 
    // 出现异步不能使用async await
    // 函数调用时可能还未完成初始化
    get('someUrl').then(data => {
 
      this.name = data.name
      get('someUrl?name=' + this.name).then(data => {
 
        this.age = data.age
      })
    })
    // 非成员函数耦合性变大
    this.des = handleDes(des)
  }
}

使用ts+工厂模式的实现：

class People {
 
  name: string = ''
  age: number = 0
  des: string = ''
  constructor(name: string, age: number, des: string) {
 
    this.name = name
    this.age = age
    this.des = des
  }
}

async function peopleFactory(description:any){
 
  const name = await get('someUrl')
  const age = await get('someUrl?name='+n