介紹

• 舊接口格式和使用者不兼容
• 中間需要加一個適配轉(zhuǎn)換接口

實例

• 電源適配器

UML

image

• 簡化之后

  
  
  image
• 在客戶與原類中，如果需求不滿足，那么實現(xiàn)一個Adapter繼承原類實現(xiàn)客戶需要的新功能

代碼演示

    class Adaptee{
        specificRequest(){
            return '外國標準的適配器'
        }
    }
    class Target{
        constructor(){
            this.adaptee = new Adaptee()
        }
        request(){
            let info = this.adaptee.specificRequest()
            return `${info}-轉(zhuǎn)換器-中國生產(chǎn)的`
        }
    }

    //測試
    let target = new Target()
    let res = target.request()

    console.log(res);

• 最終將德國的轉(zhuǎn)換成中國產(chǎn)的

場景

• 封裝舊接口
• vue computed

封裝舊接口

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

    })

    //但是項目之前是 $.ajax({...})
    //現(xiàn)在要替換成自己封裝的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