定义
适配器模式的作用是解决两个程序之间的接口不兼容的问题。
使用场景
提到适配器,联想到现实中很容易想到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))
总结
适配器主要用于解决两个不同接口间的兼容问题,它不用去考虑接口的内部实现,不需要改变已有的接口,就能够让它们彼此间协同运作。