设计模式-适配器模式

介绍

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

UML类图


代码演示

js 复制代码
class Adaptee {
    specificRequest() {
        return '德国标准的插头'
    }
}

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

// 测试
let target = new Targe()
target.request()

场景

  • 封装旧接口
js 复制代码
// 自己封装的ajax,使用方式如下:  
ajax({
    url: '/getData',
    type: 'Post',
    dataType: 'json',
    data: {
        id: "123"
    }
})
.done(function(){})

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

// 做一层适配器
var $ = {
    ajax: function (options) {
        return ajax(options);
    }
}
  • vue computed
jsx 复制代码
<div id="example">
    <p>Original message: "{{ message }}" </p>
    <p>Computed reversed message: "{{ reversedMessage }}" </p>
</div>
js 复制代码
var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        // 计算属性的getter
        reversedMessage: function() {
            // this指向vm实例
            return this.message.split('').reverse().join('')
        }
    }
})

设计原则验证

  • 将旧接口和使用者进行分离
  • 符合开放封闭原则
相关推荐
晨米酱14 小时前
JavaScript 中"对象即函数"设计模式
前端·设计模式
数据智能老司机20 小时前
精通 Python 设计模式——分布式系统模式
python·设计模式·架构
数据智能老司机21 小时前
精通 Python 设计模式——并发与异步模式
python·设计模式·编程语言
数据智能老司机21 小时前
精通 Python 设计模式——测试模式
python·设计模式·架构
数据智能老司机21 小时前
精通 Python 设计模式——性能模式
python·设计模式·架构
使一颗心免于哀伤21 小时前
《设计模式之禅》笔记摘录 - 21.状态模式
笔记·设计模式
数据智能老司机2 天前
精通 Python 设计模式——创建型设计模式
python·设计模式·架构
数据智能老司机2 天前
精通 Python 设计模式——SOLID 原则
python·设计模式·架构
烛阴2 天前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript
李广坤2 天前
工厂模式
设计模式