「這是我參與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();//爬樹很開心哦~
複製代碼