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(' ')
}
这样我们以后有对数据进行处理只需要改动函数体内容就行,不用挨个的去改变字符串。
除去这些场景外,适配器模式还多用于适配不同框架,此处不多做演示。
总结
外观模式是将多个复杂的接口转换为一个简单的高级接口,而适配器模式则是将一个接口(方法或属性)转换为另外一个接口,以满足用户需求,解决兼容性问题。
转载自:https://juejin.cn/post/7091293694011113509