JavaScript设计模式之适配器模式

CNZPH 发布于2019-08-23 13:46 / 974人阅读

摘要：旧接口格式和使用者不兼容，中间加一个适配器转换接口。模式作用使用一个已经存在的对象，但其方法或接口不符合你的要求。

原文博客地址：https://finget.github.io/2018/11/22/adapter/

适配器模式

适配器模式(Adapter)是将一个类(对象)的接口(方法或属性)转换成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不兼容而不能一起工作的那些类(对象)可以一起工作。[旧接口格式和使用者不兼容，中间加一个适配器转换接口。]

UML

模式作用：

使用一个已经存在的对象，但其方法或接口不符合你的要求。

创建一个可复用的对象，该对象可以与其他不相关或不可见的对象协同工作。

使用已经存在的一个或多个对象，但是不能进行继承已匹配它的接口。

注意事项：

与代理模式的区别，代理模式是不改变原接口，适配是原接口不符合规范

代码示例

//谷歌地图show方法
var googleMap = {
  googlShow: function() {
    console.log("谷歌地图");
  }
};
//百度地图show方法
var baiduMap = {
  baiduShow: function() {
    console.log("百度地图");
  }
};
//渲染地图函数
var renderMap=function(map){
  if(map.show instanceof Function){
    map.show();        
  }
};
renderMap(googleMap);//输出:开始渲染谷歌地图
renderMap(baiduMap);//输出:开始渲染百度地图

适配器模式还有数据的适配，在现在开发中，各种UI框架层出不穷(elementUI),每个框架中对组件数据格式的定义不一样，后台返回的数据也不能完全按照框架的格式，这时作为前端程序猿，我们就需要把后台返回的数据做一次修改，以适应框架。这就是设配器的想法，不要听到设计模式就很恼火，说不定你每天都在用！！！

最后

创建了一个前端学习交流群，感兴趣的朋友，一起来嗨呀！

云服务器 GPU云服务器适配器模式 Java设计模式之（五）——代理模式 javascript设计模式 javascript命令模式

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

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

JavaScript设计模式之结构型设计模式

摘要：享元模式通过分析应用程序的对象，将其解析为内在数据和外在数据，减少对象数量，从而提高程序的性能。通过这种方式进行事件绑定，可以减少事件处理程序的数量，这种方式叫做事件委托，也是运用了享元模式的原理。事件处理程序是公用的内在部分，每个菜单项各 github 全文地址： YOU-SHOULD-KNOW-JS JavaScript设计模式之外观模式概念外观模式：为一组复杂子系统接口提...

xiaoqibTn 2019-08-21 18:24 评论0 收藏0
Javascript之适配者模式

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

zhangrxiang 2019-08-26 10:49 评论0 收藏0
JavaScript设计模式

摘要：依赖于接口的设计模式下面列出的设计模式，尤其依赖接口工厂模式。这些私用的静态成员可以从构造器内部访问，这意味着所有私用函数和特权函数都能访问它们。构造器静态特权方法封装之弊私用方法很难进行单元测试。 1.弱类型语言在JavaScript中，定义变量时不必声明其类型。但这并不意味着变量没有类型。一个变量可以属于几种类型之一，这取决于其包含的数据。JavaScript中有三种原始类型：...

mingzhong 2019-08-19 18:46 评论0 收藏0
JavaScript 设计模式读书笔记(七)——适配器模式

摘要：与门面模式的联系本文要说的适配器模式和上一篇门面模式在思想上有相似之处，所以放在一起说。我们以中的一个为例，说说实际应用中的适配器模式的使用方法。而如果实现层的问题不大，要解决一部分适配问题的话，适配器模式就是很好的选择了。与门面模式的联系本文要说的适配器模式和上一篇门面模式在思想上有相似之处，所以放在一起说。它们都对类的接口进行了一些改变。门面模式是把相似的或是完成相关任务的接...

AZmake 2019-08-19 14:46 评论0 收藏0
从ES6重新认识JavaScript设计模式(四): 适配器模式

摘要：什么是适配器模式适配器模式将一个类的接口转换成客户希望的另外一个接口，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。中的适配器模式在前端项目中，适配器模式的使用场景一般有以下三种情况库的适配参数的适配和数据的适配。 1 什么是适配器模式适配器模式(Adapter)：将一个类的接口转换成客户希望的另外一个接口，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。在...

URLOS 2019-08-22 18:30 评论0 收藏0