簡單工廠問題

簡單工廠中我們通過引數來回傳不同的產品物件，如果管理的物件過多，這個工廠函式會比較龐大，且當我們需要增加一個新的產品時，需要修改這個工廠方法，違反開閉原則（對拓展開放，對修改關閉），

為了解決簡單工廠模式的問題，出現了工廠方法模式，

解決簡單工廠思路

簡單工廠類圖關系類似如下：

如上圖當我們需要增加一個產品時，我們需要修改create 方法增加相關判斷的邏輯，這不符合開閉原則，

假如一個工廠只負責他自己的產品，那么新增產品也只是新增一個工廠以及對應的產品，那么簡單工廠的問題是不是也解決了，

總結：將物件的創建與實體化延遲到子類，這樣的工廠設計就符合“開閉原則”了，擴展時不必去修改原來的代碼，

工廠方法模式

如上圖當我們增加一個產品時，只需要增加一個工廠（實作抽象類），然后在各自的工廠回傳自己需要的產品即可；

工廠方法由4個要素組成：

抽象工廠 AbstractFactory：這個是工廠方法模式的核心，定義用來生產對應產品的方法，是具體工廠必須實作的介面或者必須繼承的父類，通常使用中它由抽象類或者介面來實作，
具體工廠 Factory：被應用程式呼叫以創建具體產品的物件，含有和具體業務邏輯有關的代碼，
抽象產品 AbstractProduct：把產品共有的特征抽象，通常使用中它由抽象類或者介面來實作，
具體產品 Product：具體工廠所創建的產品（物件），

如果只是接觸了js，可能對抽象不太了解，其實抽象只是一種思考的問題的方式，

抽象的定義是從眾多的事物中抽取出共同的、本質性的特征，而舍棄其非本質的特征的程序，

簡單的理解其實就是共有的特征、特性，比如我們要規范人這個物件具有的特點，就用一個介面或者抽象類宣告一些共有的屬性、方法，具體的子類在實作這個介面或者抽象類，這樣子類也有這些屬性、方法，

這樣做的好處就是約束子類，保證子類都有這些屬性、方法，不會存在亂七八糟的物件，這也符合我們大腦作業方式，

ts模擬工廠方法模式

??工廠方法是將實際創建物件的作業推遲到子類中，這樣核心類就變成了抽象類，但是在JavaScript中很難像傳統面向物件那樣去實作創建抽象類，所以在JavaScript中我們只需要參考它的核心思想即可，我們可以將工廠方法看作是一個實體化物件的工廠類，雖然ES6也沒有實作abstract，但是我們可以使用new.target來模擬出抽象類，new.target指向直接被new執行的建構式，我們對new.target進行判斷，如果指向了該類則拋出錯誤來使得該類成為抽象類，

ts 擴展了js，所以這里我用ts 來模擬

/*
工廠方法是簡單工廠的優化版本，在之前把生成具體產品的實體邏輯都寫在了工廠方法中，
導致增加一個產品，這個工廠方法需要修改，
所以工廠方法主要是把這一部分功能獨立出來了，一個工廠負責一個產品
工廠方法核心結構有四個角色
  1、抽象工廠
  2、具體工廠
  3、抽象產品
  4、具體產品
因為js不支持沒有抽象類這里用ts 代替，只要符合核心思想即可
*/
// 抽象工廠
abstract class CardFactor{
  abstract getCardInstance(name:string, time:string):Card
}
// 抽象產品
abstract class Card {
  carName: string;
  time: string;
  abstract getCarDesc():void
}

// 具體產品-BydCar
class BydCar extends Card {
  constructor (name, time) {
    super()
    this.carName = name
    this.time = time
  }
  runCarName () {
    console.log(this.carName)
  }
  getCarDesc () {
    console.log(`我是${this.carName}，生產于:${this.time}`)
  }
}
// 具體產品-JeepCar
class JeepCar extends Card {
  constructor (name, time) {
    super()
    this.carName = name
    this.time = time
  }
  runCarName () {
    console.log(this.carName)
  }
  getCarDesc () {
    console.log(`我是${this.carName}，生產于:${this.time}`)
  }
}
// 具體產品-BenzCar
class BenzCar extends Card {
  carName: string
  time: string
  constructor (name, time) {
    super()
    this.carName = name
    this.time = time
  }
  runCarName () {
    console.log(this.carName)
  }
  getCarDesc () {
    console.log(`我是${this.carName}，生產于:${this.time}`)
  }
}

// 具體的工廠-BydCarFactory
class BydCarFactory extends CardFactor {
  getCardInstance (name, time) {
    return new BydCar(name, time)
  }
}
// 具體的工廠-JeepCarFactory
class JeepCarFactory extends CardFactor{
  getCardInstance (name, time) {
    return new JeepCar(name, time)
  }
}
// 具體的工廠-BenzCarFactory
class BenzCarFactory extends CardFactor{
  getCardInstance (name, time) {
    return new BenzCar(name, time)
  }
}
// test 直接使用具體的工廠
const bydCar = new BydCarFactory().getCardInstance('byd 汽車', '2022-08-20')
const jeepCar = new JeepCarFactory().getCardInstance('jeep 汽車', '2022-08-21')
const benzCar = new BenzCarFactory().getCardInstance('benz 汽車', '2022-08-22')


bydCar.runCarName()
bydCar.getCarDesc()

jeepCar.runCarName()
jeepCar.getCarDesc()

benzCar.runCarName()
benzCar.getCarDesc()

如果我們現在需要增加一種車型，那我們只需增加對應的工廠，跟產品類即可，我們對原有的工廠不會造成任何影響 所謂的“對拓展開放，對修改封閉”就這么圓滿實作了，

工廠方法缺陷

??在工廠方法模式中，我們使用一個工廠創建一個產品，一個具體工廠對應一個具體產品，但有時候我們需要一個工廠能夠提供多個產品物件，而不是單一的物件，這個時候我們就需要使用抽象工廠模式，

??上面代碼中我們的比亞迪工廠只是生產一種產品，現實是一個工廠大概率是要生產很多種不同的產品，如比亞迪有漢dmi、dmp、唐suv等車型，這種一個工廠需要多種產品的時候，按照工廠方法的思路，我們需要寫很多個這種工廠類，這也非常繁瑣，

抽象工廠模式

??我們需要的是一個工廠可以生產多種不同的產品物件，按照設計模式的思路把變化的抽出來封裝，變的是一個工廠可以支持多個產品物件，不變的依舊是在工廠中拿到產品物件，按照工廠方法的思路，只需要在抽象工廠中增加創建對應的產品即可，以之前汽車的例子把工廠方法改成抽象工廠，只要把抽象工廠中增加對應的獲取產品，修改之后現在比亞迪工廠支持默認車型，漢車型，suv車型；

/*
抽象工廠：一個工廠可以生產多種不同的產品，它思路跟工廠方法基本一致，
抽象工廠核心結構有四個角色
  1、抽象工廠
  2、具體工廠
  3、抽象產品
  4、具體產品
因為js不支持沒有抽象類這里用ts 代替，只要符合核心思想即可
*/
// 抽象工廠
abstract class CardFactor{
  // 默認的車型
  abstract getCardInstance(name:string, time:string):Card
  // 漢車型
  abstract getCardHanDmiInstance(name:string, time:string):Card
  // suv 車型
  abstract getCardSuvInstance(name:string, time:string):Card
}
// 抽象產品，同理：這里也可以把產品進一步抽象，如漢的抽象產品，suv的抽象產品，這里不在調整
abstract class Card {
  carName: string;
  time: string;
  abstract getCarDesc():void
}

// 具體產品-BydCar
class BydCar extends Card {
  constructor (name, time) {
    super()
    this.carName = name
    this.time = time
  }
  runCarName () {
    console.log(this.carName)
  }
  getCarDesc () {
    console.log(`我是${this.carName}，生產于:${this.time}`)
  }
}

// 具體產品-BydHanCar
class BydHanCar extends Card {
  name = '中大型轎車漢'
  desc = '這是來自比亞迪的漢'
  constructor () {
    super()
  }
  runCarName () {
    console.log(this.carName)
  }
  getCarDesc () {
    console.log(`我是${this.carName}，生產于:${this.time}`)
  }
}
// 具體產品-BydSuvCar
class BydSuvCar extends Card {
  name = 'suv'
  desc = '這是來自比亞迪的suv'
  constructor () {
    super()
  }
  runCarName () {
    console.log(this.carName)
  }
  getCarDesc () {
    console.log(`我是${this.carName}，生產于:${this.time}`)
  }
}
// 具體的工廠-BydCarFactory
class BydCarFactory extends CardFactor {
  // 生產默認的byd 車型
  getCardInstance (name, time) {
    return new BydCar(name, time)
  }
  // 生產byd漢車型
  getCardHanDmiInstance () {
    return new BydHanCar()
  }
  // 生產byd suv車型
  getCardSuvInstance () {
    return new BydSuvCar()
  }
}

// test 直接使用具體的工廠
const bydCarFactory = new BydCarFactory()
// 現在這個工廠具備生產三種車的產品了
const bydCar = bydCarFactory.getCardInstance('默認車型', '2023-3-7');
const hanCar = bydCarFactory.getCardHanDmiInstance();
const suvCar = bydCarFactory.getCardSuvInstance();

?抽象工廠模式與工廠方法模式區別在于，工廠方法模式針對的是一個產品等級結構，而抽象工廠模式則需要面對多個產品等級結構，一個工廠等級結構可以負責多個不同產品等級結構中的產品物件的創建，

?抽象工廠模式同工廠方法模式一樣，也是由4 個要素構成，但抽象工廠中方法個數不同，抽象產品的個數也不同，

AbstractFactory：抽象工廠
ConcreteFactory：具體工廠
AbstractProduct：抽象產品
Product：具體產品

這種管理多個產品結構的抽象類，就是抽象工廠模式，讓一個工廠具備管理多個產品結構，

抽象工廠模式相對于工廠方法模式來說，工廠方法模式是針對一個產品系列的，而抽象工廠模式是針對多個產品系列的，即工廠方法模式是一個產品系列一個工廠類，而抽象工廠模式是多個產品系列一個工廠類，

定義：提供一個介面，用于創建相關或依賴物件的家族，而不需要明確指定具體類，

工廠方法與抽象工廠

抽象工廠模式與工廠方法模式區別在于，工廠方法模式針對的是一個產品等級結構，而抽象工廠模式則需要面對多個產品等級結構，一個工廠結構可以負責多個不同產品等級結構中的產品物件的創建，

（1）工廠方法只有一個抽象產品類和一個抽象工廠類，可以派生出多個具體產品類和具體工廠類，每個具體工廠類只能創建一個具體產品類的實體，

（2）抽象工廠模式擁有多個抽象產品類（產品族）和一個抽象工廠類，每個抽象產品類可以派生出多個具體產品類；抽象工廠類也可以派生出多個具體工廠類，同時每個具體工廠類可以創建多個具體產品類的實體，

小結

工廠方法是一個工廠只生產一種產品，類似極端情況下的抽象工廠模式（即只生產一種產品的抽象工廠模式）
抽象工廠是一個工廠可以生產多種同類的產品（產品族）

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546115.html

標籤：其他

上一篇：從0搭建Vue3組件庫(五): 如何使用Vite打包組件庫

下一篇：CSS漸進增強方案

創建型：工廠模式-工廠方法、抽象工廠