JS设计模式：适配器模式

孙泽辉

编程

发布于：2021年7月3日

字数：654字

时长：3分钟

次浏览

适配器模式是作为两个不兼容的接口之间的桥梁，能解决接口不兼容问题。

库适配器

对于各种请求库，如fetch API、axios、jquery，其各种请求方法的写法都不一样，如何统一它们，让写出的代码更具有灵活性？那就要用到适配器模式了，这里我写一个简单的requestAdapter。

const requestAdapter = function(){
    this.instance = axios.create({
        baseURL: '',
        timeout: 10000,
        headers: {}
    });
    this.printlog = false
    // 添加请求拦截器
    this.instance.interceptors.request.use((config)=> {
        // 在发送请求之前做些什么
        console.log(this.printlog)

        this.printlog && (function(){
            console.log("开始请求啦！")
            console.log("请求配置：",config)
        })()            
        return config;
    },  (error) =>{
        // 对请求错误做些什么
        this.printlog && (function(){
            console.log("请求失败咯~")
            console.log("请检查：",error)
        })()
        return Promise.reject(error);
    });

    // 添加响应拦截器
    this.instance.interceptors.response.use( (response)=> {
        // 对响应数据做点什么
        this.printlog && (function(){
            console.log("收到响应：")
            console.log(response)
        })()
        return response;
    },  (error)=> {
        // 对响应错误做点什么
        this.printlog && (function(){
            console.log("请求失败咯~")
            console.log("请检查：",error)
        })()
        return Promise.reject(error);
    });
};
requestAdapter.prototype.get = function({url,params}){
    return this.instance.get(url,{
        params
    })
}
requestAdapter.prototype.setPrintlog = function(flag = true){
    if(!(typeof flag === "boolean")) throw new Error("flag接受一个布尔型参数")
    this.printlog = flag

}
const request = new requestAdapter();
request.setPrintlog(true)
request.get({
    url:"/",
    params :{name:1}
})

测试如图：

这样，就可以制作出一个属于自己的请求库，假如某天axios不再是主流的时候，直接改写自己库里的get代码就好了。

参数适配器

其实上面的get参数就已经有参数适配器的雏形了。

假如我们碰到很多参数的时候，如：

function updateUser(name,age,father,mother,sex){ /* ... */ }

这样写的话，不仅顺序上需要记住，还要确保参数完整，那么可以使用适配器进行优化：

function updateUser(user){
    let _adapter = {
        name:'sunzehui',
        age:20,
        father:'sun',
        mother:'sun',
        sex:1
    }
    for(const key in _adapter){
        _adapter[key] = user[key] || _adapter[key]
    }
    // do something ...
}

数据结构适配

有一次我要保证每个数据都不能重复，数据是对象，自然用不了set了，for循环挨个查又感觉太low了，记得有个数据结构是map，可以保证key唯一，具体实现：

function dataAdapter(list){
    let ret = {};
    for(const obj of list){
        ret[obj.name] = obj.value
    }
    return ret;
}
const list = [
    {name:'sunzehui',value:1},
    {name:'wangdefa',value:2},
    {name:'wangnima',value:1},
    {name:'sunzehui',value:3},
]
console.log(JSON.stringify(dataAdapter(list),2,null));
/*
output:
{"sunzehui":3,"wangdefa":2,"wangnima":1}
*/