设计模式-适配器模式

适配器模式: 适配器可以理解为两个不兼容的接口的桥梁,结合了两个独立接口的功能.
比如我们的手机充电器就是一个适配器.

image.png

代码如下：

class Power {
    charge() {
        return '220v';
    }
}

class Adaptor {
    power: Power;
    constructor() {
        this.power = new Power();;
    }
    change() {
        return `${this.power.charge()} turn to 5v`;
    }
}

class Phone {
    adaptor: Adaptor;
    constructor() {
        this.adaptor = new Adaptor();
    }
    chargeForPhone() {
        return this.adaptor.change();
    }
}

const phone = new Phone();
let res = phone.chargeForPhone();
console.log(res); // 220v turn to 5v

参数的适配/返回结果的适配

function ajax(options) {
    let defaultOptions = {
        method: 'GET',
        dataType: 'json'
    }
    // 参数的适配
    for(let attr in options) {
        defaultOptions[attr] = options[attr] || defaultOptions[attr];
    }

    console.log(defaultOptions);
}

ajax({
    method: 'get',
    url: '',
    success(str) {
        // 返回结果的适配
        // 服务器返回的是字符串，期望的数据是json，增加一个function，把数据转换成json
        const adaptor = (str) => {
            JSON.parse(str);
        }
        return adaptor(str);
    }
});

方法的适配

假如要串行读取3个文件：1.txt 2.txt 3.txt

// 以下是不推荐的写法
const fs = require('fs');
fs.readFile('1.txt','utf-8', (err, data) => {
    if(data) {
        console.log(data);
        fs.readFile('2.txt','utf-8', (err, data) => {
            if(data) {
                console.log(data);
                fs.readFile('3.txt','utf-8', (err, data) => {
                    if(data) {
                        console.log(data);
                    }
                });
            }
        });
    }
});

// 地狱回调的优雅方法是使用Promise，那么对fs.readFile进行适配

function promisefy(readFile) {
    // 把原始的readFile包装成一个新的函数，新的函数返回Promise对象
    return function(...args) {
        return new Promise((resolve, reject) => {
            readFile(...args, (err, data) => {
                if(err) {
                    reject(err);
                } else {
                    resolve(data);
                }
            });
        });
    }
}
// 对fs.readFile进行适配
let newReadFile = promisefy(fs.readFile);
let file1 = await newReadFile('1.txt', 'utf8');
let file2 = await newReadFile('2.txt', 'utf8');
let file3 = await newReadFile('3.txt', 'utf8');

接口的适配

假如要把项目中的所有的$.ajax改成fetch,我们不可能把每一处都替换成fetch

$.ajax({url,type:'POST',dataType: 'json', data: {}}).then(() => {})

只要把$.ajax适配一下即可

window.$ = {
    ajax(options) {
        return fetch(options.url, {
            method: option.type || 'GET',
            body: JSON.stringify(options.data || []);
        }).then(() => {});
    }
}