TypeScript設(shè)計(jì)模式有哪些

這篇文章主要講解了“TypeScript設(shè)計(jì)模式有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“TypeScript設(shè)計(jì)模式有哪些”吧！

成都創(chuàng)新互聯(lián)是一家專注于做網(wǎng)站、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),銅山網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:銅山等地區(qū)。銅山做網(wǎng)站價(jià)格咨詢:13518219792

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

  • 結(jié)構(gòu)模式處理不同組件(或類)之間的關(guān)系，并形成新的結(jié)構(gòu)，以提供新的功能。結(jié)構(gòu)模式的例子有Composite、Adapter和Decorator。

  • 行為模式將組件之間的公共行為抽象成一個(gè)獨(dú)立的實(shí)體。行為模式的例子有命令、策略和我個(gè)人最喜歡的一個(gè):觀察者模式。

  • 創(chuàng)建模式 專注于類的實(shí)例化，讓我們更容易創(chuàng)建新的實(shí)體。我說的是工廠方法，單例和抽象工廠。

單例模式

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

處理數(shù)據(jù)庫(kù)連接之類的可以單例模式，因?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í)例化類，但是使用getInstance方法，可以確保不會(huì)有多個(gè)實(shí)例。在上面的示例中，可以看到包裝數(shù)據(jù)庫(kù)連接的偽類如何從該模式中獲益。

這個(gè)事例展示了無論我們調(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è)我們通過編寫代碼來模擬移動(dòng)車輛，車有很多類型，例如汽車、自行車和飛機(jī)，移動(dòng)代碼應(yīng)該封裝在每個(gè)vehicle類中，但是調(diào)用它們的move  方法的代碼可以是通用的。

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

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

TypeScript設(shè)計(jì)模式有哪些

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

接著來看看，我們?nèi)绾问褂肨ypeScript來實(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)闆]有人會(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()

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

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

觀察者模式

在所有的模式,我最喜歡的是觀察者模式,因?yàn)轭愋偷男袨槲覀兛梢詫?shí)現(xiàn)它。

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

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

正如你所看到的，通過兩個(gè)抽象類，我們可以定義Observer，該觀察者將表示對(duì)Observable實(shí)體上的更改做出反應(yīng)的對(duì)象。在上面的示例中，我們假設(shè)具有一個(gè)被單擊的InputElement實(shí)體(類似于在前端具有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ì)象添加行為。從某種意義上說，我們可以將其視為動(dòng)態(tài)繼承，因?yàn)榧词箾]有創(chuàng)建新類來添加行為，我們也正在創(chuàng)建具有擴(kuò)展功能的新對(duì)象。

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

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

組合讓我們可以將自定義行為封裝在不同的類中，然后使用該模式通過將原始對(duì)象傳遞給它們的構(gòu)造函數(shù)來創(chuàng)建這些類的新實(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類擴(kuò)展了Animal類，與Dog類擴(kuò)展了相同的類。這是因?yàn)檠b飾器需要提供與其嘗試裝飾的類相同的公共接口。

  • SuperDecorator類是abstract  ，這意味著并沒有使用它，只是使用它來定義構(gòu)造函數(shù)，該構(gòu)造函數(shù)會(huì)將原始對(duì)象的副本保留在受保護(hù)的屬性中。公共接口的覆蓋是在自定義裝飾器內(nèi)部完成的。

  • SuperAnimal和SwimmingAnimal是實(shí)際的裝飾器，它們是添加額外行為的裝飾器。

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

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

Composite(組合)

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

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

等標(biāo)簽定義一些格式，然后格式之間互相組合，通過一種遞歸的方式組織成相應(yīng)的結(jié)構(gòu)，這種方式其實(shí)就是組合，將部分的組件鑲嵌到整體之中。

關(guān)于此模式的有趣之處在于，它不是一個(gè)簡(jiǎn)單的對(duì)象組，它可以包含實(shí)體或?qū)嶓w組，每個(gè)組可以同時(shí)包含更多組，這就是我們所說的樹。

看一個(gè)例子：

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中，這是組合的經(jīng)典示例。因?yàn)槲覀円獙?shí)現(xiàn)的是獲得完整的交付價(jià)格，因此需要在大box里添加每個(gè)元素的價(jià)格(包括每個(gè)小box的價(jià)格)。

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

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

因此，在處理遵循同一接口的多個(gè)對(duì)象時(shí)，請(qǐng)考慮使用此模式。通過將復(fù)雜性隱藏在單個(gè)實(shí)體(組合本身)中，您會(huì)發(fā)現(xiàn)它有助于簡(jiǎn)化與小組的互動(dòng)方式。

感謝各位的閱讀，以上就是“TypeScript設(shè)計(jì)模式有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)TypeScript設(shè)計(jì)模式有哪些這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

分享名稱：TypeScript設(shè)計(jì)模式有哪些
當(dāng)前路徑：http://muchs.cn/article20/gecjjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、Google、小程序開發(fā)、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司