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: ,

    haidian: ,

    pinggu:

};

旧的数据格式如下：

var beijingCity = [

    {

        name: 'chaoyang',

        id: ,

    }, {

        name: 'haidian',

        id: ,

    }

    ];

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

var getBeijingCity = function(){

    var beijingCity = [

    {

        name: 'chaoyang',

        id: ,

    }, {

        name: 'haidian',

        id: ,

    }

    ];

    return beijingCity;

};

var render = function( fn ){

    console.log( '开始渲染北京市地图' );

    document.write( JSON.stringify( fn() ) );

};

var addressAdapter = function( oldAddressfn ){

    var address = {},

    oldAddress = oldAddressfn();

    for ( var i = , c; c = oldAddress[ i++ ]; ){

        address[ c.name ] = c.id;

    }

    return function(){

        return address;

    }

};

render( addressAdapter( getBeijingCity ) );

结果是：

{"chaoyang":,"haidian":}

使用场景：

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

总结

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

巴特西

javascript设计模式之适配器模式

最新文章

热门文章