9 适配器模式 – 前端设计模式系列教程

介绍
  • 旧接口格式和使用者不兼容
  • 中间加一个适配转换接口
代码演示
class Adaptee {
    secificeRequest(){
        return '德国标准插头'
    }
}
class Target {
    constructor(){
        this.adaptee = new Adaptee()
    }
    request (){
        let info = this.adaptee.secificeRequest()
        return `${info} - 转换器 - 中国标准插头`
    }
}
let target = new Target()
let res = target.request()
console.log(res)  //德国标准插头 - 转换器 - 中国标准插头

 

应用场景
封装Ajax
如果老的项目中都是使用$.ajax()来调用接口,那么为了适配新的封装好的ajax()方法,就需要手动全局替换,显然是不靠谱的行为,所以我们需要设计个适配器接口来兼容老代码
// 新封装好的ajax
ajax({
    url: 'api/xxx',
    type: 'Post',
    data: {
        id: 12
    }
})
// 老项目的代码
// $.ajax({...})

// 适配器
var $ = {
    ajax(opts) {
        return this.ajax(opts)
    }
}

 

vue的computed
原来的message是正序,使用computed实现一个适配器支持message字母倒叙排列
设计原则验证
  • 将旧接口和使用者进行分离,改造不能使用用的老接口。
  • 符合开放封闭原则

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:26 次浏览