适配器模式

适配器模式

1. UML 演示

2. 代码演示

// class Client {
//   do() {
//   }
// }

class Adaptee {
  specificRequest() {
    return '公牛插头'
  }
}

class Target {
  constructor() {
    this.adaptee = new Adaptee()
  }
  request() {
    let info = this.adaptee.specificRequest()
    return `${info} - 转换器 - 中国通用插头`
  }
}

//测试
let target = new Target()
let res = target.request()
console.log(res)

3. 场景

3.1 封装旧接口

//当jQuery中的代码都是`$.ajax({})`时，此时需要更为简洁的使用
//自己封装的ajax
ajax({
  url: '/getData',
  type: 'Post',
  dataType: 'json',
  data: {
    id: '123'
  }
}).done(function() {})

//做一个适配器
var $ = {
  ajax: function(oiptions) {
    return ajax(options)
  }
}

3.2 vue 中的 computed

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

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

4. 设计原则

• 将旧接口和使用者分离
• 符合开放封闭原则