<p>設計模式是可以幫助開發人員解決問題的範本。在本中涉及的模式太多了，而且它們往往針對不同的需求。但是，它們可以被分成三個不同的組：
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方法，可以確保不會有多個實例。在上面的範例中，可以看到包裝資料庫連接的偽類如何從該模式中獲益。 <p>這個例子展示了無論我們呼叫getInstance方法多少次，這個連接總是相同的。 <p>上面的運作結果：0.4047087250990713 0.4047087250990713 0.4047087250990713 0.4047087250990713 0.4047087250990713
#工廠模式是一種建立模式，就像單例模式一樣。但是，這個模式並不是直接在我們關心的物件上工作，而是只負責管理它的創建。 <p>解釋一下:假設我們透過編寫程式碼來模擬移動車輛，車有很多類型，例如汽車、自行車和飛機，移動程式碼應該封裝在每個vehicle類別中，但是調用它們的move 方法的程式碼可以是通用的。 <p>這裡的問題是如何處理物件創建?可以有一個具有3個方法的單一creator類，或是一個接收參數的方法。在任何一種情況下，擴展該邏輯以支援創建更多vehices都需要不斷增長相同的類別。 <p>但是，如果決定使用工廠方法模式，則可以執行以下操作：<p>
<p>#現在，建立新物件所需的程式碼已封裝到一個新類別中，每個類別對應一個車輛類型。這確保瞭如果將來需要添加車輛，只需要添加一個新類，而不需要修改任何已經存在的東西。 <p>接著來看看，我們如何使用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()vehicle類型，所要做的就是添加它的vehicle類別和它的處理程式類，而不增加任何其他類的LOC。 觀察者模式,因為類型的行為我們可以實現它。 <p>它是如何運作的呢?本質上，該模式表明你擁有一組觀察者對象，這些對象將對被觀察實體狀態的變化做出反應。為了實現這一點，一旦在被觀察端接收到一個更改，它就負責透過呼叫它的一個方法來通知它的觀察者。 <p>在實踐中，此模式的實作相對簡單，讓我們快速查看程式碼，然後回顧一下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，用於記錄控制台發生的所有事情。 <p>這種模式的優點在於，它使我們能夠了解Observable的內部狀態並對其做出反應，而不必弄亂其內部程式碼。我們可以繼續加入執行其他操作的觀察者，甚至包括對特定事件做出反應的觀察者，然後讓它們的程式碼決定對每個通知執行的操作。 move方法的Dog类，现在您想扩展其行为，因为我们想要一只超级狗和一只可以游泳的狗。<p>通常，我们需要在 Dog 类中添加move 行为，然后以两种方式扩展该类，即SuperDog和SwimmingDog类。 但是，如果我们想将两者混合在一起，则必须再次创建一个新类来扩展它们的行为，但是，有更好的方法。<p>组合让我们可以将自定义行为封装在不同的类中，然后使用该模式通过将原始对象传递给它们的构造函数来创建这些类的新实例。 让我们看一下代码：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()SuperDecorator类扩展了Animal类，与Dog类扩展了相同的类。 这是因为装饰器需要提供与其尝试装饰的类相同的公共接口。SuperDecorator类是abstract ，这意味着并没有使用它，只是使用它来定义构造函数，该构造函数会将原始对象的副本保留在受保护的属性中。 公共接口的覆盖是在自定义装饰器内部完成的。SuperAnimal和SwimmingAnimal是实际的装饰器，它们是添加额外行为的装饰器。Animal类，因此如果你要将两种行为混合在一起，则可以执行以下操作：const superSwimmingDog = new SwimmingAnimal(superDog) superSwimmingDog.move()
<p>等标签定义一些格式，然后格式之间互相组合，通过一种递归的方式组织成相应的结构，这种方式其实就是组合，将部分的组件镶嵌到整体之中。<p>关于此模式的有趣之处在于，它不是一个简单的对象组，它可以包含实体或实体组，每个组可以同时包含更多组，这就是我们所说的树。<p>看一个例子：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的价格)。<p>上面运行的结果：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
<p>英文原文地址：https://blog.bitsrc.io/design-patterns-in-typescript-e9f84de40449 <p>作者：Fernando Doglio <p>译者：前端小智<p>更多编程相关知识，请访问：编程视频！！
以上是深入了解TypeScript中的5種設計模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
