设计模式-适配器模式

介绍

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

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('')
        }
    }
})

设计原则验证

  • 将旧接口和使用者进行分离
  • 符合开放封闭原则
相关推荐
一叶难遮天1 小时前
Android面试指南(八)
java·设计模式·数组·hashmap·string·android面试·匿名内部类
MetaverseMan2 小时前
Golang单例模式和工厂模式详解
开发语言·golang·适配器模式
星空寻流年11 小时前
设计模式第一章(建造者模式)
java·设计模式·建造者模式
蒋星熠12 小时前
Flutter跨平台工程实践与原理透视:从渲染引擎到高质产物
开发语言·python·算法·flutter·设计模式·性能优化·硬件工程
至此流年莫相忘14 小时前
设计模式:策略模式
设计模式·策略模式
ytadpole15 小时前
揭秘设计模式:命令模式-告别混乱,打造优雅可扩展的代码
java·设计模式
努力也学不会java18 小时前
【设计模式】 外观模式
设计模式·外观模式
deepwater_zone19 小时前
设计模式(策略,观察者,单例,工厂方法)
设计模式
宁静致远20211 天前
【C++设计模式】第三篇:观察者模式(别名:发布-订阅模式、模型-视图模式、源-监听器模式)
c++·观察者模式·设计模式
User_芊芊君子1 天前
【Java】设计模式——单例、工厂、代理模式
java·设计模式·代理模式