深入了解TypeScript中的5種設計模式-js教程-PHP中文網

單例模式

工廠模式

觀察者模式

装饰模式

Composite(组合)

首頁

web前端

js教程

深入了解TypeScript中的5種設計模式

青灯夜游

Jun 03, 2021 am 10:53 AM

javascript typescript 設計模式

這篇文章帶大家深入了解5 種 TypeScript設計模式。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

設計模式是可以幫助開發人員解決問題的範本。在本中涉及的模式太多了，而且它們往往針對不同的需求。但是，它們可以被分成三個不同的組：

#結構模式處理不同組件(或類別)之間的關係，並形成新的結構，以提供新的功能。結構模式的範例有Composite、Adapter、Decorator。
行為模式將元件之間的公共行為抽象化成一個獨立的實體。行為模式的例子有命令、策略和我個人最喜歡的一個:觀察者模式。
建立模式專注於類別的實例化，讓我們更容易建立新的實體。我說的是工廠方法，單例和抽象工廠。

單例模式

單例模式可能是最著名的設計模式之一。它是一種創建模式，因為它確保無論我們嘗試實例化一個類別多少次，我們都只有一個可用的實例。

處理資料庫連線之類的可以單例模式，因為我們希望一次只處理一個，而不必在每個使用者要求時重新連線。

class MyDBConn {
  protected static instance: MyDBConn | null = null
  private id:number = 0

  constructor() {
    this.id = Math.random()
  }

  public getID():number {
    return this.id
  }

  public static getInstance():MyDBConn {
    if (!MyDBConn.instance) {
      MyDBConn.instance = new MyDBConn()
    }
    return MyDBConn.instance
  }
}

const connections = [
  MyDBConn.getInstance(),
  MyDBConn.getInstance(),
  MyDBConn.getInstance(),
  MyDBConn.getInstance(),
  MyDBConn.getInstance()
]

connections.forEach( c => {
    console.log(c.getID())
})

登入後複製

現在，雖然不能直接實例化類，但是使用getInstance方法，可以確保不會有多個實例。在上面的範例中，可以看到包裝資料庫連接的偽類如何從該模式中獲益。

這個例子展示了無論我們呼叫getInstance方法多少次，這個連接總是相同的。

上面的運作結果：

0.4047087250990713
0.4047087250990713
0.4047087250990713
0.4047087250990713
0.4047087250990713

登入後複製

工廠模式

#工廠模式是一種建立模式，就像單例模式一樣。但是，這個模式並不是直接在我們關心的物件上工作，而是只負責管理它的創建。

解釋一下:假設我們透過編寫程式碼來模擬移動車輛，車有很多類型，例如汽車、自行車和飛機，移動程式碼應該封裝在每個vehicle類別中，但是調用它們的move 方法的程式碼可以是通用的。

這裡的問題是如何處理物件創建?可以有一個具有3個方法的單一creator類，或是一個接收參數的方法。在任何一種情況下，擴展該邏輯以支援創建更多vehices都需要不斷增長相同的類別。

但是，如果決定使用工廠方法模式，則可以執行以下操作：

#現在，建立新物件所需的程式碼已封裝到一個新類別中，每個類別對應一個車輛類型。這確保瞭如果將來需要添加車輛，只需要添加一個新類，而不需要修改任何已經存在的東西。

接著來看看，我們如何使用TypeScript來實現這一點：

interface Vehicle {
    move(): void
}

class Car implements Vehicle {

    public move(): void {
        console.log("Moving the car!")
    }
}

class Bicycle implements Vehicle {

    public move(): void {
        console.log("Moving the bicycle!")
    }
}

class Plane implements Vehicle {

    public move(): void {
        console.log("Flying the plane!")
    }
}

// VehicleHandler 是“抽象的”，因为没有人会实例化它instantiate it
// 我们要扩展它并实现抽象方法
abstract class VehicleHandler {

    // 这是真正的处理程序需要实现的方法
    public abstract createVehicle(): Vehicle 

    public moveVehicle(): void {
        const myVehicle = this.createVehicle()
        myVehicle.move()
    }
} 

class PlaneHandler extends VehicleHandler{

    public createVehicle(): Vehicle {
        return new Plane()
    }
}

class CarHandler  extends VehicleHandler{

    public createVehicle(): Vehicle {
        return new Car()
    }
}

class BicycleHandler  extends VehicleHandler{

    public createVehicle(): Vehicle {
        return new Bicycle()
    }
}

/// User code...
const planes = new PlaneHandler()
const cars = new CarHandler()

planes.moveVehicle()
cars.moveVehicle()

登入後複製

上面的程式碼很多，但我們可以使用上面的圖表來理解它。本質上最後,我們關心的是自訂處理程序,這裡稱它為處理程序,而不是創造者,因為他們不只是創建的對象,他們也有邏輯,使用它們(moveVehicle方法)。

這個模式的美妙之處在於，如果您你要添加一個新的vehicle類型，所要做的就是添加它的vehicle類別和它的處理程式類，而不增加任何其他類的LOC。

觀察者模式

在所有的模式,我最喜歡的是觀察者模式,因為類型的行為我們可以實現它。

它是如何運作的呢?本質上，該模式表明你擁有一組觀察者對象，這些對象將對被觀察實體狀態的變化做出反應。為了實現這一點，一旦在被觀察端接收到一個更改，它就負責透過呼叫它的一個方法來通知它的觀察者。

在實踐中，此模式的實作相對簡單，讓我們快速查看程式碼，然後回顧一下

type InternalState = {
  event: String
}

abstract class Observer {
  abstract update(state:InternalState): void
}

abstract class Observable {
  protected observers: Observer[] = []
  protected state:InternalState = { event: ""}

  public addObserver(o: Observer):void {
    this.observers.push(o)
  }

  protected notify () {
    this.observers.forEach(o => o.update(this.state))
  }
}


class ConsoleLogger extends Observer  {

    public update(newState: InternalState) {
        console.log("New internal state update: ", newState)
    }
}

class InputElement extends Observable {

    public click():void {
        this.state = { event: "click" }
        this.notify()
    }

}

const input = new InputElement()
input.addObserver(new ConsoleLogger())

input.click()

登入後複製

正如你所看到的，透過兩個抽象類，我們可以定義Observer，該觀察者將表示對Observable實體上的變更做出反應的物件。在上面的範例中，我們假設具有一個被點擊的InputElement實體（類似於在前端具有HTML輸入欄位的方式），以及一個ConsoleLogger，用於記錄控制台發生的所有事情。

這種模式的優點在於，它使我們能夠了解Observable的內部狀態並對其做出反應，而不必弄亂其內部程式碼。我們可以繼續加入執行其他操作的觀察者，甚至包括對特定事件做出反應的觀察者，然後讓它們的程式碼決定對每個通知執行的操作。

装饰模式

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

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

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

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

abstract class Animal {

    abstract move(): void
}

abstract class SuperDecorator extends Animal {
    protected comp: Animal
    
    constructor(decoratedAnimal: Animal) {
        super()
        this.comp = decoratedAnimal
    }
    
    abstract move(): void
}

class Dog extends Animal {

    public move():void {
        console.log("Moving the dog...")
    }
}

class SuperAnimal extends SuperDecorator {

    public move():void {
        console.log("Starts flying...")
        this.comp.move()
        console.log("Landing...")
    }
}

class SwimmingAnimal extends SuperDecorator {

    public move():void {
        console.log("Jumps into the water...")
        this.comp.move()
    }
}


const dog = new Dog()

console.log("--- Non-decorated attempt: ")
dog.move()

console.log("--- Flying decorator --- ")
const superDog =  new SuperAnimal(dog)
superDog.move()

console.log("--- Now let&#39;s go swimming --- ")
const swimmingDog =  new SwimmingAnimal(dog)
swimmingDog.move()

登入後複製

注意几个细节:

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

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

const superSwimmingDog =  new SwimmingAnimal(superDog)

superSwimmingDog.move()

登入後複製

Composite(组合)

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

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

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

看一个例子：

interface IProduct {
  getName(): string
  getPrice(): number
}

class Product implements IProduct {
  private price:number
  private name:string

  constructor(name:string, price:number) {
    this.name = name
    this.price = price
  }

  public getPrice():number {
    return this.price
  }

  public getName(): string {
    return this.name
  }
}

class Box implements IProduct {

    private products: IProduct[] = []
    
    contructor() {
        this.products = []
    }
    
    public getName(): string {
        return "A box with " + this.products.length + " products"
    } 
    
    add(p: IProduct):void {
        console.log("Adding a ", p.getName(), "to the box")
        this.products.push(p)
    }

    getPrice(): number {
        return this.products.reduce( (curr: number, b: IProduct) => (curr + b.getPrice()),  0)
    }
}

//Using the code...
const box1 = new Box()
box1.add(new Product("Bubble gum", 0.5))
box1.add(new Product("Samsung Note 20", 1005))

const box2 = new Box()
box2.add( new Product("Samsung TV 20in", 300))
box2.add( new Product("Samsung TV 50in", 800))

box1.add(box2)

console.log("Total price: ", box1.getPrice())

登入後複製

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

上面运行的结果：

Adding a  Bubble gum to the box
Adding a  Samsung Note 20 to the box
Adding a  Samsung TV 20in to the box
Adding a  Samsung TV 50in to the box
Adding a  A box with 2 products to the box
Total price:  2105.5

登入後複製

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

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