js之适配器模式

来源：互联网发布：怡海软件技术有限公司编辑：程序博客网时间：2024/05/03 03:51

适配器模式

适配器模式的应用

level01:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <script>        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 ); // 输出：开始渲染百度地图    </script></body></html>

level02:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <script>        var googleMap = {            show: function(){                console.log( '开始渲染谷歌地图' );            }        };        var baiduMap = {            display: function(){                console.log( '开始渲染百度地图' );            }        };        var renderMap = function( map ){            if ( map.show instanceof Function ){                map.show();            }        };        var baiduMapAdapter = {            show: function(){                return baiduMap.display();            }        };        renderMap( googleMap ); // 输出：开始渲染谷歌地图        renderMap( baiduMapAdapter ); // 输出：开始渲染百度地图    </script></body></html>

level03:

数据结构和城市数量有变化->新增一个数据格式转换的适配器：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <script>        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 );    </script></body></html>

level04:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <script>          /*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 ) );    </script></body></html>

小结

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

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

1 0