JavaScript 设计模式（四）：适配者模式

MingjunYang 发布于2019-08-23 18:18 / 479人阅读

摘要：与其它模式的异同适配器模式不会改变原有接口，这一点与装饰者模式和代理模式类似。代理模式适配器模式与代理模式最相似，同样都是创建一个新对象包装一次，实现对本体的调用。外观模式外观模式与适配器模式最大的区别，是定义了一个新的接口。

适配器模式：将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），使得原本由于接口不兼容而不能一起工作的那些类（对象）可以正常协作。简单理解就是为兼容而生的 “转换器”。

对于强迫症患者，那么多形状各异的接口，对应着不同数据线。如果可以有一个转接口实现集合兼容，岂不美哉。没错，这样一个适配器，你值得拥有。（各大厂商加把劲。。。）

生活小栗子：

港式插头转换器

笔记本电源适配器

Type-C 转接口

模式特点

新包装对象（适配器对象）实现对原对象接口的访问（接口名可不同）

适配器对象不对请求数据做预处理，直接传入原对象接口处理

适配器对象对外接口名统一，外部调用者可统一接口调用多对象方法

模式实现

实现方式：在不改变原有对象接口的基础上，定义一个包装对象，新对象转接调用原有接口，使外部调用者可以正常使用。

第三方SDK的应用

// 适配器实现地图SDK统一渲染
var googleMap = {
    show: function(){
        console.log("开始渲染谷歌地图");
    }
};
var baiduMap = {
    display: function(){
        console.log("开始渲染百度地图");
    }
};

// 外部实际调用的适配器对象
var baiduMapAdapter = {
    show: function() {
        return baiduMap.display();
    }
};

// 外部调用者
var renderMap = function(map) {
    map.show();   // 统一接口调用
}；

renderMap(googleMap);
renderMap(baiduMapAdapter);

ES6实现适配器

// 使用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());

jQuery中的应用

适配器模式非常适用于跨浏览器兼容，例如强大的 jQuery 封装了事件处理的适配器，解决跨浏览器兼容性问题，极大简化我们日常编程操作。

// $("selector").on 的实现
function on(target, event, callback) {
    if (target.addEventListener) {
        // 标准事件监听
        target.addEventListener(event, callback);
    } else if (target.attachEvent) {
        // IE低版本事件监听
        target.attachEvent(event, callback)
    } else {
        // 低版本浏览器事件监听
        target[`on${event}`] = callback
    }
}

适用场景

跨浏览器兼容

整合第三方SDK

新老接口兼容

适配器模式的初衷是为了解决多对象（接口）兼容问题，如果存在多对象协同工作时，不方便直接修改原对象的基础上，可考虑用适配器封装，以便外部调用者统一使用。

与其它模式的异同

适配器模式不会改变原有接口，这一点与装饰者模式和代理模式类似。

VS 代理模式

适配器模式与代理模式最相似，同样都是创建一个新对象（包装一次），实现对本体的调用。

两者的区别：代理模式是为了管控原有对象（本体）的访问，代理的初衷并不是为兼容，并主张代理与本体对外接口保持一致。

而适配器则是为兼容而生的 “转换器”，并不预处理请求，直接将请求转接给原接口，新接口与原接口名可能不同。

“代理模式“（严父）：学校缴费要一千块，这么多？
"适配器模式” (慈母）：学校缴费要一千块，给给给。

装饰者模式及外观模式，会在之后的篇章整理，这里稍作了解。

VS 装饰者模式

装饰者模式的作用是为对象添加功能，可添加多次，形成装饰链。而适配器只会对原有对象包装一次。

VS 外观模式

外观模式与适配器模式最大的区别，是定义了一个新的接口。

优缺点

优点：兼容性，保证外部可统一接口调用

缺点：额外对象的创建，非直接调用，存在一定的开销（且不像代理模式在某些功能点上可实现性能优化）。

参考文章

《JavaScript 设计模式与开发实践》

《JavaScript 设计模式系统讲解与应用》

《适配器在JavaScript中的体现》

本文首发Github，期待Star！
https://github.com/ZengLingYong/blog

作者：以乐之名
本文原创，有不当的地方欢迎指出。转载请指明出处。

云服务器 GPU云服务器建造者设计模式策略者模式装饰者模式建造者模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105016.html

Javascript之适配者模式

摘要：适配者模式适配者模式主要用于解决两个接口之间不匹配的问题。新接口希望是下面的形式这时候就可以采用适配者模式适配者模式适配者模式: 主要用于解决两个接口之间不匹配的问题。demo const zhejiangCityOld = (function(){ return [ { name:hangzhou, id: 11, ...

zhangrxiang 2019-08-26 10:49 评论0 收藏0
“大话”设计模式

摘要：抽象工厂模式是为了处理对象具有等级结构以及对象族的问题。单例设计模式单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例，这个类成为单例类。导语：设计模式是无数码农前人在实际的生产项目中经过不断的踩坑、爬坑、修坑的经历总结出来的经验教训，经过抽象之后表达成的概念。能够帮助后来的设计者避免重复同样的错误或者弯路。我也抽空整理了一下设计模式，用自己的话总结了一下，自认...

coordinate35 2019-08-15 15:14 评论0 收藏0
设计模式学习笔记：适配器模式

摘要：二适配器模式概念适配器模式是一种结构型模式，它的思想是将一个接口转化为另一个接口。适配器模式包含四个角色对象定义所需要的方法请求者负责使用对象定义的方法来做具体的处理被适配者以持有方法的角色适配器使用被适配者的方法来满足对象的需要。一、结构型设计模式 1、概念结构型设计模式描述如何将类或者对象结合在一起形成更为复杂，功能更为强大的结构。 2、分类（1）类结构模型：这种结构模型关心类的...

CompileYouth 2019-08-16 18:30 评论0 收藏0
JS 适配器模式

摘要：另外，适配器模式和其它几个模式可能容易让人迷惑，这里说一下大概的区别适配器和桥接模式虽然类似，但桥接的出发点不同，桥接的目的是将接口部分和实现部分分离，从而对他们可以更为容易也相对独立的加以改变。 1. 简介适配器模式（Adapter）是将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），适配器模式使得原本由于接口不兼容而不能一起工作的那些类（对象）可以一...

Jeffrrey 2019-08-22 11:18 评论0 收藏0
JavaScript 中常见设计模式整理

摘要：开发中，我们或多或少地接触了设计模式，但是很多时候不知道自己使用了哪种设计模式或者说该使用何种设计模式。本文意在梳理常见设计模式的特点，从而对它们有比较清晰的认知。 showImg(https://segmentfault.com/img/remote/1460000014919705?w=640&h=280); 开发中，我们或多或少地接触了设计模式，但是很多时候不知道自己使用了哪种设...

Nosee 2019-08-22 17:21 评论0 收藏0