『面试的底气』—— 设计模式之接口隔离原则｜8月更文挑战

“这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战”

前言

在面试高级前端时，每每会遇到一些关于设计模式的问题，每次都回答不太理想。恰逢8月更文挑战的活动，准备用一个月时间好好理一下关于设计模式方面的知识点，给本身增长点面试的底气。

在学习设计模式以前，首先要认识到设计模式是个编程思想，对任何编程语言都适用。其次要从设计模式的原则开始学习，故本文将详细介绍设计模式的原则之一接口隔离原则。

官方定义

客户端不该该依赖它不须要的接口；一个类对另外一个类的依赖应该创建在最小的接口上。

本身的理解

客户端应该理解为一个类，那么类不该该依赖它不须要的接口，一个类对另外一个类的依赖应该创建在最小的接口上。接口从前端的角度来理解，可认为类中对外暴露的方法。来试想一下遵循接口隔离原则会获得什么好处，没好处干吗要去遵循。

接口隔离，从隔离的字眼来判断，隔离意味接口之间互不干扰，互不依赖。另外被隔离的事物应该具备相同的特征才能被隔离，好比接口A和接口B都是为类C服务，就抽像一个类把接口A和接口B隔离起来。并且隔离还要一个很是重要的做用，就是防止被污染。那么接口隔离的好处概括一下有如下几点

• 避免接口污染
• 提升灵活性
• 提供定制服务
• 实现高内聚

看到高内聚，是否是想起单一职责原则也有这个功能。可是接口隔离原则与单一职责原则的审视角度不相同。单一职责原则要求是类的职责单一，注重的职责，这是业务逻辑上的划分。接口隔离原则要求类中的方法（接口）尽可能少。

下面用代码演示一下接口隔离原则，其中copyProperties方法是将一个类的属性复制到另外一个类上，mix方法是将两个类进行合并。

根据接口隔离原则，先把猫和狗的“吃饭”和“叫”两个共同行为抽像到Behavior类中隔离，猫特的“爬树”行为抽像到Action类中隔离。而后创造狗类时执行class Dog extends Behavior便可，而建立猫类前要先执行const CatMin = mix(Behavior, Action)把Behavior类和Action类组合成一个新抽像类CatMin，而后在执行class Cat extends CatMin建立猫类。

其中Behavior类和Action类就是遵循接口隔离原则的产物。

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();//爬树很开心哦~
复制代码