设计模式篇(5) 适配器

适配器模式（Adapter Pattern）是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，它结合了两个独立接口的功能。

这种模式涉及到一个单一的类，该类负责加入独立的或不兼容的接口功能。举个真实的例子，读卡器是作为内存卡和笔记本之间的适配器。您将内存卡插入读卡器，再将读卡器插入笔记本，这样就可以通过笔记本来读取内存卡。

我们通过下面的实例来演示适配器模式的使用。其中，音频播放器设备只能播放 mp3 文件，通过使用一个更高级的音频播放器来播放 vlc 和 mp4 文件。

介绍

意图：将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。

主要解决：主要解决在软件系统中，常常要将一些"现存的对象"放到新的环境中，而新环境要求的接口是现对象不能满足的。

何时使用： 1、系统需要使用现有的类，而此类的接口不符合系统的需要。 2、想要建立一个可以重复使用的类，用于与一些彼此之间没有太大关联的一些类，包括一些可能在将来引进的类一起工作，这些源类不一定有一致的接口。 3、通过接口转换，将一个类插入另一个类系中。（比如老虎和飞禽，现在多了一个飞虎，在不增加实体的需求下，增加一个适配器，在里面包容一个虎对象，实现飞的接口。）

如何解决：继承或依赖（推荐）。

关键代码：适配器继承或依赖已有的对象，实现想要的目标接口。

应用实例： 1、美国电器 110V，中国 220V，就要有一个适配器将 110V 转化为 220V。 2、JAVA JDK 1.1 提供了 Enumeration 接口，而在 1.2 中提供了 Iterator 接口，想要使用 1.2 的 JDK，则要将以前系统的 Enumeration 接口转化为 Iterator 接口，这时就需要适配器模式。 3、在 LINUX 上运行 WINDOWS 程序。 4、JAVA 中的 jdbc。

优点： 1、可以让任何两个没有关联的类一起运行。 2、提高了类的复用。 3、增加了类的透明度。 4、灵活性好。

缺点： 1、过多地使用适配器，会让系统非常零乱，不易整体进行把握。比如，明明看到调用的是 A 接口，其实内部被适配成了 B 接口的实现，一个系统如果太多出现这种情况，无异于一场灾难。因此如果不是很有必要，可以不使用适配器，而是直接对系统进行重构。 2.由于 JAVA 至多继承一个类，所以至多只能适配一个适配者类，而且目标类必须是抽象类。

使用场景：有动机地修改一个正常运行的系统的接口，这时应该考虑使用适配器模式。

注意事项：适配器不是在详细设计时添加的，而是解决正在服役的项目的问题。

实现

实现一个插座的功能

class Socket {
    output() {
        return '220v';
    }
}

abstract class Power {
    abstract charge(): string;
}

class PowerAdaptor extends Power {
    constructor(public socket: Socket) {
        super();
    }

    charge(): string {
        return this.socket.output() + '转换为24v';
    }
}

let adaptor = new PowerAdaptor(new Socket());
console.log(adaptor.charge());

实现axios的基本功能

const url = require('url');
axios({
    url: 'http://localhost:8080/api/user?id=5',
    method: 'GET'
}).then((res: any) => {
    console.log(res);
}).catch((err: any) => {
    console.log(err);
})
function xhr(config: any) {
    return new Promise((resolve, reject) => {
        let req = new XMLHttpRequest();
        req.open(config.method, config.url, true);
        req.onreadystatechange = function () {
            if (req.readyState == 4) {
                if (req.status === 200) {
                    resolve(req.responseText);
                } else {
                    reject('请求失败');
                }
            }
        }
    })
}

function http(config: any) {
    let http = require('http');
    let urlObject = url.parse(config.url);
    return new Promise((resolve, reject) => {
        const options = {
            hostname: urlObject.hostname,
            port: urlObject.port,
            path: urlObject.path,
            method: config.method
        }
        let req = http.request(options,function(res:any) {
            let chunks: any = [];
            res.on('data', function(chunk: any){
                chunks.push(chunk);
            });
            res.on('end', function () {
                let result = Buffer.concat(chunks).toString();
                resolve(result);
            })
        })
        req.on('error', function (error: any) {
            reject(error);
        })
        req.end();
    })
}

function getDefaultAdaptor(): Function {
    let adaptor: Function = () => { };
    if (typeof XMLHttpRequest !== 'undefined') {
        adaptor = xhr;
    } else if (typeof process !== 'undefined') {
        adaptor = http;
    }
    return adaptor;
}
function axios(config: Object): any {
    let adaptor: Function = getDefaultAdaptor();
    //不管是浏览器端还是node端，都是传入一个config对象
    return adaptor(config);
}

jquery项目迁移例子

//原来项目里全用的jquery $.ajax可以用适配器来兼容
let $ = require('jquery');
let axios = require('axios');
function toAxiosAdaptor(options) {
    return axios({
        url: options.url,
        method: options.type
    }).then(options.success, options.error);
}

$.ajax = function (options) {
    return toAxiosAdaptor(options);
}

$.ajax ({
    url: 'http://localhost:8080/api/user',
    type: 'GET',
    success(data) {
        console.log(data);
    },
    error(err) {
        console.log(err);
    }
})

PromiseAdaptor封装

import { rejects } from "assert";

const fs = require('fs');
function promiseAdaptor(callbackFn:Function) {
    return function(...args:any) {
        return new Promise((resolve,reject) => {
            callbackFn(...args,(err:any,result:any) => {
                err ? reject(err) : resolve(result);
            })
        })
    }
}

let readFile = promiseAdaptor(fs.readFile);
(async function () {
    let content = await readFile('./1.txt','utf-8');
    console.log(content);
})()

flattenArray实现

let treeData:Array<object> = [
    {
        name: '山东',
        key: 'shandong',
        children: [
            { name: '青岛', key: 'qingdao' },
            { name: '威海', key: 'weihai'},
        ]
    },
    {
        name: '广东',
        key: 'guangdong',
        children: [
            { name: '东莞', key: 'dongguan'},
            { name: '深圳', key: 'shenzhen'}
        ]
    }
]

function flattenAdaptor(treeData:Array<any>, array:Array<any>) {
    treeData.forEach(item => {
        if(item.children) {
            flattenAdaptor(item.children,array);
        } else {
            array.push(item);
        }
    })
    return array;
}

console.log(flattenAdaptor(treeData,[]));