JavaScript设计模式_14_适配器模式

适配器模式是一种相对简单的设计模式，它的出现主要是为了解决两个软件接口不统一的问题。

/**
 * pre:适配器模式
 */
//----------- 示例1 ----------
/**
 * 有一个地图渲染器，可以渲染百度地图，也可以渲染谷歌地图。
 * 但百度地图提供的接口是display方法，谷歌是show方法，为了统一，我们写一个百度地图适配器。
 * 代码如下：
 */
var googleMap = {
    show: function() {
        console.log("谷歌地图.");
    }
};
var baiduMap = {
    display: function() {
        console.log("百度地图.");
    }
};
var baiduMapAdapter = {
    show: function() {
        baiduMap.display();
    }
};

var renderMap = function(map) {
    if(map.show instanceof Function) {
        map.show();
    }
};
renderMap(googleMap);
renderMap(baiduMap);// 会报错
renderMap(baiduMapAdapter);// 执行正常
//---------- 示例2 ------------
/**
 * 某天我们从第三方资源获取了广东省一些城市的信息，并将它们渲染在地图上，
 * 代码如下：
 */
var getGuangdongCity = function() {
    var guangdongCity = [{
        name: "shenzhen",
        id: 11
    }, {
        name: "guangzhou",
        id: 12
    }, {
        name: "zhuhai",
        id: 13
    }];
    return guangdongCity;
};

var render = function(fn) {
    console.log("开始渲染地图.");
    document.writeln(JSON.stringify(fn()));
};

render(getGuangdongCity);

/* 过了两天，我们又获取了广东省更新更全的数据，要求格式为：
 * var guangdongCity = {
 *     shenzhen:11,
 *  guangzhou:12,
 *  zhuhai:13,
 *  jiangmen:14
 * }
 * 我们写一个适配器用于转换为新的数据格式，如下：
 */
var addressAdapter = function(oldAddressfn) {
    var address = {},
        oldAddress = oldAddressfn();
    for(var i = 0, a; a = oldAddress[i++];) {
        address[a.name] = a.id;
    }
    return function() {
        return address
    };
};
render(addressAdapter(getGuangdongCity));
posted @ 2017-06-22 16:41  Stinchan  阅读(202)  评论(0)  编辑  收藏  举报