JavaScript设计模式之适配器模式

介绍

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

实例

• 电源适配器

UML

image

• 简化之后

  
  image
• 在客户与原类中，如果需求不满足，那么实现一个Adapter继承原类实现客户需要的新功能

代码演示

    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);

• 最终将德国的转换成中国产的

场景

• 封装旧接口
• vue computed

封装旧接口

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

    })

    //但是项目之前是 $.ajax({...})
    //现在要替换成自己封装的ajax 成本太高 故做一层适配
    var $ = {
        ajax:function (options) {
            return ajax(options)
        }
    }

vue computed

    <div id="app">
        <div>正序:{{msg}}}</div>
        <div>倒序:{{reverMsg}}</div>
    </div>

    const vm = new Vue({
        el:'#app',
        data:{
            msg:'w候人兮猗'
        },
        computed:{
            reverMsg:function () {
                return this.msg.split().reverse().join('')
            }
        }
    })

原文:https://www.ahwgs.cn/javascriptshejimoshizhishipeiqimoshi.html
代码:https://github.com/ahwgs/design-pattern-learning/tree/master/5.JavaScript%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B9%8B%E9%80%82%E9%85%8D%E5%99%A8%E6%A8%A1%E5%BC%8F