介绍

  • 旧接口格式和使用者不兼容
  • 中间加一个适配转换接口

（插排的转换器）

UML类图

点击查看【processon】

代码

  1. class NeedAdaptee {
  2.   specialRequest() {
  3.     return `德国标准插头`
  4.   }
  5. }
  7. class Target {
  8.   constructor() {
  9.     this.needAdaptee = new NeedAdaptee()
  10.   }
  12.   request() {
  13.     let info = this.needAdaptee.specialRequest()
  14.     return `info ${info} - 转换器 - 中国标准插头`
  15.   }
  16. }
  18. const adaptor = new Target()
  19. console.log(adaptor.request())

场景

  • 旧的接口转换

    1. let $ = {
    2. ajax: function (options) {
    3.    return ajax(options)
    4. }
    5. }

  • vue的computed

    1. <div id="example">
    2. <p>Original message: "{{ message }}"</p>
    3. <p>Computed reversed message: "{{ reversedMessage }}"</p>
    4. </div>
    5. <script>
    6. var vm = new Vue({
    7. el: '#example',
    8. data: {
    9.   message: 'Hello'
    10. },
    11. computed: {
    12.   // 计算属性的 getter
    13.   reversedMessage: function () {
    14.     // `this` 指向 vm 实例
    15.     return this.message.split('').reverse().join('')
    16.   }
    17. }
    18. })
    19. </script>

    设计原则验证

  • 将旧接口与使用者分离

  • 符合OCP