JavaScript之适配器模式实例

àì夳堔傛蜴生んèń 2022-05-27 02:58 74阅读 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 条评论，74人围观）

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

相关阅读

相关 PHP设计模式之适配器模式（Adapter）代码实例大全（10）

目的将某个类的接口转换成另一个接口以兼容，适配器使得原来因为接口不同而无法一起使用的类可以一起工作。适配器通过将原始接口进行转换，给用户提供一个兼容接口。例子

青旅半醒/ 2022年12月07日 01:28/ 0 赞/ 115 阅读

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

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

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

相关 JavaScript之适配器模式实例

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

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

相关 JavaScript之状态模式实例

一、状态模式定义：允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。二、状态模式的关键是区分事物内部的状态，事物内部状态的改变往往会带来事物的行为改变

左手的ㄟ右手/ 2022年05月27日 02:56/ 0 赞/ 44 阅读

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

模式定义适配器模式就是将一个类的接口，转换成客户期望的另一个接口。适配器让原本接口不兼容的类可以合作无间。在适配器模式中，我们可以定义一个包装类，包装不兼容接口的对

Bertha 。/ 2022年03月27日 07:52/ 0 赞/ 177 阅读

相关 javascript-适配器模式

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

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

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

文章目录前言一、适配器模式实现 1、类适配器模式 2、对象适配器模式 3、接

桃扇骨/ 2021年09月28日 04:14/ 0 赞/ 301 阅读

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

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

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

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

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

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

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

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

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