适配器模式

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

sp1.png sp3.png

class Adapted {
  specificRequest() {
    return '德国标准插头'
  }
}
class Target {
  constructor() {
    this.adapted = new Adapted()
  }
  request() {
    const info = this.adapted.specificRequest()
    return `${info} - 转换器 - 中国标准插头`
  }
}

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

---

场景

• 封装旧接口

// 自己封装的 ajax, 使用方法如下:
ajax({
  url: '/getData',
  type: 'Post',
  dataType: 'json',
  data: {
    id: 123
  }
})
.done(function(){})

// 但是历史原因, 代码中全是:
// $.ajax({...})

// 做一层适配器
const $ = {
  ajax: function (options) {
    return ajax(options)
  }
}

• Vue 的 computed

spvue1.png

---

设计原则验证

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