ITPub博客

首页 > 应用开发 > IT综合 > 适配器模式

适配器模式

原创 IT综合 作者:千锋Python唐小强 时间:2020-06-28 17:41:33 0 删除 编辑

适配器模式

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

适配接口

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

例子:

// 百度地图提供的接口

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
适配器模式


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69923331/viewspace-2700943/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-05-14

  • 博文量
    995
  • 访问量
    586424