JavaScript与设计模式———适配器模式（含ts代码）

意义

介绍

旧接口格式和使用者不兼容

中间加个适配转换接口

类UML类图

TypeScript

class Adaptee {
    specificRequest(): string {
        return '香港插座';
    }
}
// 适配器类，适配 Adaptee
class TargetAdaptee {
    public adaptee;
    constructor() {
        this.adaptee = new Adaptee();
    }
    // 
    request() {
        let info = this.adaptee.specificRequest();
        console.log(`${info} >>> 转换器 >>> 内地插座`);
    }
}

// 记住要 new 适配类
let ta = new TargetAdaptee();
ta.request();

应用场景

当需要对旧接口进行修改时候，不确定能否兼容，

那就尽量不要修改原有的代码，而是封装旧接口的适配器来修改。

vue computed

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello vue'
    },
    computed: {
        // {{ msg }} >>> {{ rMessage }}
        // {{ rMessage }} 就是适配好的数据
        rMessage() {
            return this.msg.join('/n');
        }
    },
})