JavaScript设计模式8——适配器模式

前言

上期我们介绍了结构型设计模式中的外观模式，今天我们来看看它的近亲，适配器模式。

适配器模式（Adapter Pattern）是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，它结合了两个独立接口的功能。这种模式涉及到一个单一的类，该类负责加入独立的或不兼容的接口功能。——菜鸟教程

这样看，适配器就类似于我们生活中的转接头，兼容两个不同的接口。来看看实际应用中怎么使用它吧。

参数适配

开发中我们经常会碰到函数之间传参的问题，如果一个函数所需参数过多，我们写的时候有可能会丢失参数，导致报错。所以我们经常会给参数默认值来解决。

比如我们有一个函数，需要一个人的姓名，年龄，性别，爱好，民族，身份证，住址等信息。我们很有可能在传参的时候丢失。所以一般会使用对象传递.

const params = {
    name: '张三', 
    age: 18,
    sex: '男',
    hobby: '马拉松',
    nation: '汉',
    ID: '12345678901234567X',
    adress: '地球村'
}
function fn({name = '李四', age = 20, sex = '女', hobby = '敲代码', nation = '汉', ID = '111111111111111111', adress = '银河系'}) {
    ...
} 

数据适配

还有一种情况，接口返回的数据有时可能会丢失某些字段，需要我们前端来做数据兜底。否则会报错引起bug或者页面展示有误。

const API_DEFAULT_DATA = {
    a: 1,
    b: 2
}

getData(params).then(res => {
    data = {...API_DEFAULT_DATA,...res.data}
}) 

还有第二种数据适配的格式。有一个需求，原数据为一个字符串，现需要字符串通过空格分割之后的数组

function changeData(data) {
    return data.split(' ')
} 

这样我们以后有对数据进行处理只需要改动函数体内容就行，不用挨个的去改变字符串。

除去这些场景外，适配器模式还多用于适配不同框架，此处不多做演示。

总结

外观模式是将多个复杂的接口转换为一个简单的高级接口，而适配器模式则是将一个接口（方法或属性）转换为另外一个接口，以满足用户需求，解决兼容性问题。