设计模式——适配器模式(适配器模式的定义、实际项目的运用、以及个人对适配器模式的理解)

适配器模式概念

有时候也称包装样式或者包装(wrapper)。将一个类的接口转接成用户所期待的。一个适配使得因接口不兼容而不能在一起工作的类能在一起工作，做法是将类自己的接口包裹在一个已存在的类中。

说人话就是，你的3.5mm耳机不能插入新买的MatePro 30，所以买了一个type-c转接头,这样就能愉快插入新买的MatePro 30了。type-c转接头就可以理解为适配器。这样就可以让两个不兼容的事物或者接口连接在一起并且实现事物本身的作用，听歌、打电话

实现3.5mm耳机通过适配器连接手机

// 构造一个MeatePro30类 实现了播放音乐 插入耳机
class MeatePro30{
    constructor(){
        // 播放模式
        this.broadcastPattern = '外放模式'
    }
    listenMusic(){
        console.log(`播放音乐，当前为${this.broadcastPattern}`)
    }
    insertHeadset(headset){
        if(headset!=='TypeC接口'){
            throw '无法插入，不同接口'
        }
        console.log('插入成功，当前为耳机模式')
        this.broadcastPattern = '耳机模式'
    }
}
// 小明买到了自己的手机
const xiaoMingMatePro30 = new MeatePro30
// 播放音乐
xiaoMingMatePro30.listenMusic() //播放音乐，当前为外放模式
// 怕吵到看电视剧的女朋友，决定拿出耳机
const headset35 = '3.5mm接口'

// xiaoMingMatePro30.insertHeadset(headset35) // 无法插入，不同接口

// 糟糕不同的接口无法插入，拿出盒子里的适配器
function headset35ToTypeC(headset35){
    console.log('经历了一个复杂的转换')
    headset35 = 'TypeC接口'
    return headset35
}
// 连接在一起
const headset35TypeC = headset35ToTypeC(headset35) // 经历了一个复杂的转换
// 插入手机，终于可以连接了
xiaoMingMatePro30.insertHeadset(headset35TypeC) // 插入成功，当前为耳机模式
// 播放下音乐
xiaoMingMatePro30.listenMusic() //播放音乐，当前为耳机模式

实际项目中使用

处理后台返回的数据结构

这个道友们应该经常使用吧，毕竟后台还是比复杂懒的，所以有时候接口返回的数据结构并不是我们想要的。所以我们要通过自己的处理才能才使用

const results = [{
        id: 1,
        pid: 0,
        name: '我是菜单1'
    },
    {
        id: 2,
        pid: 1,
        name: '我是菜单1-1'
    },
    {
        id: 3,
        pid: 0,
        name: '我是菜单2'
    },
    {
        id: 4,
        pid: 3,
        name: '我是菜单2-1'
    },
]
// 数组转树状结构方法
function arrToTree(arr) {
    const data = JSON.parse(JSON.stringify(arr)) // 深拷贝无脑解决方案，具体引发问题之前的文章有介绍
    const result = []
    if (!Array.isArray(data)) {
        return result
    }
    data.forEach(item => {
        delete item.children
    })
    const map = {}
    data.forEach(item => {
        map[item.id] = item
    })
    data.forEach(item => {
        const parent = map[item.pid]
        if (parent) {
            (parent.children || (parent.children = [])).push(item)
        } else {
            result.push(item)
        }
    })
    return result
}

function render(tree) {
    console.log('渲染菜单')
    console.log(tree)
}
// 调用render
render(arrToTree(results)) //渲染菜单

修言大大的设计模式里讲到了 axios在web环境与node环境中实现了相同入参，相同返回。建议道友有时间可以阅读下修言大大的小册以及axios的源码。后续的文章我也会发关于axios源码的分析及理解

文末送上修言大大对一个好的适配器的定义

一个好的适配器的自我修养——把变化留给自己，把统一留给用户。暴露给用户的都是十分简单的统一的东西——统一的接口，统一的入参，统一的出参，统一的规则。