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. 想使用已经存在的对象,但是不能对每一个都进行原型继承以匹配它的接口。对象适配器可以适配它的父对象接口方法或属性。

总结

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

 

posted @ 2019-06-23 16:55  栀子花编织着留恋  阅读(189)  评论(0编辑  收藏  举报