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

适配器模式

适配器模式

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

适配接口

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

例子:

// 百度地图提供的接口
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

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

点击查看更多内容
TA 点赞

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

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消