js设计模式:适配器模式

一.介绍

试想一下生活中的这种场景: 你的电子设备需要的是三角的插口,但是酒店能够使用三角插口有限,这种情况下, 插口转换器就派上用场了
js设计模式:适配器模式
在软件工程中也有类似的场景, 比如当老项目提供的旧接口无法满足现有的情况,重写接口又会带来很大的工作量,适配器模式的出现就是为了解决旧接口格式和新的需求不兼容的情况

二. 实现:

适配器模式的实现非常简单,就是在client对target进行调用时, target内部adptee类进行了调用
UML类图:
js设计模式:适配器模式
代码演示:

class Adaptee{
    specificRequest() {
        return '德国标准插头'
    }
}

class Target {
    constructor() {
        this.adaptee = new Adaptee()
    }
    request() {
        let info = this.adaptee.specificRequest()
        return `${info}->中国标准插头`
    }
}

class Client {
    constructor() {
        this.target = new Target()
    }
    do() {
       return this.target.request()
    }
}

const client = new Client()
console.log(client.do()) // 德国标准插头->中国标准插头

三. 场景举例

vue计算属性

//HTML代码
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

//javascirpt
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

//显示结果
Original message: "Hello"
Computed reversed message: "olleH"