设计模式之适配器模式

什么是适配器模式

适配器模式（Adapter）是将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），适配器模式使得原本由于接口不兼容而不能一起工作的那些类（对象）可以一些工作。速成包装器（wrapper）。

生活中的设配器

其实生活中运用了很多的适配，比如你先有了圆形接头的耳机线，然后你买了个type-c口的手机，耳机也贵，手机也贵咋办（土豪忽略），那就买个耳机转接头呗，大概就是这个样子的（给没用过转接头的土豪看的）。

在代码里面的应用

前端有个需求要展示树形结构，
后端大佬太忙，只给你这样子的数据

//旧的数据格式
const oldData = [
  {
    nodeId: 1,
    parentId: 0,
    name: "1"
  },
  {
    nodeId: 2,
    parentId: 0,
    name: "12"
  },
  {
    nodeId: 3,
    parentId: 1,
    name: "123"
  },
  {
    nodeId: 4,
    parentId: 3,
    name: "1234"
  },
  {
    nodeId: 5,
    parentId: 2,
    name: "12345"
  }
];

树形结构要求的数据是这样的

//新的数据格式
const newData = [
  {
    nodeId: 1,
    parentId: 0,
    name: "1",
    children: [
      {
        nodeId: 3,
        parentId: 1,
        name: "123",
        children: [
          {
            nodeId: 4,
            parentId: 3,
            name: "1234"
          }
        ]
      }
    ]
  },
  {
    nodeId: 2,
    parentId: 0,
    name: "12",
    children: [
      {
        nodeId: 5,
        parentId: 2,
        name: "12345"
      }
    ]
  }
];

那么我们就需要写一个函数将旧的数据改成新的数据去兼容树形结构

function adapter(data) {
  //一般来说不要修改源数据
  const cloneData = JSON.parse(JSON.stringify(data)).map(item => ({
    ...item,
    children: []
  }));
  const dataMap = cloneData.reduce((res, item) => {
    res[item.nodeId] = item;
    return res;
  }, {});
  return cloneData.reduce((res, item) => {
    if (dataMap[item.parentId]) {
      dataMap[item.parentId].children.push(item);
    } else {
      res.push(item);
    }
    return res;
  }, []);
}

function newFn(data) {
 let newData = adapter(data)
 console.log(newData)
}

还有我们vue里面常用的computed属性，其实也是一种适配

//HTML代码
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

//javascirpt
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

//显示结果
Original message: "Hello"
Computed reversed message: "olleH"

参考掘金小册《JavaScript 设计模式核⼼原理与应⽤实践》