一天一种设计模式-适配器模式

目的是为了解决两个软件实体接口不兼容问题。

例: 渲染地图一开始规定用show方法， 之后变成了display方法。

var googleMap = {
        show: function () {
            console.log('展示googleMap')
        }
    }

    var baiduMap = {
        show: function () {
            console.log('展示baiduMap')
        }
    }

    var renderMap = function (map) {
        if (map.show instanceof Function) {
            map.show()
        }
    }
    renderMap(googleMap);  //展示googleMap
    
    var gaodeMap = {
        display: function () {
            console.log('展示高德地图')
        }
    }

    var changeFun = (function () {
        return function (map) {
            return {
                show: function () { return map.display() }
            }
        }
    })()

    var res = changeFun(gaodeMap) //转接头

    renderMap(res)

为了不破坏原来的结构 ，新加了一个changeFun 来做转接。

例二:渲染地图，后台接口给刚开始给的结构是数组对象 id，name([{ id:'..',name:'...'},{ id:'..',name:'...'}])， 后来变成 ({ 12: '城市1', 13: '城市2' } )

 var getGuangDongCity = function () {
    var getguangdongCity = [{
      name: "shenzhen",
      id: 11
     },
     {
       name: "guangzhou",
       id: 12
      }
    ]
   return getguangdongCity
 }
 var render = function (fn) {
   console.log('开始渲染广东地图')
   document.write(JSON.stringify(fn()))
 }
 
 var city = { 12: '城市1', 13: '城市2' }
    var changeFun = function (city) {  //转换
        return function () {
            var res = []
            for (let key in city) {
                res.push({
                    name: city[key],
                    id: key
                })
            }
            return res;
        }
    }

    var todo = changeFun(city)
    render(todo)

结果:

为了不改变原来的结构，同时防止后台接口数据的反复横跳，加个适配器模式。

简单但是很实用的一种模式。

javaScript 设计模式与开始实践 --曾探