[[352789]]

設(shè)計(jì)模式是可以幫助開(kāi)發(fā)人員解決問(wèn)題的模板。在本中涉及的模式太多了，而且它們往往針對(duì)不同的需求。但是，它們可以被分為三個(gè)不同的組：

• 結(jié)構(gòu)模式處理不同組件(或類(lèi))之間的關(guān)系，并形成新的結(jié)構(gòu)，以提供新的功能。結(jié)構(gòu)模式的例子有Composite、Adapter和Decorator。
• 行為模式將組件之間的公共行為抽象成一個(gè)獨(dú)立的實(shí)體。行為模式的例子有命令、策略和我個(gè)人最喜歡的一個(gè):觀察者模式。
• 創(chuàng)建模式 專注于類(lèi)的實(shí)例化，讓我們更容易創(chuàng)建新的實(shí)體。我說(shuō)的是工廠方法，單例和抽象工廠。

單例模式

單例模式可能是最著名的設(shè)計(jì)模式之一。它是一種創(chuàng)建模式，因?yàn)樗_保無(wú)論我們嘗試實(shí)例化一個(gè)類(lèi)多少次，我們都只有一個(gè)可用的實(shí)例。

處理數(shù)據(jù)庫(kù)連接之類(lèi)的可以單例模式，因?yàn)槲覀兿Ｍ淮沃惶幚硪粋€(gè)，而不必在每個(gè)用戶請(qǐng)求時(shí)重新連接。

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()) 
}) 

現(xiàn)在，雖然不能直接實(shí)例化類(lèi)，但是使用getInstance方法，可以確保不會(huì)有多個(gè)實(shí)例。在上面的示例中，可以看到包裝數(shù)據(jù)庫(kù)連接的偽類(lèi)如何從該模式中獲益。

這個(gè)事例展示了無(wú)論我們調(diào)用getInstance方法多少次，這個(gè)連接總是相同的。

上面的運(yùn)行結(jié)果：

0.4047087250990713 
0.4047087250990713 
0.4047087250990713 
0.4047087250990713 
0.4047087250990713 

工廠模式

工廠模式是一種創(chuàng)建模式，就像單例模式一樣。但是，這個(gè)模式并不直接在我們關(guān)心的對(duì)象上工作，而是只負(fù)責(zé)管理它的創(chuàng)建。

解釋一下:假設(shè)我們通過(guò)編寫(xiě)代碼來(lái)模擬移動(dòng)車(chē)輛，車(chē)有很多類(lèi)型，例如汽車(chē)、自行車(chē)和飛機(jī)，移動(dòng)代碼應(yīng)該封裝在每個(gè)vehicle類(lèi)中，但是調(diào)用它們的move 方法的代碼可以是通用的。

這里的問(wèn)題是如何處理對(duì)象創(chuàng)建?可以有一個(gè)具有3個(gè)方法的單一creator類(lèi)，或者一個(gè)接收參數(shù)的方法。在任何一種情況下，擴(kuò)展該邏輯以支持創(chuàng)建更多vehices都需要不斷增長(zhǎng)相同的類(lèi)。

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

現(xiàn)在，創(chuàng)建新對(duì)象所需的代碼被封裝到一個(gè)新類(lèi)中，每個(gè)類(lèi)對(duì)應(yīng)一個(gè)車(chē)輛類(lèi)型。這確保了如果將來(lái)需要添加車(chē)輛，只需要添加一個(gè)新類(lèi)，而不需要修改任何已經(jīng)存在的東西。

接著來(lái)看看，我們?nèi)绾问褂肨ypeScript來(lái)實(shí)現(xiàn)這一點(diǎn)：

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 是“抽象的”，因?yàn)闆](méi)有人會(huì)實(shí)例化它instantiate it 
// 我們要擴(kuò)展它并實(shí)現(xiàn)抽象方法 
abstract class VehicleHandler { 
 
    // 這是真正的處理程序需要實(shí)現(xiàn)的方法 
    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() 

上面的代碼很多，但我們可以使用上面的圖表來(lái)理解它。本質(zhì)上最后,我們關(guān)心的是自定義處理程序,這里稱它為處理程序,而不是創(chuàng)造者,因?yàn)樗麄儾恢皇莿?chuàng)建的對(duì)象,他們也有邏輯,使用它們(moveVehicle方法)。

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

觀察者模式

在所有的模式,我最喜歡的是觀察者模式,因?yàn)轭?lèi)型的行為我們可以實(shí)現(xiàn)它。

它是如何工作的呢?本質(zhì)上，該模式表明你擁有一組觀察者對(duì)象，這些對(duì)象將對(duì)被觀察實(shí)體狀態(tài)的變化做出反應(yīng)。為了實(shí)現(xiàn)這一點(diǎn)，一旦在被觀察端接收到一個(gè)更改，它就負(fù)責(zé)通過(guò)調(diào)用它的一個(gè)方法來(lái)通知它的觀察者。

在實(shí)踐中，此模式的實(shí)現(xiàn)相對(duì)簡(jiǎn)單，讓我們快速查看一下代碼，然后回顧一下

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() 

正如你所看到的，通過(guò)兩個(gè)抽象類(lèi)，我們可以定義Observer，該觀察者將表示對(duì)Observable實(shí)體上的更改做出反應(yīng)的對(duì)象。在上面的示例中，我們假設(shè)具有一個(gè)被單擊的InputElement實(shí)體(類(lèi)似于在前端具有HTML輸入字段的方式)，以及一個(gè)ConsoleLogger，用于記錄控制臺(tái)發(fā)生的所有事情。

這種模式的優(yōu)點(diǎn)在于，它使我們能夠了解Observable的內(nèi)部狀態(tài)并對(duì)其做出反應(yīng)，而不必弄亂其內(nèi)部代碼。我們可以繼續(xù)添加執(zhí)行其他操作的觀察者，甚至包括對(duì)特定事件做出反應(yīng)的觀察者，然后讓它們的代碼決定對(duì)每個(gè)通知執(zhí)行的操作。

裝飾模式

裝飾模式試圖在運(yùn)行時(shí)向現(xiàn)有對(duì)象添加行為。從某種意義上說(shuō)，我們可以將其視為動(dòng)態(tài)繼承，因?yàn)榧词箾](méi)有創(chuàng)建新類(lèi)來(lái)添加行為，我們也正在創(chuàng)建具有擴(kuò)展功能的新對(duì)象。

這樣考慮：假設(shè)我們擁有一個(gè)帶有move方法的Dog類(lèi)，現(xiàn)在您想擴(kuò)展其行為，因?yàn)槲覀兿胍恢怀?jí)狗和一只可以游泳的狗。

通常，我們需要在 Dog 類(lèi)中添加move 行為，然后以兩種方式擴(kuò)展該類(lèi)，即SuperDog和SwimmingDog類(lèi)。但是，如果我們想將兩者混合在一起，則必須再次創(chuàng)建一個(gè)新類(lèi)來(lái)擴(kuò)展它們的行為，但是，有更好的方法。

組合讓我們可以將自定義行為封裝在不同的類(lèi)中，然后使用該模式通過(guò)將原始對(duì)象傳遞給它們的構(gòu)造函數(shù)來(lái)創(chuàng)建這些類(lèi)的新實(shí)例。讓我們看一下代碼：

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's go swimming --- ") 
const swimmingDog =  new SwimmingAnimal(dog) 
swimmingDog.move() 

注意幾個(gè)細(xì)節(jié):

• 實(shí)際上，SuperDecorator類(lèi)擴(kuò)展了Animal類(lèi)，與Dog類(lèi)擴(kuò)展了相同的類(lèi)。這是因?yàn)檠b飾器需要提供與其嘗試裝飾的類(lèi)相同的公共接口。
• SuperDecorator類(lèi)是abstract ，這意味著并沒(méi)有使用它，只是使用它來(lái)定義構(gòu)造函數(shù)，該構(gòu)造函數(shù)會(huì)將原始對(duì)象的副本保留在受保護(hù)的屬性中。公共接口的覆蓋是在自定義裝飾器內(nèi)部完成的。
• SuperAnimal和SwimmingAnimal是實(shí)際的裝飾器，它們是添加額外行為的裝飾器。

進(jìn)行此設(shè)置的好處是，由于所有裝飾器也間接擴(kuò)展了Animal類(lèi)，因此如果你要將兩種行為混合在一起，則可以執(zhí)行以下操作：

const superSwimmingDog =  new SwimmingAnimal(superDog) 
 
superSwimmingDog.move() 

Composite(組合)

關(guān)于Composite模式，其實(shí)就是組合模式,又叫部分整體模式，這個(gè)模式在我們的生活中也經(jīng)常使用。

比如編寫(xiě)過(guò)前端的頁(yè)面，肯定使用過(guò)

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()) 

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 

 本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。