導(dǎo)出財(cái)務(wù)版HTML文件

. 介紹

工廠模式（Factory Pattern），根據(jù)不同的名稱輸入返回不同類的實(shí)例，一般用來創(chuàng)建同一類對象。工廠模式的主要思想是將對象的創(chuàng)建與對象的實(shí)現(xiàn)分離。

2. 生活中的示例?

• 我們?nèi)?KFC 購買漢堡，只需直接點(diǎn)餐、取餐，不用自己親手做
• KFC 要「封裝」做漢堡的工作，做好直接給購買者

在類似場景中，這些例子有以下特點(diǎn)：

• 訪問者只需要知道產(chǎn)品名，就可以從工廠獲得對應(yīng)實(shí)例。
• 訪問者不關(guān)心實(shí)例創(chuàng)建過程。

3. 分類?

工廠模式分為簡單工廠模式、工廠方法模式、抽象工廠模式。

4. 簡單工廠模式?

簡單工廠模式是由一個工廠對象決定創(chuàng)建出哪一種產(chǎn)品類的實(shí)例

簡單工廠模式包含如下角色：

• Factory：工廠角色 工廠角色負(fù)責(zé)實(shí)現(xiàn)創(chuàng)建所有實(shí)例的內(nèi)部邏輯
• Product：抽象產(chǎn)品角色 抽象產(chǎn)品角色是所創(chuàng)建的所有對象的父類，負(fù)責(zé)描述所有實(shí)例所共有的公共接口
• ConcreteProduct：具體產(chǎn)品角色 具體產(chǎn)品角色是創(chuàng)建目標(biāo)，所有創(chuàng)建的對象都充當(dāng)這個角色的某個具體類的實(shí)例。

4.1 實(shí)現(xiàn)?

類圖： AmericanoCoffee、LatteCoffee和CappuccinoCoffee都是繼承Coffee

代碼

abstract class Coffee {
   constructor(public name: string) {

   }
}
class AmericanoCoffee extends Coffee {
   constructor(public name: string) {
       super(name);
   }
}
class LatteCoffee extends Coffee {
   constructor(public name: string) {
       super(name);
   }
}
class CappuccinoCoffee extends Coffee {
   constructor(public name: string) {
       super(name);
   }
}

class Café {
   static order(name: string) {
       switch (name) {
           case 'Americano':
               return new AmericanoCoffee('美式咖啡');
           case 'Latte':
               return new LatteCoffee('拿鐵咖啡');
           case 'Cappuccino':
               return new LatteCoffee('卡布奇諾');
           default:
               return null;
       }
   }
}
console.log(Café.order('Americano'));
console.log(Café.order('Latte'));
console.log(Café.order('Cappuccino'));

4.2 前端應(yīng)用場景?

4.2.1 jQuery?

jQuery

class jQuery{
    constructor(selector){
        let elements = Array.from(document.querySelectorAll(selector));
        let length = elements?elements.length:0;
        for(let i=0;i<length;i++){
            this[i]=elements[i];
        }
        this.length = length;
    }
    html(html){
        if(html){
           this[0].innerHTML=html;
        }else{
          return this[0].innerHTML;
        }
    }
}
window.$ = function(selector){
   return new jQuery(selector);
}

4.2.2 Vue/React 源碼中的工廠模式?

和原生的 document.createElement 類似，Vue 和 React 這種具有虛擬 DOM 樹（Virtual Dom Tree）機(jī)制的框架在生成虛擬 DOM 的時候，都提供了 createElement 方法用來生成 VNode，用來作為真實(shí) DOM 節(jié)點(diǎn)的映射

// Vue
createElement('h3', { class: 'main-title' }, [
  createElement('img', { class: 'avatar', attrs: { src: '../avatar.jpg' } }),
  createElement('p', { class: 'user-desc' }, '放棄不難，但堅(jiān)持一定很酷')
])

// React
React.createElement('h3', { className: 'user-info' },
  React.createElement('img', { src: '../avatar.jpg', className: 'avatar' }),
  React.createElement('p', { className: 'user-desc' }, '放棄不難，但堅(jiān)持一定很酷')
)

createElement 函數(shù)結(jié)構(gòu)大概如下：

class Vnode (tag, data, children) { ... }

function createElement(tag, data, children) {
  return new Vnode(tag, data, children)
}

可以看到 createElement 函數(shù)內(nèi)會進(jìn)行 VNode 的具體創(chuàng)建，創(chuàng)建的過程是很復(fù)雜的，而框架提供的 createElement 工廠方法封裝了復(fù)雜的創(chuàng)建與驗(yàn)證過程，對于使用者來說就很方便了。

4.2.3 vue-router 源碼中的工廠模式?

工廠模式在源碼中應(yīng)用頻繁，以 vue-router 中的源碼為例，代碼位置：vue-router/src/index.js

// src/index.js
export default class VueRouter {
  constructor(options) {
    this.mode = mode    // 路由模式
        
    switch (mode) {     // 簡單工廠
      case 'history':   // history 方式
        this.history = new HTML5History(this, options.base)
        break
      case 'hash':      // hash 方式
        this.history = new HashHistory(this, options.base, this.fallback)
        break
      case 'abstract':  // abstract 方式
        this.history = new AbstractHistory(this, options.base)
        break
      default:
        // ... 初始化失敗報(bào)錯
    }
  }
}

稍微解釋一下這里的源碼。mode 是路由創(chuàng)建的模式，這里有三種 History、Hash、Abstract，前兩種我們已經(jīng)很熟悉了，History 是 H5 的路由方式，Hash 是路由中帶 # 的路由方式，Abstract 代表非瀏覽器環(huán)境中路由方式，比如 Node、weex 等；this.history 用來保存路由實(shí)例，vue-router 中使用了工廠模式的思想來獲得響應(yīng)路由控制類的實(shí)例。

源碼里沒有把工廠方法的產(chǎn)品創(chuàng)建流程封裝出來，而是直接將產(chǎn)品實(shí)例的創(chuàng)建流程暴露在 VueRouter 的構(gòu)造函數(shù)中，在被 new 的時候創(chuàng)建對應(yīng)產(chǎn)品實(shí)例，相當(dāng)于 VueRouter的構(gòu)造函數(shù)就是一個工廠方法。

如果一個系統(tǒng)不是 SPA （Single Page Application，單頁應(yīng)用），而是是 MPA（Multi Page Application，多頁應(yīng)用），那么就需要創(chuàng)建多個 VueRouter 的實(shí)例，此時 VueRouter 的構(gòu)造函數(shù)也就是工廠方法將會被多次執(zhí)行，以分別獲得不同實(shí)例。

4.3 簡單工廠模式的優(yōu)缺點(diǎn)?

4.3.1 優(yōu)點(diǎn)?

• 工廠類含有必要的判斷邏輯，可以決定在什么時候創(chuàng)建哪一個產(chǎn)品類的實(shí)例，客戶端可以免除直接創(chuàng)建產(chǎn)品對象的責(zé)任，而僅僅“消費(fèi)”產(chǎn)品；簡單工廠模式通過這種做法實(shí)現(xiàn)了對責(zé)任的分割，它提供了專門的工廠類用于創(chuàng)建對象。
• 客戶端無須知道所創(chuàng)建的具體產(chǎn)品類的類名，只需要知道具體產(chǎn)品類所對應(yīng)的參數(shù)即可，對于一些復(fù)雜的類名，通過簡單工廠模式可以減少使用者的記憶量。

4.3.2 缺點(diǎn)?

• 工廠負(fù)責(zé)所有產(chǎn)品的創(chuàng)建：如果產(chǎn)品的種類非常多switch case的判斷會變得非常多
• 耦合和依賴于具體的實(shí)現(xiàn)：不符合開放—封閉原則,如果要增加或刪除一個產(chǎn)品種類，就要修改switch case的判斷代碼

5. 工廠方法模式?

簡單工廠模式是根據(jù)輸入的不同返回不同產(chǎn)品的實(shí)例；而工廠方式的主要思想是增加抽象工廠類，將不同產(chǎn)品的創(chuàng)建分離到不同的工廠中，工廠類的職責(zé)比較單一。

• 工廠方法模式Factory Method，又稱多態(tài)性工廠模式。
• 在工廠方法模式中，核心的工廠類不再負(fù)責(zé)所有的產(chǎn)品的創(chuàng)建，而是將具體創(chuàng)建的工作交給工廠子類去做。

5.1 類圖?

5.2 代碼?

abstract class Coffee {
    constructor(public name: string) {

    }
}
abstract class Factory {
    abstract createCoffee(): Coffee;
}
class AmericanoCoffee extends Coffee {
    constructor(public name: string) {
        super(name);
    }
}

class AmericanoCoffeeFactory extends Factory {
    createCoffee() {
        return new AmericanoCoffee('美式咖啡')
    }
}

class LatteCoffee extends Coffee {
    constructor(public name: string) {
        super(name);
    }
}
class LatteCoffeeFactory extends Factory {
    createCoffee() {
        return new LatteCoffee('拿鐵咖啡')
    }
}
class CappuccinoCoffee extends Coffee {
    constructor(public name: string) {
        super(name);
    }
}
class CappuccinoFactory extends Factory {
    createCoffee() {
        return new CappuccinoCoffee('卡布奇諾')
    }
}
class Café {
    static order(name: string) {
        switch (name) {
            case 'Americano':
                return new AmericanoCoffeeFactory().createCoffee();
            case 'Latte':
                return new LatteCoffeeFactory().createCoffee();
            case 'Cappuccino':
                return new CappuccinoFactory().createCoffee();
            default:
                return null;
        }
    }
}
console.log(Café.order('Americano'));
console.log(Café.order('Latte'));
console.log(Café.order('Cappuccino'));

5.3 改進(jìn)?

• 上面的方案雖然具體創(chuàng)建的工作交給工廠子類去做，抽象工廠不在負(fù)責(zé)創(chuàng)建具體的產(chǎn)品；但是新增產(chǎn)品是還是需要添加switch case。
• 通過引入Map配置文件，可以在不修改任何客戶端代碼的情況下更換和增加新的具體產(chǎn)品類，在一定程度上提高了系統(tǒng)的靈活性。

const settings={
    'Americano': AmericanoCoffeeFactory,
    'Latte': LatteCoffeeFactory,
    'Cappuccino': CappuccinoFactory
}

console.log(new settings('Americano').createCoffee());
console.log(new settings('Latte').createCoffee());
console.log(new settings('Cappuccino').createCoffee());

6.設(shè)計(jì)原則驗(yàn)證?

• 構(gòu)造函數(shù)和創(chuàng)建者分離
• 符合開放封閉原則

7.工廠模式的優(yōu)缺點(diǎn)?

7.1 優(yōu)點(diǎn)?

• 良好的封裝，代碼結(jié)構(gòu)清晰，訪問者無需知道對象的創(chuàng)建流程，特別是創(chuàng)建比較復(fù)雜的情況下。
• 擴(kuò)展性優(yōu)良，通過工廠方法隔離了用戶和創(chuàng)建流程隔離，符合開放封閉原則。
• 解耦了高層邏輯和底層產(chǎn)品類，符合最少知識原則，不需要的就不要去交流。

7.2 缺點(diǎn)?

帶來了額外的系統(tǒng)復(fù)雜度，增加了抽象性。

8.工廠模式的適用場景?

那在什么時候使用工廠模式呢：

• 工廠類負(fù)責(zé)創(chuàng)建的對象比較少：由于創(chuàng)建的對象較少，不會造成工廠方法中的業(yè)務(wù)邏輯太過復(fù)雜。
• 客戶端只知道傳入工廠類的參數(shù)，對于如何創(chuàng)建對象不關(guān)心：客戶端既不需要關(guān)心創(chuàng)建細(xì)節(jié)，甚至連類名都不需要記住，只需要知道類型所對應(yīng)的參數(shù)。
• 對象的創(chuàng)建比較復(fù)雜，而訪問者無需知道創(chuàng)建的具體流程。

什么時候不該用工廠模式：

濫用只是增加了不必要的系統(tǒng)復(fù)雜度，過猶不及。