javascript适配器模式

适配器模式是为了解决软件实体间的接口不兼容性。使用适配器以后原本不兼容的两个软件的接口可以工作在一起了。
宗旨是不要改变原软件接口的程序代码,在外部使用适配器对数据结构做调整。
参考《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 ) );
    ```

  就我个人来看, 适配器的思路是最简单的,但是实际操作起来可能是最复杂的,数据之间的适配可能比想象中的麻烦很多。但是了解到这个思路对于编程的灵活性有了认识,如果是以前可能遇到这样的问题的时候,首先考虑到的是怎么去修改原来的的代码。一个小思路,方法完全不同了。
    原文作者:smartphp
    原文地址: https://www.jianshu.com/p/a0c392e91b24
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞