『面試的底氣』—— 設計模式之依賴倒置原則｜8月更文挑戰

「這是我參與8月更文挑戰的第5天，活動詳情查看：8月更文挑戰」

前言

在面試高級前端時，每每會遇到一些關於設計模式的問題，每次都回答不太理想。恰逢8月更文挑戰的活動，準備用一個月時間好好理一下關於設計模式方面的知識點，給本身增長點面試的底氣。

在學習設計模式以前，首先要認識到設計模式是個編程思想，對任何編程語言都適用。其次要從設計模式的原則開始學習，故本文將詳細介紹設計模式的原則之一依賴倒置原則。

官方定義

高層模塊不該該依賴低層模塊。兩個都應該依賴抽像。

抽像不該該依賴細節，細節應該依賴抽像。

本身的理解

首先舉幾個生活中的例子來了解一下高層模塊和低層模塊。

電腦主機你們都很熟悉吧，主機中有主板、CPU、內存條、顯卡、硬盤，其中主板屬於高層模塊，CPU、內存條、顯卡、硬盤屬於低層模塊。這麼歸屬是由必定依據的，低層模塊具有易換性，高層模塊具有不易替換性。試想一下，換一個主板，要先把CPU、內存條、顯卡、硬盤拆掉，而後再更換主板，要動到全部配件。那麼換一個內存條呢，只要把內存條從主板上把下來替換上去就行。

再舉一個例子加深一下對高層模塊的不易替換性和低層模塊的易替換性的理解。假設你開了一家奶茶店，其中奶茶店就是高層模塊，所賣的奶茶是低層模塊。在生意很差的時候，換幾種奶茶賣容易，仍是從新開一家奶茶店容易。

高層模塊可看做一個平臺，把低層模塊放在這個平臺上，才能實現其做用。好比把CPU、內存條、顯卡、硬盤安置到主板上才能其做用，把奶茶放在奶茶店中才能賣出去。

理解完什麼是高層模塊和低層模塊，再來理解一下爲何要依賴倒置，倒置是如何操做的。仍是用開奶茶店的例子來作解釋。

假設你要開一家奶茶店，按正常人思惟，先想要在哪裏開店，要請多少員工，最後在決定賣什麼奶茶。然而有些老闆想太多了，都想到要如何生產奶茶了。這就是本末倒置了，應該是奶茶依賴奶茶店才能賣出去，因此要依賴倒置一下。這也是依賴倒置原則中的高層模塊不該該依賴低層模塊，奶茶店不該該依賴奶茶，奶茶種類千千萬萬，大不了換一種奶茶就行。

上面提到過奶茶依賴奶茶店才能賣出去，還要再補充一下，奶茶不能應該一家奶茶店，這家奶茶店倒閉了，換一家奶茶店賣就是了。這樣奶茶店和奶茶之間都不互相依賴了，這也不行。根據依賴倒置原則中的兩個都應該依賴抽像來解決該問題。用代碼來模擬一下解決過程，從千千萬萬奶茶（具體類）中抽像出一個抽像類MilkTea，由於規定了奶茶（具體類）中必須提供一個sell方法來賣奶茶，因此在抽像類MilkTea中實現一個sell方法來賣奶茶，sell方法接收一個奶茶（具體類）實例化後的對象，執行對象中的sell方法，就是賣奶茶。

在奶茶店（高層模塊）中繼承抽像類MilkTea建立了一個備貨的功能Stock類，老闆執行new Stock([AMilkTea, BMilkTea, CMilkTea])，[AMilkTea, BMilkTea, CMilkTea]爲要備貨奶茶種類清單，獲得一堆奶茶goods，而後有人來買AMilkTea奶茶，老闆就執行goods.sellTea(AMilkTea)，如何AMilkTea奶茶有生產，就會返回「賣出一杯A奶茶」，沒有生產，則返回「該種奶茶未生產」。在此過程，奶茶店（高層模塊）不要去管奶茶（低層模塊）如何生產（實例化），如何一種奶茶（低層模塊）停產了（刪除了），也不會影響奶茶店的正常營業，只要告訴顧客「該種奶茶未生產」。

class MilkTea {
  sell(milkTea) {
    if (milkTea.sell instanceof Function) {
      milkTea.sell();
    }else{
        console.log('該種奶茶暫不銷售')
    }
  }
}
class Stock extends MilkTea {
  constructor(teaTypes) {
    super();
    this.teas = {};
    teaTypes.forEach(item => {
      const tea = new item();
      this.teas[item] = tea;
    })
  }
  sellTea(teaType) {
    if (this.teas[teaType]) {
      this.sell(this.teas[teaType])
    } else {
      console.log('該種奶茶未生產')
    }
  }
}
class AMilkTea {
  constructor() {}
  sell() {
    console.log('賣出一杯A奶茶')
  }
}
class BMilkTea {
  constructor() {}
  sell() {
    console.log('賣出一杯B奶茶')
  }
}
const goods = new Stock([AMilkTea, BMilkTea, CMilkTea]);
goods.sellTea(AMilkTea);// 賣出一杯A奶茶
goods.sellTea(BMilkTea);// 賣出一杯B奶茶
goods.sellTea(CMilkTea);// 該種奶茶未生產
複製代碼

其中if (milkTea.sell instanceof Function)體現了依賴倒置原則中的抽像不該該依賴細節，細節應該依賴抽像，若是一個奶茶（低層模塊）沒有提供賣奶茶的方法，那就不賣了（不執行），不會影響奶茶店營業（程序正常運行），只需告訴顧客「該種奶茶暫不銷售」。