JavaScript之适配器模式实例

àì夳堔傛蜴生んèń 2022-05-27 02:58 108阅读 0赞

一、适配器模式：是为了解决软件实体间的接口不兼容的问题。适配器的别名是包装器（wrapper）；

二、首先，假设我们已经有如下代码：

var googleMap = {
        show: function(){
           console.log( '开始渲染谷歌地图' );
        }
    };
    
    var baiduMap = {
        show: function(){
           console.log( '开始渲染百度地图' );
        }
    };
    
    var renderMap = function( map ){
        if( map.show instanceof Function ){
             map.show();
        }
    }
    
    renderMap( googleMap );
    renderMap( baiduMap );

三、上述代码中googleMap和baiduMap都提供了show方法，如果要添加其他的地图进行渲染工作，则同样要提供show方法。但如果有一家地图的显示地图的方法不叫show呢？

我们可以利用适配器模式来处理，如下：

var googleMap = {
        show: function(){
           console.log( '开始渲染谷歌地图' );
        }
    };
    
    var baiduMap = {
        show: function(){
           console.log( '开始渲染百度地图' );
        }
    };
    
    var tiandituMap = {
        display: function(){
           console.log( '开始渲染天地图地图' );
        }
    };
    //为了统一show方法，为天地图添加适配器
    var tiandituMapAdapter = { 
        show: function(){
            return tiandituMap.display();
        }
    };
    
    var renderMap = function( map ){
        if( map.show instanceof Function ){
             map.show();
        }
    }
    
    renderMap( googleMap );
    renderMap( baiduMap );
    renderMap( tiandituMapAdapter );

发表评论取消回复

表情：

评论列表（有 0 条评论，108人围观）

还没有评论，来说两句吧...

相关阅读

相关 java适配器模式之接口适配器

原理：通过抽象类来实现适配。　　当存在这样一个接口，其中定义了N多的方法，而我们现在却只想使用其中的一个到几个方法，如果我们直接实现接口，那么我们要对所有的方法进行实现，

阳光穿透心脏的1/2处/ 2024年02月18日 20:54/ 0 赞/ 113 阅读

相关 JavaScript 23 种设计模式之 7 适配器模式

概念与特点概念：调用不同对象的统一接口，如果是外部提供的名称不相同的接口，就需要适配器来转换。比如手机充电器的转换头，既可以充电安卓手机，也可以充电苹果手手机。

小鱼儿/ 2023年03月13日 01:57/ 0 赞/ 53 阅读

相关设计模式之适配器模式（类适配器、对象适配器、接口适配器）

适配器模式文章目录适配器模式一、概述二、定义和结构 1. 定义 2. 结构

不念不忘少年蓝@/ 2022年10月14日 08:44/ 0 赞/ 297 阅读

相关设计模式之---适配器模式

适配器模式适配器模式(Adapter Pattern)：将一个接口转换成客户希望的另一个接口，使接口不兼容的那些类可以一起工作，其别名为包装器(Wrapper)。适配器模

- 日理万妓/ 2022年06月08日 00:15/ 0 赞/ 275 阅读

相关 JavaScript之适配器模式实例

一、适配器模式：是为了解决软件实体间的接口不兼容的问题。适配器的别名是包装器（wrapper）；二、首先，假设我们已经有如下代码： var googleMap =

àì夳堔傛蜴生んèń/ 2022年05月27日 02:58/ 0 赞/ 109 阅读

相关 javascript-适配器模式

将一个类(对象)的接口（方法或属性）转化成另一个接口，以满足用户需求，使类（对象）之间接口的不兼容性问题通过适配器方法得以解决适配器主要有3个角色组成：（1）客户端：

川长思鸟来/ 2021年11月17日 12:28/ 0 赞/ 509 阅读

相关设计模式之——适配器模式

> 设计模式： > > 前辈们对代码开发经验的总结，是解决特定问题的一系列套路。它不是语法规定。而是一套用来提高代码可复用性、可维护性、可读性、稳健性、以及安全性的解决方案

太过爱你忘了你带给我的痛/ 2021年09月21日 16:42/ 0 赞/ 373 阅读

相关 JavaScript设计模式——适配器模式

介绍旧接口模式与使用者不兼容中间加一个适配器转换接口类似于笔记本电脑与显示器之间的转换线来看个例子： class Adaptee {

逃离我推掉我的手/ 2021年08月24日 17:39/ 0 赞/ 375 阅读

相关适配器模式_适配器模式简单实例

适配器模式简介适配器模式是java设计模式中的一种结构型设计模式，如果是在系统中存在接口不兼容的接口，可以通过引入一个接口来使原本因为接口不兼容而不能一起工

深碍√TFBOYSˉ_/ 2021年07月24日 22:22/ 0 赞/ 537 阅读

相关 JavaScript设计模式(八)【适配器模式】

jquery适配器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

左手的ㄟ右手/ 2021年07月04日 15:33/ 0 赞/ 400 阅读