为了账号安全,请及时绑定邮箱和手机立即绑定

适配器模式

2020.06.26 11:02 1575浏览

适配器模式

适配器模式主要是用来解决两个已有接口不匹配的问题,使其能够一起工作。

适配接口

比如,公司网站使用的地图一直都是百度地图:

例子:

// 百度地图提供的接口
var BaiduMap = {
    render: function() {
        console.log("百度地图");
    }
}

// 调用地图的公用方法
function mapShow(map) {
    map.render();
}

// 使用地图
mapShow(BaiduMap); // 输出 百度地图

应项目需要,必须引入高德地图:

// 高德地图提供的接口
var Amap = {
    draw: function() {
        console.log("高德地图");
    }
}

对比两种地图的接口,可以发现:两者渲染地图的方法名不同,并且两者都属于第三方提供的接口,不在我们可以修改的范围之内;此时,可以使用适配器将不符合现有系统的接口进行转换:

例子:

// 高德地图提供的接口
var Amap = {
    draw: function() {
        console.log("高德地图");
    }
}

// 适配器
// 转换高德地图的接口,使其与现有方法名匹配
var changeAmap = {
    render: function() {
        return Amap.draw();
    }
}

// 调用地图的公用方法
function mapShow(map) {
    map.render();
}

// 无需修改调用地图的公用方法,就可以使用高德地图
mapShow(changeAmap); // 输出 高德地图

适配数据

假设,公司网站前后端数据传输格式一直是下面这样:

例子:

// 后端传过来的数据格式
var nameList = [{
    name: "Tom",
    age: 20
}, {
    name: "Amy",
    age: 18
}];

// 显示数据的公用方法
function dataShow(data) {
    data.forEach(function(v) {
        console.log(v.name);
    });
}

// 显示数据
dataShow(nameList);
// 输出 Tom Amy

但运行了一段时间之后,后端需要更改数据格式:

var nameList = {
    Tom: 20,
    Amy: 18
}

如果此时需要前端来处理这种数据不匹配的问题,就可以使用适配器来转换数据格式。

例子:

// 后端传过来的数据格式
var nameList = {
    Tom: 20,
    Amy: 18
}

// 适配器
// 转换数据格式,使其能够匹配现有的数据使用方法
function changeNameList(nameList) {
    var list = [];
    for (var item in nameList) {
        var obj = {};
        obj.name = item;
        obj.age = nameList[item];
        list.push(obj);
    }
    return list;
}

// 显示数据的公用方法
function dataShow(data) {
    data.forEach(function(v) {
        console.log(v.name);
    });
}

// 无需修改显示数据的公用方法,依然可以正常运行
dataShow(changeNameList(nameList));
// 输出 Tom Amy

如有错误,欢迎指正,本人不胜感激。

点击查看更多内容

本文首次发布于慕课网 ,转载请注明出处,谢谢合作

0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消