理解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适配器模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

    微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

    这篇文章主要介绍了微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能,涉及微信小程序事件响应、页面元素属性动态操作实现滑动与蒙层功能相关技巧与注意事项,需要的朋友可以参考下
    2018-12-12
  • javascript版2048小游戏

    javascript版2048小游戏

    本文给大家分享的是使用javascript制作的2048小游戏的代码,仅仅是想锻炼下自己的编程代码风格,尽量做的规范些,小伙伴们多多给些建议。
    2015-03-03
  • 其实你可以少写点if else与switch(推荐)

    其实你可以少写点if else与switch(推荐)

    switch case与if else的区别:switch case会生成一个跳转表来指示实际的case分支的地址,而if...else却需要遍历条件分支直到命中条件,下面这篇文章主要给大家介绍了关于if else与switch在使用中的一些技巧,需要的朋友可以参考下
    2019-01-01
  • 详解JavaScript中的4种类型识别方法

    详解JavaScript中的4种类型识别方法

    JavaScript中检测对象类型的运算符有:typeof、instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串。下面由小编给大家分享JavaScript中的4种类型识别方法,需要的朋友可以参考下本文
    2015-09-09
  • JS内部事件机制之单线程原理

    JS内部事件机制之单线程原理

    这篇文章主要介绍了JS内部事件机制之单线程原理,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • 通过复制Table生成word和excel的javascript代码

    通过复制Table生成word和excel的javascript代码

    通过复制Table生成word和excel,个人感觉这个功能还是比较实用的,下面有个不错的示例,希望对大家有所帮助
    2014-01-01
  • 解析JavaScript实现DDoS攻击原理与保护措施

    解析JavaScript实现DDoS攻击原理与保护措施

    本文主要对JavaScript实现DDoS攻击原理与保护措施进行介绍,具有一定的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • JS实现获取当前所在周的周六、周日示例分析

    JS实现获取当前所在周的周六、周日示例分析

    这篇文章主要介绍了JS实现获取当前所在周的周六、周日,结合具体实例形式分析了javascript针对日期时间的获取与计算相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • JS中关于Class类的静态属性和静态方法

    JS中关于Class类的静态属性和静态方法

    这篇文章主要介绍了JS中关于Class类的静态属性和静态方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 利用纯JS实现像素逐渐显示的方法示例

    利用纯JS实现像素逐渐显示的方法示例

    这篇文章主要给大家介绍了利用纯JS实现像素逐渐显示的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。
    2017-08-08

最新评论