『面試的底氣』—— 設計模式之接口隔離原則|8月更文挑戰

這是我參與8月更文挑戰的第6天,活動詳情查看:8月更文挑戰前端

前言

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

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

官方定義

客戶端不該該依賴它不須要的接口;一個類對另外一個類的依賴應該創建在最小的接口上。編程

本身的理解

客戶端應該理解爲一個類,那麼類不該該依賴它不須要的接口,一個類對另外一個類的依賴應該創建在最小的接口上。接口從前端的角度來理解,可認爲類中對外暴露的方法。來試想一下遵循接口隔離原則會獲得什麼好處,沒好處幹嗎要去遵循。設計模式

接口隔離,從隔離的字眼來判斷,隔離意味接口之間互不干擾,互不依賴。另外被隔離的事物應該具備相同的特徵才能被隔離,好比接口A和接口B都是爲類C服務,就抽像一個類把接口A和接口B隔離起來。並且隔離還要一個很是重要的做用,就是防止被污染。那麼接口隔離的好處概括一下有如下幾點markdown

  • 避免接口污染
  • 提升靈活性
  • 提供定製服務
  • 實現高內聚

看到高內聚,是否是想起單一職責原則也有這個功能。可是接口隔離原則與單一職責原則的審視角度不相同。單一職責原則要求是類的職責單一,注重的職責,這是業務邏輯上的劃分。接口隔離原則要求類中的方法(接口)儘可能少。編程語言

下面用代碼演示一下接口隔離原則,其中copyProperties方法是將一個類的屬性複製到另外一個類上,mix方法是將兩個類進行合併。post

根據接口隔離原則,先把貓和狗的「吃飯」和「叫」兩個共同行爲抽像到Behavior類中隔離,貓特的「爬樹」行爲抽像到Action類中隔離。而後創造狗類時執行class Dog extends Behavior便可,而建立貓類前要先執行const CatMin = mix(Behavior, Action)Behavior類和Action類組合成一個新抽像類CatMin,而後在執行class Cat extends CatMin建立貓類。學習

其中Behavior類和Action類就是遵循接口隔離原則的產物。this

function copyProperties(target, source) {
  for (let key of Reflect.ownKeys(source)) {
    if (key !== "constructor" && key !== "prototype" && key !== "name") {
      let desc = Object.getOwnPropertyDescriptor(source, key);
      Object.defineProperty(target, key, desc);
    }
  }
}
function mix(...mixins) {
  class Mix { }
  for (let mixin of mixins) {
    copyProperties(Mix, mixin);
    copyProperties(Mix.prototype, mixin.prototype);
  }
  return Mix;
}
class Behavior {
  // 吃
  eat(data) {
    console.log(data)
  }
  // 叫
  call(data) {
    console.log(data)
  }
}
class Action {
  // 爬樹
  climbTree(data) {
    console.log(data)
  }
}
class Dog extends Behavior {
  diyEat(data) {
    this.eat(`狗在吃${data}`)
  }
  diyCall() {
    this.call('汪汪汪,我餓了')
  }
}
const CatMin = mix(Behavior, Action);
class Cat extends CatMin {
  diyEat(data) {
    this.eat(`貓在吃${data}`)
  }
  diyCall() {
    this.call("喵喵喵,我餓了")
  }
  diyClimbTree() {
    this.climbTree("爬樹很開心哦~")
  }
}
let dog = new Dog();
dog.diyEat("骨頭");//狗在吃骨頭
dog.diyCall();//汪汪汪,我餓了
let cat = new Cat();
cat.diyEat("魚");//貓在吃魚
cat.diyCall();//喵喵喵,我餓了
cat.diyClimbTree();//爬樹很開心哦~
複製代碼
相關文章
相關標籤/搜索