JavaScript设计模式-适配器模式

概念

• 适配器模式的作用是解决两个软件实体间的接口不兼容的问题。使用适配器模式之后，原本 由于接口不兼容而不能工作的两个软件实体可以一起工作。

• 适配器的别名是包装器（wrapper），这是一个相对简单的模式。在程序开发中有许多这样的 场景：当我们试图调用模块或者对象的某个接口时，却发现这个接口的格式并不符合目前的需求。 这时候有两种解决办法，第一种是修改原来的接口实现，但如果原来的模块很复杂，或者我们拿 到的模块是一段别人编写的经过压缩的代码，修改原接口就显得不太现实了。第二种办法是创建 一个适配器，将原接口转换为客户希望的另一个接口，客户只需要和适配器打交道。

• 现实中的适配器：转接头

• 适配器模式是一种“亡羊补牢”的模式，没有人会在程序的设计之初就使用它。

// 定义两个第三方的api，他们都是用show方法调用
        const googleMap = {
            show: function () {
                console.log('开始渲染谷歌地图')
            }
        }
        const baiduMap = {
            show: function () {
                console.log('开始渲染百度地图')
            }
        }

        // 这是我们自己的调用方法
        const renderMap = function (map) {
            if (map.show instanceof Function) {
                map.show()
            }
        }
        renderMap(googleMap) // 输出：开始渲染谷歌地图
        renderMap(baiduMap) // 输出：开始渲染百度地图

        // 这段程序得以顺利运行的关键是 googleMap 和 baiduMap 提供了一致的 show 方法，
        // 但第三方的接口方法并不在我们自己的控制范围之内，假如 baiduMap 提供的显示地图的方法不叫 show 而叫display 呢？

        // 添加一个适配器
        const baiduMapAdapter = {
             show: function(){
                 return baiduMap.display()
             }
         }
        // // 通过适配器可以正常调用baiduMap了
        renderMap( googleMap ); // 输出：开始渲染谷歌地图
        renderMap( baiduMapAdapter ); // 输出：开始渲染百度地图


        // 再来看看另外一个例子。假设我们正在编写一个渲染广东省地图的页面。目前从第三方资源
        //里获得了广东省的所有城市以及它们所对应的 ID，并且成功地渲染到页面中：
        const getGuangdongCity = function () {
            const guangdongCity = [
                {
                    name: 'shenzhen',
                    id: 11,
                }, {
                    name: 'guangzhou',
                    id: 12,
                }
            ]
            return guangdongCity
        }
        const render = function (fn) {
            console.log('开始渲染广东省地图数据', fn())
        }
        // render(getGuangdongCity)

        // 利用这些数据，我们编写完成了整个页面，并且在线上稳定地运行了一段时间。但后来发现
        // 这些数据不太可靠，里面还缺少很多城市。于是我们又在网上找到了另外一些数据资源，这次的
        // 数据更加全面，但遗憾的是，数据结构和正运行在项目中的并不一致。新的数据结构如下：
        // 就是我们想要用新的数据结构，新结构如下，但是不用改变原先的getGuangdongCity，只需要新增一个addressAdapter，去把旧数据转换成我们想要的格式
        const guangdongCity = {
            shenzhen: 11,
            guangzhou: 12,
            zhuhai: 13
        }
        console.log('新结构是这样的', guangdongCity)
        // 除了大动干戈地改写渲染页面的前端代码之外，另外一种更轻便的解决方式就是新增一个数
        // 据格式转换的适配器：
        const addressAdapter = function (oldAddressfn) {
            const address = {}
            const oldAddress = oldAddressfn()
            for (let i = 0; i < oldAddress.length; i++) {
                const c = oldAddress[i]
                address[c.name] = c.id
            }
            return function () {
                return address
            }
        }
        // 把旧数据转成我们想要的
        render(addressAdapter(getGuangdongCity))

总结

• 适配器模式主要用来解决两个已有接口之间不匹配的问题，它不考虑这些接口是怎样实现的，也不考虑它们将来可能会如何演化。适配器模式不需要改变已有的接口，就能够使它们协同作用。
• 当后端接口改了，但你又不想改原先代码，这个时候可以用这个

github仓库地址：点击 设计模式例子 查看