欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

理解JavaScript中的适配器模式Adapter Pattern

时间:2023-01-30 10:34:43|栏目:JavaScript代码|点击:

说到:适配器,大家一定不会陌生,所有的充电头,就是适配器,用于适配电源插孔和需要充电的设备;

同理,适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于【结构型模式】,它结合了两个独立接口的功能。

代码示例也非常直观:

class Adapter {
specificRequest() {
return '手机充电接口'
}
}
class Target {
constructor() {
this.adapter = new Adapter()
}
request() {
let info = `${this.adapter.specificRequest()}---通过适配器接入到---充电插头`
return info
}
}
let target = new Target()
console.info(target.request())

// 手机充电接口---通过适配器接入到---充电插头

当我们有动机地修改一个正常运行的系统的接口,这时应该考虑使用适配器模式。

不过,它也有一个要特别注意的缺点,即:过多地使用适配器,会让系统非常零乱,不易整体进行把握。比如,明明看到调用的是 A 接口,其实内部被适配成了 B 接口的实现,一个系统如果太多出现这种情况,无异于一场灾难。因此如果不是很有必要,可以不使用适配器,而是直接对系统进行重构。

不过,它的好处呢,就是:可以让任何两个没有关联的类一起运行。 提高了类的复用。

// 使用ES6改写适配器实现地图SDK统一渲染
class googleMap {
show() {
console.log('开始渲染谷歌地图');
}
}
class baiduMap {
display() {
console.log('开始渲染百度地图');
}
}
class baiduMapAdapter extends baiduMap {
constructor() {
super();
}
show() {
this.display();
}
}
// 外部调用者
function renderMap(map) {
map.show(); // 统一接口调用
}
renderMap(new googleMap());
renderMap(new baiduMapAdapter());

// 开始渲染谷歌地图
// 开始渲染百度地图

上一篇:JavaScript中的原始值和复杂值

栏    目:JavaScript代码

下一篇:javascript中this的用法实践分析

本文标题:理解JavaScript中的适配器模式Adapter Pattern

本文地址:http://www.codeinn.net/misctech/224768.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有