首页 > 代码库 > JavaScript设计模式与开发实践 适配器模式

JavaScript设计模式与开发实践 适配器模式

  适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后,原本由于接口不兼容而不能工作的两个软件实体可以一起工作。

  适配器的别名是包装器(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 方法,但第三方的接口方法并不在我们自己的控制范围之内,假如baiduMap 提供的显示地图的方法不叫show 而叫display 呢?

  我们可以通过增加baiduMapAdapter 来解决问题:

    var googleMap = {
        show: function(){
            console.log( ‘开始渲染谷歌地图‘ );
        }
    };
    var baiduMap = {
        display: function(){
            console.log( ‘开始渲染百度地图‘ );
        }
    };
    var baiduMapAdapter = {
        show: function(){
            return baiduMap.display();

        }
    };
    var renderMap = function( map ){
        if ( map.show instanceof Function ){
            map.show();
        }
    };
    renderMap( googleMap ); // 输出:开始渲染谷歌地图
    renderMap( baiduMapAdapter ); // 输出:开始渲染百度地图

  

  假设我们正在编写一个渲染广东省地图的页面。目前从第三方资源里获得了广东省的所有城市以及它们所对应的ID,并且成功地渲染到页面中:

    var getGuangdongCity = function(){
        var guangdongCity = [
        {
            name: ‘shenzhen‘,
            id: 11,
        }, {
            name: ‘guangzhou‘,
            id: 12,
        }
        ];
        return guangdongCity;
    };
    var render = function( fn ){
        console.log( ‘开始渲染广东省地图‘ );
        document.write( JSON.stringify( fn() ) );
    };
    render( getGuangdongCity );

 

  但新的数据结构如下:

    var guangdongCity = {
        shenzhen: 11,
        guangzhou: 12,
        zhuhai: 13
    };

  新增一个数据格式转换的适配器:

    var guangdongCity = {
        shenzhen: 11,
        guangzhou: 12,
        zhuhai: 13
    };
    var getGuangdongCity = function(){
        var guangdongCity = [
        {
            name: ‘shenzhen‘,
            id: 11,
        }, {
            name: ‘guangzhou‘,
            id: 12,
        }

        ];
        return guangdongCity;
    };
    var render = function( fn ){
        console.log( ‘开始渲染广东省地图‘ );
        document.write( JSON.stringify( fn() ) );
    };
    var addressAdapter = function( oldAddressfn ){
        var address = {},
        oldAddress = oldAddressfn();
        for ( var i = 0, c; c = oldAddress[ i++ ]; ){
            address[ c.name ] = c.id;
        }
        return function(){
            return address;
        }
    };
    render( addressAdapter( getGuangdongCity ) );

小结  

  适配器模式是一对相对简单的模式。在本书提到的设计模式中,有一些模式跟适配器模式的结构非常相似,比如装饰者模式、代理模式和外观模式(参见第19 章)。这几种模式都属于“包装模式”,都是由一个对象来包装另一个对象。区别它们的关键仍然是模式的意图。

  • 适配器模式主要用来解决两个已有接口之间不匹配的问题,它不考虑这些接口是怎样实现的,也不考虑它们将来可能会如何演化。适配器模式不需要改变已有的接口,就能够使它们协同作用。
  • 装饰者模式和代理模式也不会改变原有对象的接口,但装饰者模式的作用是为了给对象增加功能。装饰者模式常常形成一条长的装饰链,而适配器模式通常只包装一次。代理模式是为了控制对对象的访问,通常也只包装一次。
  • 外观模式的作用倒是和适配器比较相似,有人把外观模式看成一组对象的适配器,但外观模式最显著的特点是定义了一个新的接口。

 

JavaScript设计模式与开发实践 适配器模式