JavaScript设计模式学习之适配器模式

29 阅读1分钟

定义

适配器模式的作用是解决两个程序之间的接口不兼容的问题。

使用场景

提到适配器,联想到现实中很容易想到USB转换器,电源适配器等等。这些东西其实和我们的适配器模式非常相似。

实现方式

顾名思义,适配器模式在前端开发中经常被用于解决新旧接口间的兼容问题。下面用代码简单举个例子 假设我有一组数据要输出到页面列表中展示。

function getData(){
    var data = [
        {
            id: 0,
            name: 'data1'
        },
        {
            id: 1,
            name: 'data2'
        }
    ]
    return data
}
//渲染函数
function render(fn){
    console.log('渲染到页面')
    document.write(JSON.stringify(fn()))
}
render(getData)

接下来随着系统的迭代,我们能获取到数据格式也发生了变化,但是我们贸然去更改页面的数据结构这样的改动显然过于大动干戈。我们可以通过编写一个Adapter类来进行新数据的适配,把它转变成我们能使用的数据格式。

function getData(){
    // 发生了变化的新数据结构
    var newData = {
        data1: 2,
        data2: 3
    }
    return newData
}
function Adapter(newDataFn){
    var data = [],
    newData = newDataFn();
    for(key in newData ){
        data.push({
           id: newData[key],
           name: key
        })
    }
    return function(){
        return data
    }
}
//渲染函数
function render(fn){
    console.log('渲染到页面')
    document.write(JSON.stringify(fn()))
}
render(Adapter(getData))

总结

适配器主要用于解决两个不同接口间的兼容问题,它不用去考虑接口的内部实现,不需要改变已有的接口,就能够让它们彼此间协同运作。