适配器模式（Adapter Pattern）又称包装器模式，将一个类（对象）的接口（方法、属性）转化为用户需要的另一个接口，解决类（对象）之间接口不兼容的问题。

主要功能是进行转换匹配，目的是复用已有的功能，而不是来实现新的接口。也就是说，访问者需要的功能应该是已经实现好了的，不需要适配器模式来实现，适配器模式主要是负责把不兼容的接口转换成访问者期望的格式而已。

在类似场景中，这些例子有以下特点：

(相关资料图)

class Socket {    output() {        return "输出220V";    }}abstract class Power {    abstract charge(): string;}class PowerAdapter extends Power {    constructor(public socket: Socket) {        super();    }    //转换后的接口和转换前不一样    charge() {        return this.socket.output() + " 经过转换 输出24V";    }}let powerAdapter = new PowerAdapter(new Socket());console.log(powerAdapter.charge());

当你想用已有对象的功能，却想修改它的接口时，一般可以考虑一下是不是可以应用适配器模式。

axios源码中采用了process和XMLHttpRequest。 通过宿主环境的特有对象识别当前环境,适配出不同环境下如：客户端浏览器和nodejs的请求方式。

/adapters 目录中包含如下这些文件

├─adapters│   http.js│   README.md│   xhr.js

适配器的入参都是config,返回的都是promise

//let axios = require("axios");let url = require("url");function axios(config: any): any {    let adaptor = getDefaultAdapter();    return adaptor(config);}axios({    method: "GET",    url: "http://localhost:8080/api/user?id=1"}).then(function (response: any) {    console.log(response);}, function (error: any) {    console.log(error);})function xhr(config: any) {    return new Promise(function (resolve, reject) {        var request = new XMLHttpRequest();        request.open(config.method, config.url, true);        request.onreadystatechange = function () {            if (request.readyState == 4) {                if (request.status == 200) {                    resolve(request.response);                } else {                    reject("请求失败");                }            }        }    })}function http(config: any) {    let http = require("http");    let urlObject = url.parse(config.url);    return new Promise(function (resolve, reject) {        const options = {            hostname: urlObject.hostname,            port: urlObject.port,            path: urlObject.pathname,            method: config.method        };        var req = http.request(options, function (res: any) {            let chunks: any[] = [];            res.on("data", (chunk: any) => {                chunks.push(chunk);            });            res.on("end", () {                resolve(Buffer.concat(chunks).toString());            });        });        req.on("error", (err: any) => {            reject(err);        });        req.end();    })}function getDefaultAdapter(): any {    var adapter;    if (typeof XMLHttpRequest !== "undefined") {        adapter = xhr;    } else if (typeof process !== "undefined") {        adapter = http;    }    return adapter;}

server.js

let express = require("express");let app = express();app.get("/api/user", (req, res) => {    res.json({ id: req.query.id, name: "zhufeng" });});app.listen(8080);

有的使用 jQuery 的老项目使用 $.ajax 来发送请求，现在的新项目一般使用 Axios，那么现在有个老项目的代码中全是 $.ajax，如果逐个修改，无疑工作量巨大而且很容易引发各种乱七八糟 bug，这时可以采用适配器模式来将老的使用形式适配到新的技术栈上：

/* 适配器 */function ajax2AxiosAdapter(ajaxOptions) {  return axios({    url: ajaxOptions.url,    method: ajaxOptions.type,    responseType: ajaxOptions.dataType,    data: ajaxOptions.data  })    .then(ajaxOptions.success)    .catch(ajaxOptions.error)}/* 经过适配器包装 */$.ajax = function(options) {  return ajax2AxiosAdapter(options);}// 测试：用 jQuery 的方式发送一个 Ajax 请求$.ajax({  url: "/demo-url",  type: "POST",  dataType: "json",  data: {    name: "张三",    id: "13"  },  success: function(data) {    console.log("请求成功！")  },  error: function(err) {    console.error("请求失败！")  }})

可以看到老的代码表现形式依然不变，但是真正发送请求是通过新的发送方式来进行的。当然你也可以把 Axios 的请求适配到 $.ajax 上，就看你如何使用适配器了。

let fs = require("fs");var Bluebird = require("bluebird");let readFile = Bluebird.promisify(fs.readFile);(async function () {    let content = await readFile("./1.txt", "utf8");    console.log(content);})()

function promisify(readFile: any) {    return function (filename: any, encoding: any) {        return new Promise(function (resolve, reject) {            readFile(filename, encoding, function (err: any, data: any) {                if (err)                    reject(err);                else                    resolve(data);            })        });    }}

在实际项目中，我们经常会遇到树形数据结构和表形数据结构的转换，比如全国省市区结构、公司组织结构、军队编制结构等等。以公司组织结构为例，在历史代码中，后端给了公司组织结构的树形数据，在以后的业务迭代中，会增加一些要求非树形结构的场景。比如增加了将组织维护起来的功能，因此就需要在新增组织的时候选择上级组织，在某个下拉菜单中选择这个新增组织的上级菜单。或者增加了将人员归属到某一级组织的需求，需要在某个下拉菜单中选择任一级组织。

在这些业务场景中，都需要将树形结构平铺开，但是我们又不能直接将旧有的树形结构状态进行修改，因为在项目别的地方已经使用了老的树形结构状态，这时我们可以引入适配器来将老的数据结构进行适配：

/* 原来的树形结构 */const oldTreeData = [  {    name: "总部",    place: "一楼",    children: [      { name: "财务部", place: "二楼" },      { name: "生产部", place: "三楼" },      {        name: "开发部", place: "三楼", children: [          {            name: "软件部", place: "四楼", children: [              { name: "后端部", place: "五楼" },              { name: "前端部", place: "七楼" },              { name: "技术支持部", place: "六楼" }]          }, {            name: "硬件部", place: "四楼", children: [              { name: "DSP部", place: "八楼" },              { name: "ARM部", place: "二楼" },              { name: "调试部", place: "三楼" }]          }]      }    ]  }]/* 树形结构平铺 */function treeDataAdapter(treeData, lastArrayData = []) {  treeData.forEach(item {    if (item.children) {      treeDataAdapter(item.children, lastArrayData)    }    const { name, place } = item    lastArrayData.push({ name, place })  })  return lastArrayData}// 测试：返回平铺的组织结构treeDataAdapter(oldTreeData)

增加适配器后，就可以将原先状态的树形结构转化为所需的结构，而并不改动原先的数据，也不对原来使用旧数据结构的代码有所影响。

Vue 中的计算属性也是一个适配器模式的实例，以官网的例子为例，我们可以一起来理解一下：

<script type="text/javascript">  export default {    name: "demo",    data() {      return {        message: "Hello"      }    },    computed: {      reversedMessage: function() {        return this.message.split("").reverse().join("")      }    }  }</script>

旧有 data 中的数据不满足当前的要求，通过计算属性的规则来适配成我们需要的格式，对原有数据并没有改变，只改变了原有数据的表现形式。

基于promise的Node.js ORM工具

Sequelize

Sequelize支持MySQL、MariaDB、SQLite等数据库方言的适配

方言

//cnpm i sequelize sqlite3 -Sconst { Sequelize, Model, DataTypes } = require("sequelize");const sequelize = new Sequelize("sqlite::memory:");class User extends Model { }User.init({    username: DataTypes.STRING}, { sequelize, modelName: "user" });sequelize.sync()    .then(() User.create({        username: "zhufeng"    }))    .then(result {        console.log(result.toJSON());    });

会让系统变得零乱，明明调用 A，却被适配到了 B，如果系统中这样的情况很多，那么对可阅读性不太友好。如果没必要使用适配器模式的话，可以考虑重构，如果使用的话，可以考虑尽量把文档完善。

​文章出自：​​前端餐厅ReTech​​，如有转载本文请联系前端餐厅ReTech今日头条号。

github：https://github.com/zuopf769