【第1725期】浅析Typescript设计模式

前言

离开手机的三天，还挺不错的。今日早读文章由@DD菜分享。

正文从这开始～～

设计模式就是软件开发过程中形成的套路，就如同你在玩lol中的“正方形打野”，“四一分推”，又或者篮球运动中的“二夹一”，“高位单打”一样，属于经验的总结。

熟悉设计模式有什么好处呢？

• 让你在编程过程中更有自信，使用经过无数前人印证过的最好的设计，自然底气十足

• 提升编程效率，避免开发过程中的犹豫

• 更能掌控项目，方便预估开发时间，方便对团队成员进行管理

由于设计模式和软件开发的语言，平台都没有关系，因此，前端工程师对设计模式也是有需求的。

设计模式是对人类工程历史总结，而不单单只是软件工程。

现在大家谈的前端工程化，如果脱离设计模式，只能算徒有其表，设计模式才是工程化的灵魂。当然，既然是经验和历史总结，有时候并不需要系统地进行学习，口口相传也是可以的，但是单独系统地讲解设计模式，就是要将“公共知识”转变为“共有知识”，戳破皇帝的新衣，让大家真正能言之有物，交流通畅。

类型分类

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

创建型模式主要解决对象创建什么，由谁创建，何时创建的3w问题，对类的实例化进行了抽象，分离概念和实现，使得系统更加符合单一职责原则。

结构型模式描述如何将类或者对象组合在一起，形成更大的数据结构，因此也可以分为类结构型和对象结构型。

行为型模型对不同的对象划分责任和算法的抽象，关注类和对象之间的相互作用，同样也分为类和对象。

可以看到三种类型的模式正好解决了编程中的数据结构从哪里来？如何组合？如何交流？的问题。

创建型模式

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

工厂模式

重要程度：⭐⭐⭐⭐⭐ 难度：⭐ 命名建议：xxxFactory，FactoryOfxxx

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

为什么需要替代new操作符？

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

举个例子：

1. class People {

2. constructor(des) {

3. // 出现异步不能使用async await

4. // 函数调用时可能还未完成初始化

5. get('someUrl').then(data => {

6. this.name = data.name

7. get('someUrl?name=' + this.name).then(data => {

8. this.age = data.age

9. })

10. })

11. // 非成员函数耦合性变大

12. this.des = handleDes(des)

13. }

14. }

而使用Typescript，配合工厂模式，实现如下：

1. // 还真别说，形式上好看的代码，质量一般都比较高

2. class People {

3. name: string = ''

4. age: number = 0

5. des: string = ''

6. constructor(name: string, age: number, des: string) {

7. this.name = name

8. this.age = age

9. this.des = des

10. }

11. }

12. async function peopleFactory(description:any){

13. const name = await get('someUrl')

14. const age = await get('someUrl?name='+name)

15. const des = handle(description)

16. return new People(name,age,des)

17. }

这样的封装，能清楚地分离对象的创建和使用。同时，如果之后的类的定义发生了改变，可以直接修改People，创建类的准备数据发生了改变，则修改工厂函数。

但是，选择工厂模式的原因是因为构造函数足够复杂或者对象的创建面临巨大的不确定性，只需要传入变量即可构造的情况下，用工厂函数实际上是得不偿失的。

几乎所有的设计模式都会带来代码可读性下降的风险，因此需要找到代码可读性降低和可维护性，稳定性之间的平衡！

你也可以用函数根据参数返回相应的工厂函数，又或者用一个类集中管理工厂函数来处理复杂度。

建造者模式

重要程度：⭐⭐⭐⭐ 难度：⭐⭐ 命名建议：xxxBuilder

建造者模式用于直接构建复杂对象，比如上例中的构造函数参数，如果采用一个结构表示：

1. constructor(peopleConfig:any) {

2. this.name = peopleConfig.name

3. this.age = peopleConfig.age

4. this.des = peopleConfig.des

5. }

那么有必要将这个人对象的构建单独封装起来：

1. class PeopleConfigBuilder{

2. name: string = ''

3. age: number = 0

4. des: string = ''

5. async buildName(){

6. this.name = await get('someUrl')

7. }

8. async buildAge(){

9. await get('someUrl?name='+this.name)

10. }

11. async buildDes(description: any){

12. this.des = handleDes(description)

13. }

14. }

15. class People {

16. name: string = ''

17. age: number = 0

18. des: string = ''

19. constructor(peopleConfig: PeopleCofigBuilder) {

20. this.name = peopleConfig.name

21. this.age = peopleConfig.age

22. this.des = peopleConfig.des

23. }

24. }

25. async function peopleFactory(description:any){

26. const builder = new PeopleConfigBuilder()

27. builder.buildName()

28. builder.buildAge()

29. builder.buildDes()

30. return new People(builder)

31. }

当然，仅仅三个属性的对象，远远没有达到复杂对象的程度，因此，只有在对象十分复杂的时候，才需要应用到建造者模式。

原型模式

重要程度：⭐⭐ 难度：⭐ 命名建议：xxxPrototype

创建新对象时是基于一个对象的拷贝，而不是重新实例化一个类。

举例说明，比如上例中的peopleConfig，其实peopleConfig应该是有固定模板的：

1. function peopleConfigPrototype (){

2. return {

3. name: '',

4. age: 0,

5. des: ''

6. }

7. }

这样每次返回的都是新的对象，也可以相当于是对象的拷贝，但是如果直接拷贝对象，应该怎么写呢？

1. const peopleConfigPrototype = {

2. name: '',

3. age: 0,

4. des: ''

5. }

6. const peopleConfig = Object.create(peopleConfigPrototype)

7. // 采用Object.create方法，当前对象将被复制到peopleConfig的__proto__上

还有另一种方式进行对象拷贝，但是会丢掉对象中的函数：

1. const peopleConfig = JSON.parse(JSON.stringfy(peopleConfigProtytype))

注意JSON操作会阻塞线程，导致性能急剧下降，一般不考虑这种方式。

单例模式

重要程度：⭐⭐⭐⭐⭐ 难度：⭐⭐ 命名建议：xxxSingle，xxxSingleton，xxxUnum

单例模式的目的是限制一个类只能被实例化一次，防止多次实例化。其中，根据类被实例化的时间，又被分为懒汉单例和饿汉单例。懒汉单例是指在第一次调用实例的时候实例化，饿汉单例是指在类加载的时候就实例化。

1. /* 懒汉单例 */

2. class PeopleSingle{

3. // 静态成员instance

4. static instance = null

5. // 私有构造函数

6. private constructor(){ }

7. public static getInstance(){

8. if(PeopleSingle.instance === null){

9. PeopleSingle.instance = new PeopleSingle()

10. }

11. return PeopleSingle.instance

12. }

13. }

14. PeopleSingle.getInstance()

15. /* 饿汉单例 */

16. class PeopleSingle{

17. static instance = new PeopleSingle()

18. private constructor(){ }

19. }

20. PeopleSingle.instance

四种创建模式都有其使用场景，需要针对使用场景进行组合，才能写出高质量的代码。

结构型模式

结构型模式一共有7种：适配器，桥接，组合，装饰，外观，享元，代理

适配器模式

重要程度：⭐⭐⭐⭐ 难度：⭐⭐⭐ 命名建议：xxxAdapter，xxxWraper

想想你的转接头，实际上就是被适配对象（adaptee）上套上一层封装，将其接口与目标对象（target）相匹配，所以适配器又叫wraper（包皮）。

比如，有一个目标类UsbC：

1. class UsbC{

2. slowCharge(){

3. console.log('slow charging')

4. }

5. superCharge(){

6. console.log('super charging')

7. }

8. }

有一个被适配目标MicroUsb：

1. class MicroUsb{

2. slowCharge(){

3. console.log('slow charging')

4. }

5. }

所以adapter是如此：

1. // 精髓在implements target上

2. class MicroToCAdapter implements UsbC{

3. microUsb: MicroUsb

4. constructor(microUsb: MicroUsb){

5. this.microUsb = microUsb

6. }

7. slowCharge(){

8. this.microUsb.slowCharge()

9. }

10. superCharge(){

11. console.log('cannot super charge, slow charging')

12. }

13. }

14. // 这样就可以直接

15. new MicroTOCAdapter(new MicroUsb()).superCharge()

适配器模式对多个不同接口的匹配非常有效，实际情况中没有必要完全使用类来封装，一个函数也可以搞定。

桥接模式

重要程度：⭐⭐⭐⭐ 难度：⭐⭐⭐ 命名建议：xxxBridge，xxx（具体实现）

桥接模式的主要目的，是将抽象与实现解耦，使得二者可以独立地进行变化，以应对不断更细的需求。

其实通俗地来说，就是将所有概念想象成“灵魂——肉体”，凡是能用这个概念代入的，都可以用桥接模式重构。

比如汽车这个概念和颜色这个概念，可以将颜色作为汽车的成员变量，但是当颜色变得更加复杂时，比如渐变，模糊，图案等属性加入，不得不将其解耦，桥接模式就很重要了。

我们先定义抽象类Car和Color（Ts的抽象类功能对于实现之一模式非常重要）：

1. abstract class Color {

2. color: string

3. abstract draw(): void

4. }

5. abstract class Car {

6. color: Color

7. abstract setColor(color: Color): void

8. }

再定义其实例：

1. class Red extends Color {

2. constructor() {

3. super()

4. }

5. draw() {

6. this.color = 'red'

7. }

8. }

9. class Van extends Car {

10. constructor() {

11. super()

12. }

13. setColor(color: Color) {

14. this.color = color

15. }

16. }

抽象类和实现是解耦的，这时候我们如果要利用所有的类，就需要一个桥接类：

1. class PaintingVanBridge {

2. van: Car

3. red: Color

4. constructor() {

5. this.red = new Red()

6. this.red.draw()

7. this.van = new Van()

8. this.van.setColor(this.red)

9. }

10. }

桥接模式会增加大量代码，所以一定要在使用之前对功能模块有一个恰当的评估！

装饰模式

重要程度：⭐⭐⭐⭐⭐ 难度：⭐ 命名建议：xxxDecorator，xxx（具体实现）

装饰模式是在现有类或对象的基础上，添加一些功能，使得类和对象具有新的表现。

还是之前的Car和Color的问题，可以直接继承Car，添加颜色，这是一个装饰模式：

1. class Car {

2. name: string

3. constructor(name: string) {

4. this.name = name

5. }

6. }

7. class Benz extends Car {

8. color: string

9. constructor(name: string, color: string) {

10. super(name)

11. this.color = color

12. }

13. }

但是采用继承的方式是静态的，而且会导致在继承复用的过程中耦合，比如Car2继承Car，在创建新的子类时错把Car2作为父类，结果就很容易出错了。

为了解决这个问题，可以采用Ts的装饰器特性：

1. function colorDecorator<T extends { new(...args: any[]): {} }>(color: string) {

2. return function (constructor: T) {

3. return class extends constructor {

4. name = 'shit'

5. color = color

6. }

7. }

8. }

9. @colorDecorator<Car>('red')

10. class Car {

11. name: string

12. constructor(name: string) {

13. this.name = name

14. }

15. }

装饰器会拦截Car的构造函数，生成一个继承自Car的新的类，这样更加灵活（但是注意这个过程只发生在构造函数阶段）。

外观模式

重要程度：⭐⭐⭐⭐⭐ 难度：⭐ 命名建议：xxx（具体实现）

简单一句话总结：“封装复杂，接口简单”，为所有的子系统提供一致的接口，比如轮胎，方向盘和车。

1. class Tyre{

2. name: string

3. constructor(name: string){

4. this.name = name

5. }

6. }

7. class Steering{

8. turnRight(){}

9. turnLeft(){}

10. }

11. interface CarConfig{

12. tyreName: string

13. ifTurnRight: boolean

14. }

15. class Car{

16. tyre:Tyre

17. steering:Steering

18. constructor(carConfig: CarConfig){

19. this.tyre = new Tyre(carConfig.name)

20. this.steering = new Steering()

21. if(carConfig.ifTurnRight){

22. this.steering.turnRight

23. }

24. }

25. }

可以活用Typescript的接口功能实现这一模式。

享元模式

重要程度：⭐ 难度：⭐⭐ 命名建议：xxx（具体实现）

享元模式避免重新创建对象，其实只要有缓存对象的意思，并且共用一个对象实例，就是享元模式。

比如需要对一个Car的实例进行展示（可以搭配工厂模式）：

1. class Car{

2. name: string

3. color: string

4. changeColor(color: string){

5. this.color = color

6. }

7. changeName(name: string){

8. this.name = name

9. }

10. }

11. class CarFactory{

12. static car: Car

13. static getCar():Car{

14. if(CarFactory.car === null){

15. CarFactory.car = new Car()

16. }

17. return CarFactory.car

18. }

19. }

20. CarFactory.getCar().changeColor('red')

注意，由于是使用的同一个引用，因此会存在修改的问题。

代理模式

重要程度：⭐⭐⭐⭐ 难度：⭐ 命名建议：xxxProxy

对接口进行一定程度的隐藏，用于封装复杂类。

比如Car有很多属性，我们只需要一个简单的版本：

1. class Car{

2. a: number = 1

3. b: number = 2

4. c: number = 3

5. d: number = 4

6. name: string = 'name'

7. test(){

8. console.log('this is test')

9. }

10. }

11. class CarProxy{

12. private car: Car

13. name: number

14. constructor(){

15. if(this.car === null){

16. this.car = new Car

17. }

18. this.name = this.car.name

19. }

20. test(){

21. this.car.test()

22. }

23. }

行为型模式

行为型模式一共有5种：命令，中介者，观察者，状态，策略

命令模式

重要程度：⭐⭐⭐⭐⭐ 难度：⭐⭐ 命名建议：xxxCommand

命令模式的主要目的是让请求者和响应者解耦，并集中管理。

比如大家常用的请求，其实可以这样封装：

1. function requestCommand(command: string){

2. let method = 'get'

3. let queryString = ''

4. let data = null

5. let url = ''

6. const commandArr = command.split(' ')

7. url = commandArr.find(el=>el.indexOf('http'))

8. const methods = commandArr.filter(el=>el[0]==='-')

9. methods[0].replace('-','')

10. method = methods[0]

11. const query = commandArr.filter(el=>el.indexOf('='))

12. if(query.length > 0){

13. queryString = '?'

14. query.forEach(el=>{

15. queryString += el + '&'

16. })

17. }

18. const dataQuery = commandArr.filter(el=>el[0]==='{')

19. // 对json的判断还不够细致

20. data = JSON.parse(dataQuery)

21. if(method === 'get' || method === 'delete'){

22. return axios[method](url+query)

23. }

24. return axios[method](url+query,data)

25. }

26. requestCommand('--get https://www.baidu.com name=1 test=2')

27. requestCommand('--post https://www.baidu.com {"name"=1,"test":2}')

注意命令模式需要提供详尽的文档，并且尽可能集中管理。

中介模式

重要程度：⭐⭐⭐⭐⭐ 难度：⭐⭐⭐⭐ 命名建议：xxxCotroller，xxxMiddleWare，xxx(具体实现)

全权负责两个模块之间的通讯，比如MVC，MVVM就是非常典型的中介模式。

中介模式，桥接模式，代理模式的区别是：

代理模式一对一，只能代理特定类和对象，是对其的扩展或是约束。

桥接模式一对多，是对类或对象成员或属性的扩展。

中介模式多对多，全权承包所有两个概念间的关系。

比如4s店，车，和买家之间的关系：

1. class Car{

2. name: string = 'Benz'

3. }

4. class Buyer{

5. name: string = 'Sam'

6. buy(car: Car){

7. console.log(`${this.name}购买了${car.name}`)

8. }

9. }

10. class FourSShop{

11. constructor(){

12. const benz = new Car()

13. const sam = new Buyer()

14. sam.buy(benz)

15. }

16. }

可以想象中介模式是一个立体的概念，可以理解成是两个概念发生关系的地点。

观察者模式

重要程度：⭐⭐⭐⭐⭐ 难度：⭐⭐⭐ 命名建议：xxxObserver，xxxEventHandler

观察者模式的目的是为了“检测变更”，既然要检测变更，自然需要记录之前的信息：

1. class Observer{

2. states: string[] = []

3. update(state: string){

4. this.states.push(state)

5. }

6. }

7. class People{

8. state: string = ''

9. observer: Observer

10. // 可以用getter setter优化

11. setState(newState: string){

12. if(this.state !== newState){

13. this.state = newState

14. this.notify(this.state)

15. }

16. }

17. notify(state: string){

18. if(this.observer !== null){

19. this.observer.update(state)

20. }

21. }

22. setObserver(observer: Observer){

23. this.observer = observer

24. }

25. }

26. const observer = new Observer()

27. const people = new People().serObserver(observer)

28. people.setState('shit')

29. console.log(observer.state)

可以把观察者模式看成是“记录事件”，这对于理解观察者模式和状态模式区别很有帮助。

实际上前端很多事件处理，就是基于观察者模式的，在上例中的update中的state，就是事件名称，js的事件循环会轮流处理states的状态变化。

状态模式

重要程度：⭐⭐⭐⭐⭐ 难度：⭐⭐⭐ 命名建议：xxxState

与观察者模式相对，表示的是“记录状态”，只要状态变更，表现即不同，这是设计数据驱动的基础。

1. class State{

2. tmp: string

3. set store(state: string){

4. if(this.tmp !== state){

5. // do something

6. this.tmp = state

7. }

8. }

9. get store(): string{

10. return this.tmp

11. }

12. }

13. class People{

14. state: State

15. constructor(state: State){

16. this.state = state

17. }

18. }

19. const state = new State()

20. const people = new People(state)

21. state.store = 1

22. console.log(people.state.store)

当然，如果一个数据接口既能记录事件，又能记录状态，可以么？

这就是传说中的响应式数据流，也就是大家平时使用的ReactiveX。

策略模式

重要程度：⭐⭐⭐ 难度：⭐⭐⭐⭐ 命名建议：xxxStratege

策略模式表示动态地修改行为，而行为有时候是一系列方法和对象的组合，与命令模式的区别也在这里。

比如从中国到罗马，可以如此封装：

1. class Location{

2. position: string

3. constructor(poosition: string){

4. this.position = position

5. }

6. }

7. class Stratege{

8. locations: Location [] = []

9. constructor(...locations){

10. this.locations = locations

11. console.log('路线经过了')

12. this.locations.forEach(el=>{

13. console.log(el.position+',')

14. })

15. }

16. }

17. class Move{

18. start: Location

19. end: Location

20. stratege: Stratege

21. constructor(){

22. this.start = new Location('1 1')

23. this.end = new Location('0 0')

24. const sea = new Location('0 1')

25. const land = new Location('1 0')

26. this.stratege = new Stratege(this.start,sea,this.end)

27. }

28. }

设计模式根植于面向对象思想，也就是任何实现都要区分概念（类）和实例（对象），也就是要分清楚白马和马，这样才能竟可能减轻扩展和团队协作的负担。

但是任何东西有利就有弊，扬长避短才是我们应该在意的方向。

关于本文 作者：@DD菜 原文：https://zhuanlan.zhihu.com/p/43283016

为你推荐