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

    相关文章

      网友评论

        本文标题:javascript适配器模式

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