栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

适配器模式

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

适配器模式

适配器模式

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

适配接口

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

例子:

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

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/243806.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号