javascript适配器模式

作者: smartphp | 来源:发表于2016-12-21 09:53 被阅读197次

适配器模式是为了解决软件实体间的接口不兼容性。使用适配器以后原本不兼容的两个软件的接口可以工作在一起了。
宗旨是不要改变原软件接口的程序代码,在外部使用适配器对数据结构做调整。
参考《javascript模式设计与开发实践》第17章

第一段代码,两个地图接口之间的适配

var googleMap = {
       show: function()方法是show
           console.log( '开始渲染谷歌地图' );
       }
   };
   var baiduMap = {
       display: function(){ //方法是display
           console.log( '开始渲染百度地图' );
       }
   };
   var baiduMapAdapter = {
       show: function(){//适配器也改为show,返回的是display
           return baiduMap.display();

       }
   };
   //下面是渲染地图的方法,传入地图对象
   var renderMap = function( map ){//传入地图对象
       if ( map.show instanceof Function ){ //判断
           map.show();  //地图对象的show方法
           //在传入baiduMapAdapter对象的时候,调用show方法,返回的
           //实际是baiduMap的display方法。
       }
   };

   renderMap( googleMap ); // 输出:开始渲染谷歌地图
   renderMap( baiduMapAdapter ); // 输出:开始渲染百度地图 

数据结构如果不同,也可以不要改动API的输出代码,只改动输出以后的数据呈现结构

 //其中一个API返回的数据
 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 );
    
    //另一个api获得的数据
    var guangdongCity = {
        shenzhen: 11,
        guangzhou: 12,
        zhuhai: 13
    };
    
    //这两个API返回的数据不同,不需要改动API的输出代码,要在输
//出以后做适配。 我们自己的API可以改动,但是如果是第三方的API就
//没有办法要求改动输出结构。所以最好是做适配。这个过程可能很复杂,这里只是说明有这个思路。
    
    ``` 
      //new data
      var guangdongCity = {
        shenzhen: 11,
        guangzhou: 12,
        zhuhai: 13
    };
    
    //按照需要把下面的输出格式改为上面代码里的格式
    //old data
    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 ) );
    ```

  就我个人来看, 适配器的思路是最简单的,但是实际操作起来可能是最复杂的,数据之间的适配可能比想象中的麻烦很多。但是了解到这个思路对于编程的灵活性有了认识,如果是以前可能遇到这样的问题的时候,首先考虑到的是怎么去修改原来的的代码。一个小思路,方法完全不同了。

相关文章

  • Java设计模式(二)

    talk is cheap show me the code 适配器模式 类适配器模式 接口适配器模式 对象适配器...

  • 适配器模式

    目录 1、什么是适配器模式? 2、适配器模式结构? 3、如何实现适配器模式? 4、适配器模式的特点? 5、适配器模...

  • 组合模式设计

    一、设计模式 javascript里面给我们提供了很多种设计模式: 工厂、桥、组合、门面、适配器、装饰者、享元、代...

  • 装饰者模式设计

    一、设计模式 javascript里面给我们提供了很多种设计模式: 工厂、桥、组合、门面、适配器、装饰者、享元、代...

  • 适配器模式

    一、设计模式 javascript里面给我们提供了很多种设计模式: 工厂、桥、组合、门面、适配器、装饰者、享元、代...

  • javascript适配器模式

    适配器模式是为了解决软件实体间的接口不兼容性。使用适配器以后原本不兼容的两个软件的接口可以工作在一起了。宗旨是不要...

  • JavaScript适配器模式

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

  • 设计模式之适配器模式

    适配器模式: 类适配器模式、对象适配器模式、接口适配器模式 1.类适配器模式:新的接口出现了,但是和老的接口不兼容...

  • 学习iOS设计模式第一章 适配器(Adapter)

    今天学习了iOS设计模式中的适配器模式,适配器有两种模式对象适配器模式-- 在这种适配器模式中,适配器容纳一个它包...

  • 第4章 结构型模式-适配器模式

    一、适配器模式简介 二、适配器模式的优点 三、适配器模式的实例

网友评论

    本文标题:javascript适配器模式

    本文链接:https://www.haomeiwen.com/subject/grfqvttx.html