js之适配器模式

适配器模式

适配器模式的应用


level01:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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:

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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>

小结

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

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

你可能感兴趣的:(设计模式)