zoukankan      html  css  js  c++  java
  • javascript设计模式之适配器模式

    ---恢复内容开始---

    定义:

    是指讲一个接口转换成客户端希望 的另外一个接口,该模式使得原本不兼容的类可以一起工作。适配器模式的作用事解决两个软件实体间的接口不兼容的问题。

    生活中的实例:

    USB转接器,在以前的电脑上,PS2接口是连接鼠标,键盘等其他外部设备的标准接口。但随着技术的发展,越来越多的电脑开始放弃PS2 接口,转而仅支持USB接口。所以哪些过去生产的只拥有PS2接口的鼠标,键盘,游戏手柄等,需要一个USB的转换器接口才能继续正常工作,着就是PS2-USB适配器诞生的原因。

    在程序开发的过程中,随着产品一次次的升级,我们发现有时候之前的接口不能满足现有的业务需求了,公司可能不会把大量的人力,精力放在一个维护中的项目上,那怎么办,能够在改动最小的前提下,让接口适用于新系统。这时候,就需要"适配器模式",该模式也称为“亡羊补牢”的模式,因为没有人在项目设计之初就使用它。

    适配器模式的三个角色:

    - 目标角色(Target):例如:USB接口

    - 源角色(Adaptee): 例如:PS2接口

    - 适配器角色(Adapter): 例如: PS2-USB适配器

    例子:

    Target.js

    // 目标角色类 
    export  class Target{
        constructor() {
    
        }
        usb() {
            console.log('usb接口')
        }
    }

    Adaptee.js

    // 源目标角色是
    export  class Adaptee {
        constructor() {
    
        }
        ps() {
            console.log('原目标是ps2')
        }
    }

    Adapter.js

    // 适配器
    import {Adaptee} from './Adaptee.js'
    let adaptee = new Adaptee()
    
    export  class Adapter {
        constructor() {
    
        }
        usb() {return adaptee.ps()
        }
    }

    客户端的实现:

    import {Adapter} from '@/assets/Adapter.js'
    let adapter = new Adapter()
      mounted() {
        adapter.usb() //原目标是ps2
      }

    在适配器类中,定义与目标角色类相同的方法,但是在该方法中,调用原目标角色类中的方法,就可以实现原目标的方法。

    数据格式转换的适配器

    在前后端数据传递的时候经常会使用到适配器模式,如果后端的数据经常发生变化,比如在某些网站拉取的数据,后端有时无法控制数据的格式,所以,在使用数据前最好对数据进行 适配成我们可用的数据格式在使用。

    新的数据格式如下:

    var BeijingCity = {
        chaoyang: 11,
        haidian: 12,
        pinggu: 13
    };

    旧的数据格式如下:

    var beijingCity = [
        {
            name: 'chaoyang',
            id: 11,
        }, {
            name: 'haidian',
            id: 12,
        }
    
        ];

    使用适配器模式来进行数据格式的转换

    var getBeijingCity = function(){
        var beijingCity = [
        {
            name: 'chaoyang',
            id: 11,
        }, {
            name: 'haidian',
            id: 12,
        }
    
        ];
        return beijingCity;
    };
    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( getBeijingCity ) );

    结果是:

    {"chaoyang":11,"haidian":12}

    使用场景:

    1. 使用一个已经存在的对象,但其方法或属性接口不符合你的要求;
    2. 你想创建一个可复用的对象,该对象可以与其它不相关的对象或不可见对象(即接口方法或属性不兼容的对象)协同工作;
    3. 想使用已经存在的对象,但是不能对每一个都进行原型继承以匹配它的接口。对象适配器可以适配它的父对象接口方法或属性。

    总结

    适配器模式主要用来解决两个已有接口之间不匹配的问题,他不考虑这些接口是怎么实现的,也不考虑它们将来可能会如何演化。适配器模式不许哟啊改变已有的接口,就能够使它们协同作用。

  • 相关阅读:
    解析URL
    文件上传
    MyEclipse自动生成hibernate实体类和配置文件攻略
    <form>表单提交时注意
    W2UI /W2Toolbar的click响应事件
    JS 读写文件
    select 美化(bootstrap)
    安装MySQL for Windows 数据库
    java环境配置—配置Tomcat8环境
    对进程、线程、应用程序域的理解
  • 原文地址:https://www.cnblogs.com/mn6364/p/11069965.html
Copyright © 2011-2022 走看看