理解JavaScript中的适配器模式Adapter Pattern
更新时间：2022年04月26日 11:22:46 作者：掘金安东尼
这篇文章主要介绍了理解JavaScript中的适配器模式,适配器模式即Adapter Pattern，是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，下文更多相关介绍需要的小伙伴可以参考一下
说到：适配器，大家一定不会陌生，所有的充电头，就是适配器，用于适配电源插孔和需要充电的设备；
同理，适配器模式（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中的适配器模式Adapter Pattern的文章就介绍到这了,更多相关JS适配器模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇判断颜色是否合法的正则表达式(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了SWFObject基本用法,实例分析了SWFObject操作Flash文件的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
本文给大家分享的是纯js实现的类似flash里的图片环绕旋转效果，非常炫酷，有需要的小伙伴可以参考下。2015-04-04
节约时间，先写出总结，推荐使用encodeURIComponent()来对URL进行编码。2008-10-10
这篇文章主要为大家详细介绍了纯js+css实现在线时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要帮助大家理解学习javascript封装，通过封装可以强制实施信息隐藏，本文为大家分析了封装的利弊，感兴趣的小伙伴们可以参考一下2016-02-02
函数和作用域是JavaScript的重要组成部分，我们在使用JavaScript编写程序的过程中经常要用到这两部分内容，借助此文一起来巩固下学习的内容吧。2016-12-12
html代码调试脚本...2006-07-07
这篇文章主要介绍了Webpack的Loader和Plugin的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
本文主要介绍了javascript实现圣旨卷轴展开效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
最新评论