你应该知道的5种TypeScript设计模式

设计模式是可以帮助开发人员解决问题的模板。在本中涉及的模式太多了，而且它们往往针对不同的需求。但是，它们可以被分为三个不同的组：

创新互联是一家集网站建设,渠县企业网站建设,渠县品牌网站建设,网站定制,渠县网站建设报价,网络营销,网络优化,渠县网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

  • 结构模式处理不同组件(或类)之间的关系，并形成新的结构，以提供新的功能。结构模式的例子有Composite、Adapter和Decorator。
  • 行为模式将组件之间的公共行为抽象成一个独立的实体。行为模式的例子有命令、策略和我个人最喜欢的一个:观察者模式。
  • 创建模式 专注于类的实例化，让我们更容易创建新的实体。我说的是工厂方法，单例和抽象工厂。

单例模式

单例模式可能是最著名的设计模式之一。它是一种创建模式，因为它确保无论我们尝试实例化一个类多少次，我们都只有一个可用的实例。

处理数据库连接之类的可以单例模式，因为我们希望一次只处理一个，而不必在每个用户请求时重新连接。

 
 
 
 
    
  
  
  
  
  1. class MyDBConn { 
    2. 
  
  
  
  
  2.   protected static instance: MyDBConn | null = null 
    3. 
  
  
  
  
  3.   private id:number = 0 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.   constructor() { 
    6. 
  
  
  
  
  6.     this.id = Math.random() 
    7. 
  
  
  
  
  7.   } 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.   public getID():number { 
    10. 
  
  
  
  
  10.     return this.id 
    11. 
  
  
  
  
  11.   } 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.   public static getInstance():MyDBConn { 
    14. 
  
  
  
  
  14.     if (!MyDBConn.instance) { 
    15. 
  
  
  
  
  15.       MyDBConn.instance = new MyDBConn() 
    16. 
  
  
  
  
  16.     } 
    17. 
  
  
  
  
  17.     return MyDBConn.instance 
    18. 
  
  
  
  
  18.   } 
    19. 
  
  
  
  
  19. } 
    20. 
  
  
  
  
  20.  
    21. 
  
  
  
  
  21. const connections = [ 
    22. 
  
  
  
  
  22.   MyDBConn.getInstance(), 
    23. 
  
  
  
  
  23.   MyDBConn.getInstance(), 
    24. 
  
  
  
  
  24.   MyDBConn.getInstance(), 
    25. 
  
  
  
  
  25.   MyDBConn.getInstance(), 
    26. 
  
  
  
  
  26.   MyDBConn.getInstance() 
    27. 
  
  
  
  
  27. ] 
    28. 
  
  
  
  
  28.  
    29. 
  
  
  
  
  29. connections.forEach( c => { 
    30. 
  
  
  
  
  30.     console.log(c.getID()) 
    31. 
  
  
  
  
  31. }) 
    32.

现在，虽然不能直接实例化类，但是使用getInstance方法，可以确保不会有多个实例。在上面的示例中，可以看到包装数据库连接的伪类如何从该模式中获益。

这个事例展示了无论我们调用getInstance方法多少次，这个连接总是相同的。

上面的运行结果：

 
 
 
 
    
  
  
  
  
  1. 0.4047087250990713 
    2. 
  
  
  
  
  2. 0.4047087250990713 
    3. 
  
  
  
  
  3. 0.4047087250990713 
    4. 
  
  
  
  
  4. 0.4047087250990713 
    5. 
  
  
  
  
  5. 0.4047087250990713 
    6.

工厂模式

工厂模式是一种创建模式，就像单例模式一样。但是，这个模式并不直接在我们关心的对象上工作，而是只负责管理它的创建。

解释一下:假设我们通过编写代码来模拟移动车辆，车有很多类型，例如汽车、自行车和飞机，移动代码应该封装在每个vehicle类中，但是调用它们的move 方法的代码可以是通用的。

这里的问题是如何处理对象创建?可以有一个具有3个方法的单一creator类，或者一个接收参数的方法。在任何一种情况下，扩展该逻辑以支持创建更多vehices都需要不断增长相同的类。

但是，如果决定使用工厂方法模式，则可以执行以下操作：

现在，创建新对象所需的代码被封装到一个新类中，每个类对应一个车辆类型。这确保了如果将来需要添加车辆，只需要添加一个新类，而不需要修改任何已经存在的东西。

接着来看看，我们如何使用TypeScript来实现这一点：

 
 
 
 
    
  
  
  
  
  1. interface Vehicle { 
    2. 
  
  
  
  
  2.     move(): void 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. class Car implements Vehicle { 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.     public move(): void { 
    8. 
  
  
  
  
  8.         console.log("Moving the car!") 
    9. 
  
  
  
  
  9.     } 
    10. 
  
  
  
  
  10. } 
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12. class Bicycle implements Vehicle { 
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14.     public move(): void { 
    15. 
  
  
  
  
  15.         console.log("Moving the bicycle!") 
    16. 
  
  
  
  
  16.     } 
    17. 
  
  
  
  
  17. } 
    18. 
  
  
  
  
  18.  
    19. 
  
  
  
  
  19. class Plane implements Vehicle { 
    20. 
  
  
  
  
  20.  
    21. 
  
  
  
  
  21.     public move(): void { 
    22. 
  
  
  
  
  22.         console.log("Flying the plane!") 
    23. 
  
  
  
  
  23.     } 
    24. 
  
  
  
  
  24. } 
    25. 
  
  
  
  
  25.  
    26. 
  
  
  
  
  26. // VehicleHandler 是“抽象的”，因为没有人会实例化它instantiate it 
    27. 
  
  
  
  
  27. // 我们要扩展它并实现抽象方法 
    28. 
  
  
  
  
  28. abstract class VehicleHandler { 
    29. 
  
  
  
  
  29.  
    30. 
  
  
  
  
  30.     // 这是真正的处理程序需要实现的方法 
    31. 
  
  
  
  
  31.     public abstract createVehicle(): Vehicle  
    32. 
  
  
  
  
  32.  
    33. 
  
  
  
  
  33.     public moveVehicle(): void { 
    34. 
  
  
  
  
  34.         const myVehicle = this.createVehicle() 
    35. 
  
  
  
  
  35.         myVehicle.move() 
    36. 
  
  
  
  
  36.     } 
    37. 
  
  
  
  
  37. }  
    38. 
  
  
  
  
  38.  
    39. 
  
  
  
  
  39. class PlaneHandler extends VehicleHandler{ 
    40. 
  
  
  
  
  40.  
    41. 
  
  
  
  
  41.     public createVehicle(): Vehicle { 
    42. 
  
  
  
  
  42.         return new Plane() 
    43. 
  
  
  
  
  43.     } 
    44. 
  
  
  
  
  44. } 
    45. 
  
  
  
  
  45.  
    46. 
  
  
  
  
  46. class CarHandler  extends VehicleHandler{ 
    47. 
  
  
  
  
  47.  
    48. 
  
  
  
  
  48.     public createVehicle(): Vehicle { 
    49. 
  
  
  
  
  49.         return new Car() 
    50. 
  
  
  
  
  50.     } 
    51. 
  
  
  
  
  51. } 
    52. 
  
  
  
  
  52.  
    53. 
  
  
  
  
  53. class BicycleHandler  extends VehicleHandler{ 
    54. 
  
  
  
  
  54.  
    55. 
  
  
  
  
  55.     public createVehicle(): Vehicle { 
    56. 
  
  
  
  
  56.         return new Bicycle() 
    57. 
  
  
  
  
  57.     } 
    58. 
  
  
  
  
  58. } 
    59. 
  
  
  
  
  59.  
    60. 
  
  
  
  
  60. /// User code... 
    61. 
  
  
  
  
  61. const planes = new PlaneHandler() 
    62. 
  
  
  
  
  62. const cars = new CarHandler() 
    63. 
  
  
  
  
  63.  
    64. 
  
  
  
  
  64. planes.moveVehicle() 
    65. 
  
  
  
  
  65. cars.moveVehicle() 
    66.

上面的代码很多，但我们可以使用上面的图表来理解它。本质上最后,我们关心的是自定义处理程序,这里称它为处理程序,而不是创造者,因为他们不只是创建的对象,他们也有逻辑,使用它们(moveVehicle方法)。

这个模式的美妙之处在于，如果您你要添加一个新的vehicle类型，所要做的就是添加它的vehicle类和它的处理程序类，而不增加任何其他类的LOC。

观察者模式

在所有的模式,我最喜欢的是观察者模式,因为类型的行为我们可以实现它。

它是如何工作的呢?本质上，该模式表明你拥有一组观察者对象，这些对象将对被观察实体状态的变化做出反应。为了实现这一点，一旦在被观察端接收到一个更改，它就负责通过调用它的一个方法来通知它的观察者。

在实践中，此模式的实现相对简单，让我们快速查看一下代码，然后回顾一下

 
 
 
 
    
  
  
  
  
  1. type InternalState = { 
    2. 
  
  
  
  
  2.   event: String 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. abstract class Observer { 
    6. 
  
  
  
  
  6.   abstract update(state:InternalState): void 
    7. 
  
  
  
  
  7. } 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. abstract class Observable { 
    10. 
  
  
  
  
  10.   protected observers: Observer[] = [] 
    11. 
  
  
  
  
  11.   protected state:InternalState = { event: ""} 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.   public addObserver(o: Observer):void { 
    14. 
  
  
  
  
  14.     this.observers.push(o) 
    15. 
  
  
  
  
  15.   } 
    16. 
  
  
  
  
  16.  
    17. 
  
  
  
  
  17.   protected notify () { 
    18. 
  
  
  
  
  18.     this.observers.forEach(o => o.update(this.state)) 
    19. 
  
  
  
  
  19.   } 
    20. 
  
  
  
  
  20. } 
    21. 
  
  
  
  
  21.  
    22. 
  
  
  
  
  22.  
    23. 
  
  
  
  
  23. class ConsoleLogger extends Observer  { 
    24. 
  
  
  
  
  24.  
    25. 
  
  
  
  
  25.     public update(newState: InternalState) { 
    26. 
  
  
  
  
  26.         console.log("New internal state update: ", newState) 
    27. 
  
  
  
  
  27.     } 
    28. 
  
  
  
  
  28. } 
    29. 
  
  
  
  
  29.  
    30. 
  
  
  
  
  30. class InputElement extends Observable { 
    31. 
  
  
  
  
  31.  
    32. 
  
  
  
  
  32.     public click():void { 
    33. 
  
  
  
  
  33.         this.state = { event: "click" } 
    34. 
  
  
  
  
  34.         this.notify() 
    35. 
  
  
  
  
  35.     } 
    36. 
  
  
  
  
  36.  
    37. 
  
  
  
  
  37. } 
    38. 
  
  
  
  
  38.  
    39. 
  
  
  
  
  39. const input = new InputElement() 
    40. 
  
  
  
  
  40. input.addObserver(new ConsoleLogger()) 
    41. 
  
  
  
  
  41.  
    42. 
  
  
  
  
  42. input.click() 
    43.

正如你所看到的，通过两个抽象类，我们可以定义Observer，该观察者将表示对Observable实体上的更改做出反应的对象。在上面的示例中，我们假设具有一个被单击的InputElement实体(类似于在前端具有HTML输入字段的方式)，以及一个ConsoleLogger，用于记录控制台发生的所有事情。

这种模式的优点在于，它使我们能够了解Observable的内部状态并对其做出反应，而不必弄乱其内部代码。我们可以继续添加执行其他操作的观察者，甚至包括对特定事件做出反应的观察者，然后让它们的代码决定对每个通知执行的操作。

装饰模式

装饰模式试图在运行时向现有对象添加行为。从某种意义上说，我们可以将其视为动态继承，因为即使没有创建新类来添加行为，我们也正在创建具有扩展功能的新对象。

这样考虑：假设我们拥有一个带有move方法的Dog类，现在您想扩展其行为，因为我们想要一只超级狗和一只可以游泳的狗。

通常，我们需要在 Dog 类中添加move 行为，然后以两种方式扩展该类，即SuperDog和SwimmingDog类。但是，如果我们想将两者混合在一起，则必须再次创建一个新类来扩展它们的行为，但是，有更好的方法。

组合让我们可以将自定义行为封装在不同的类中，然后使用该模式通过将原始对象传递给它们的构造函数来创建这些类的新实例。让我们看一下代码：

 
 
 
 
    
  
  
  
  
  1. abstract class Animal { 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.     abstract move(): void 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. abstract class SuperDecorator extends Animal { 
    7. 
  
  
  
  
  7.     protected comp: Animal 
    8. 
  
  
  
  
  8.      
    9. 
  
  
  
  
  9.     constructor(decoratedAnimal: Animal) { 
    10. 
  
  
  
  
  10.         super() 
    11. 
  
  
  
  
  11.         this.comp = decoratedAnimal 
    12. 
  
  
  
  
  12.     } 
    13. 
  
  
  
  
  13.      
    14. 
  
  
  
  
  14.     abstract move(): void 
    15. 
  
  
  
  
  15. } 
    16. 
  
  
  
  
  16.  
    17. 
  
  
  
  
  17. class Dog extends Animal { 
    18. 
  
  
  
  
  18.  
    19. 
  
  
  
  
  19.     public move():void { 
    20. 
  
  
  
  
  20.         console.log("Moving the dog...") 
    21. 
  
  
  
  
  21.     } 
    22. 
  
  
  
  
  22. } 
    23. 
  
  
  
  
  23.  
    24. 
  
  
  
  
  24. class SuperAnimal extends SuperDecorator { 
    25. 
  
  
  
  
  25.  
    26. 
  
  
  
  
  26.     public move():void { 
    27. 
  
  
  
  
  27.         console.log("Starts flying...") 
    28. 
  
  
  
  
  28.         this.comp.move() 
    29. 
  
  
  
  
  29.         console.log("Landing...") 
    30. 
  
  
  
  
  30.     } 
    31. 
  
  
  
  
  31. } 
    32. 
  
  
  
  
  32.  
    33. 
  
  
  
  
  33. class SwimmingAnimal extends SuperDecorator { 
    34. 
  
  
  
  
  34.  
    35. 
  
  
  
  
  35.     public move():void { 
    36. 
  
  
  
  
  36.         console.log("Jumps into the water...") 
    37. 
  
  
  
  
  37.         this.comp.move() 
    38. 
  
  
  
  
  38.     } 
    39. 
  
  
  
  
  39. } 
    40. 
  
  
  
  
  40.  
    41. 
  
  
  
  
  41.  
    42. 
  
  
  
  
  42. const dog = new Dog() 
    43. 
  
  
  
  
  43.  
    44. 
  
  
  
  
  44. console.log("--- Non-decorated attempt: ") 
    45. 
  
  
  
  
  45. dog.move() 
    46. 
  
  
  
  
  46.  
    47. 
  
  
  
  
  47. console.log("--- Flying decorator --- ") 
    48. 
  
  
  
  
  48. const superDog =  new SuperAnimal(dog) 
    49. 
  
  
  
  
  49. superDog.move() 
    50. 
  
  
  
  
  50.  
    51. 
  
  
  
  
  51. console.log("--- Now let's go swimming --- ") 
    52. 
  
  
  
  
  52. const swimmingDog =  new SwimmingAnimal(dog) 
    53. 
  
  
  
  
  53. swimmingDog.move() 
    54.

注意几个细节:

  • 实际上，SuperDecorator类扩展了Animal类，与Dog类扩展了相同的类。这是因为装饰器需要提供与其尝试装饰的类相同的公共接口。
  • SuperDecorator类是abstract ，这意味着并没有使用它，只是使用它来定义构造函数，该构造函数会将原始对象的副本保留在受保护的属性中。公共接口的覆盖是在自定义装饰器内部完成的。
  • SuperAnimal和SwimmingAnimal是实际的装饰器，它们是添加额外行为的装饰器。

进行此设置的好处是，由于所有装饰器也间接扩展了Animal类，因此如果你要将两种行为混合在一起，则可以执行以下操作：

 
 
 
 
    
  
  
  
  
  1. const superSwimmingDog =  new SwimmingAnimal(superDog) 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. superSwimmingDog.move() 
    4.

Composite(组合)

关于Composite模式，其实就是组合模式,又叫部分整体模式，这个模式在我们的生活中也经常使用。

比如编写过前端的页面，肯定使用过

等标签定义一些格式，然后格式之间互相组合，通过一种递归的方式组织成相应的结构，这种方式其实就是组合，将部分的组件镶嵌到整体之中。

关于此模式的有趣之处在于，它不是一个简单的对象组，它可以包含实体或实体组，每个组可以同时包含更多组，这就是我们所说的树。

看一个例子：

  
 
 
 
    
   
  
  
  
  1. interface IProduct { 
    2. 
   
  
  
  
  2.   getName(): string 
    3. 
   
  
  
  
  3.   getPrice(): number 
    4. 
   
  
  
  
  4. } 
    5. 
   
  
  
  
  5.  
    6. 
   
  
  
  
  6. class Product implements IProduct { 
    7. 
   
  
  
  
  7.   private price:number 
    8. 
   
  
  
  
  8.   private name:string 
    9. 
   
  
  
  
  9.  
    10. 
   
  
  
  
  10.   constructor(name:string, price:number) { 
    11. 
   
  
  
  
  11.     this.name = name 
    12. 
   
  
  
  
  12.     this.price = price 
    13. 
   
  
  
  
  13.   } 
    14. 
   
  
  
  
  14.  
    15. 
   
  
  
  
  15.   public getPrice():number { 
    16. 
   
  
  
  
  16.     return this.price 
    17. 
   
  
  
  
  17.   } 
    18. 
   
  
  
  
  18.  
    19. 
   
  
  
  
  19.   public getName(): string { 
    20. 
   
  
  
  
  20.     return this.name 
    21. 
   
  
  
  
  21.   } 
    22. 
   
  
  
  
  22. } 
    23. 
   
  
  
  
  23.  
    24. 
   
  
  
  
  24. class Box implements IProduct { 
    25. 
   
  
  
  
  25.  
    26. 
   
  
  
  
  26.     private products: IProduct[] = [] 
    27. 
   
  
  
  
  27.      
    28. 
   
  
  
  
  28.     contructor() { 
    29. 
   
  
  
  
  29.         this.products = [] 
    30. 
   
  
  
  
  30.     } 
    31. 
   
  
  
  
  31.      
    32. 
   
  
  
  
  32.     public getName(): string { 
    33. 
   
  
  
  
  33.         return "A box with " + this.products.length + " products" 
    34. 
   
  
  
  
  34.     }  
    35. 
   
  
  
  
  35.      
    36. 
   
  
  
  
  36.     add(p: IProduct):void { 
    37. 
   
  
  
  
  37.         console.log("Adding a ", p.getName(), "to the box") 
    38. 
   
  
  
  
  38.         this.products.push(p) 
    39. 
   
  
  
  
  39.     } 
    40. 
   
  
  
  
  40.  
    41. 
   
  
  
  
  41.     getPrice(): number { 
    42. 
   
  
  
  
  42.         return this.products.reduce( (curr: number, b: IProduct) => (curr + b.getPrice()),  0) 
    43. 
   
  
  
  
  43.     } 
    44. 
   
  
  
  
  44. } 
    45. 
   
  
  
  
  45.  
    46. 
   
  
  
  
  46. //Using the code... 
    47. 
   
  
  
  
  47. const box1 = new Box() 
    48. 
   
  
  
  
  48. box1.add(new Product("Bubble gum", 0.5)) 
    49. 
   
  
  
  
  49. box1.add(new Product("Samsung Note 20", 1005)) 
    50. 
   
  
  
  
  50.  
    51. 
   
  
  
  
  51. const box2 = new Box() 
    52. 
   
  
  
  
  52. box2.add( new Product("Samsung TV 20in", 300)) 
    53. 
   
  
  
  
  53. box2.add( new Product("Samsung TV 50in", 800)) 
    54. 
   
  
  
  
  54.  
    55. 
   
  
  
  
  55. box1.add(box2) 
    56. 
   
  
  
  
  56.  
    57. 
   
  
  
  
  57. console.log("Total price: ", box1.getPrice()) 
    58.

在上面的示例中，我们可以将product 放入Box中，也可以将Box放入其他Box中，这是组合的经典示例。因为我们要实现的是获得完整的交付价格，因此需要在大box里添加每个元素的价格(包括每个小box的价格)。

上面运行的结果：

  
 
 
 
    
   
  
  
  
  1. Adding a  Bubble gum to the box 
    2. 
   
  
  
  
  2. Adding a  Samsung Note 20 to the box 
    3. 
   
  
  
  
  3. Adding a  Samsung TV 20in to the box 
    4. 
   
  
  
  
  4. Adding a  Samsung TV 50in to the box 
    5. 
   
  
  
  
  5. Adding a  A box with 2 products to the box 
    6. 
   
  
  
  
  6. Total price:  2105.5 
    7.

因此，在处理遵循同一接口的多个对象时，请考虑使用此模式。通过将复杂性隐藏在单个实体(组合本身)中，您会发现它有助于简化与小组的互动方式。

今天的分享就到这里了，感谢大家的观看，我们下期再见。

作者：Fernando Doglio 译者：前端小智 来源：medium 原文：https://blog.bitsrc.io/design-patterns-in-typescript-e9f84de40449

 本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。

当前名称：你应该知道的5种TypeScript设计模式
分享URL：http://www.shufengxianlan.com/qtweb/news4/306004.html

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

广告

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

猜你还喜欢下面的内容

微信小程序知识

分类信息网

成都微商城　　 　成都h5建站开发　　 　网站解决方案　　 　草坪音箱　　 　商城网站建设　　 　服务器托管　　 　中晴建设　　 　成都响应式网站建设　　 　全网营销　　 　小谭网创广告　　 　江安网站建设　　 　免备案空间腾讯云　　 　大橙子建站　　 　友益建筑机械凿　　 　成都电商解决方案　　 　雅安托管服务器　　 　成都搬家公司　　 　成都做网站　　 　网络推广公司　　 　成都西信机房