JavaScript设计模式学习之适配器模式

 更新时间:2021年04月26日 08:52:14   作者:有梦想的咸鱼前端  
这篇文章主要介绍了JavaScript设计模式之适配器模式,对设计模式不熟悉的同学,可以参考学习一下

概述

适配器模式是设计模式行为型模式中的一种模式;

定义:

适配器用来解决两个已有接口之间不匹配的问题,它并不需要考虑接口是如何实现,也不用考虑将来该如何修改;适配器不需要修改已有接口,就可以使他们协同工作;

白话解释:

你买了某种电器产品,准备带回家好好感受该款产品的魅力;结果带回家之后准备通电使用的时候,发现该产品仅支持两孔插座,而你家里的电源插座都是三孔插座;这个时候你总不能又跑去电器专卖店退货吧;突然灵机一动,你想起来了家里还有多功能电源插座,而多功能电源插座恰好就是三孔,于是你拿出你的多功能电源插座插上电源插座,再拿你电器产品的电源插座插在多功能插座上面的两孔插座上,开始享受美滋滋的生活;这里的多功能插座就是一个适配器;

代码实现

var googleMap = {
    show: function(){
        console.log( '开始渲染谷歌地图' );
    }
};
var baiduMap = {
    show: function(){
        console.log( '开始渲染百度地图' );
    }
};
var renderMap = function( map ){
    if ( map.show instanceof Function ){
        map.show();
    }
};

renderMap( googleMap ); // 开始渲染谷歌地图
renderMap( baiduMap ); // 开始渲染百度地图

当然上面的代码是能够正常运行的,这得益于这两个对象中的参数名都是一样的,所以才能够正常的运行和显示;

var googleMap = {
    show: function(){
        console.log( '开始渲染谷歌地图' );
    }
};
var baiduMap = {
    display: function(){
        console.log( '开始渲染百度地图' );
    }
};

突然有一天如果baiduMap的方法名改变了呢?那么我们再跟上面一样运行肯定是会报错的,因为baiduMap对象中已经没有了show()这个方法了;

使用适配器模式来修改:

var googleMap = {
    show: function(){
        console.log( '开始渲染谷歌地图' );
    }
};
var baiduMap = {
    display: function(){
        console.log( '开始渲染百度地图' );
    }
};
var baiduMapAdapter = {
    show: function(){
        return baiduMap.display();

    }
};

renderMap( googleMap ); // 开始渲染谷歌地图
renderMap( baiduMapAdapter ); // 开始渲染百度地图

在这段代码中适配器做的事情其实很简单,就是创建了一个对象,添加了一个同名的show()方法,然后在适配器里面调用了baiduMap.display()方法,这样我们只需要在调用baiduMap的时候调用我们的适配器即可达到预期效果;

我们作为前端开发人员,对页面上期待得到的数据和数据格式肯定是比较了解的,但是在前后端分离的开发模式中有的时候会遇到这种尴尬的处境:

我们都知道很多UI组件或者工具库会按指定的数据格式进行渲染,但是这个时候后端是不知道的;所以可能接口出来的数据我们是不能直接正常的在页面上渲染的,而此时老板催促我们赶紧上线,而后端坚持认为数据格式没问题,坚决不修改;这个时候我们可以通过适配器模式来前端格式化数据;

后端返回的json数据格式:

[
  {
    "day": "周一",
    "uv": 6300
  },
  {
    "day": "周二",
    "uv": 7100
  },  {
    "day": "周三",
    "uv": 4300
  },  {
    "day": "周四",
    "uv": 3300
  },  {
    "day": "周五",
    "uv": 8300
  },  {
    "day": "周六",
    "uv": 9300
  }, {
    "day": "周日",
    "uv": 11300
  }
]

Echarts图表图形需要的数据格式:

["周二", "周二", "周三", "周四", "周五", "周六", "周日"] //x轴的数据

[6300. 7100, 4300, 3300, 8300, 9300, 11300] //坐标点的数据

虽然心里苦,但还是要解决问题!使用适配器来解决:

//x轴适配器
function echartXAxisAdapter(res) {
  return res.map(item => item.day);
}

//坐标点适配器
function echartDataAdapter(res) {
  return res.map(item => item.uv);
}

创建两个函数分别对数据按照echarts所需要的数据格式进行格式化处理即可解决问题;这两个方法其实就是一个适配器,把指定的数据丢进去即可按照指定规则输出我们期待得到的数据格式;

总结

个人认为适配器模式其实是一种亡羊补牢式的设计模式,如果在项目开发的开始阶段我们就知道我们期待的数据格式或者方法名等,我们就可能永远都用不到适配器模式;但是项目的迭代往往是不可预期的,当项目迭代之后数据格式或者方法名发生变化之后,我们通常可以使用适配器模式来进行适配解决;当然了,最好的解决办法就是项目开发过程中前后端协商讨论数据格式、文件名等代码规范,这样是对项目的开发效率是会有很大的提升的;

以上就是JavaScript设计模式学习之适配器模式的详细内容,更多关于JavaScript设计模式的资料请关注脚本之家其它相关文章!

相关文章

  • javascript实现带节日和农历的日历特效

    javascript实现带节日和农历的日历特效

    这篇文章主要介绍了javascript实现带节日和农历的日历特效,效果十分棒,需要的朋友可以参考下
    2015-02-02
  • 详解ECMAScript6入门--Class对象

    详解ECMAScript6入门--Class对象

    本篇文章主要介绍了详解ECMAScript6入门--Class对象,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • js实现二代身份证号码验证详解

    js实现二代身份证号码验证详解

    本文给大家分享一段超级全面的二代身份证号码验证程序,由JS编写而成,可以校验身份证的地址码、出生日期码、顺序码和数字校验码。是身份证去伪存真的一大利器。
    2014-11-11
  • js 深拷贝函数

    js 深拷贝函数

    Javascript中的对像赋值与Java中是一样的,都为引用传递.就是说,在把一个对像赋值给一个变量时,那么这个变量所指向的仍就是原来对像的地址.那怎么来做呢 答案是克隆.
    2008-12-12
  • JavaScript函数返回值的具体使用

    JavaScript函数返回值的具体使用

    本文主要介绍了JavaScript函数返回值,包括基本返回值、多返回值、异步函数的返回值等,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • uniapp几行代码解决滚动穿透问题(项目实战)

    uniapp几行代码解决滚动穿透问题(项目实战)

    这篇文章主要介绍了uniapp几行代码解决滚动穿透问题,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • DOM节点的替换或修改函数replaceChild()用法实例

    DOM节点的替换或修改函数replaceChild()用法实例

    这篇文章主要介绍了DOM节点的替换或修改函数replaceChild()用法,实例分析了replaceChild()替换DOM节点的使用技巧,需要的朋友可以参考下
    2015-01-01
  • JS简单实现表格排序功能示例

    JS简单实现表格排序功能示例

    这篇文章主要介绍了JS简单实现表格排序功能,涉及javascript针对页面元素的遍历、判断与排序相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • uniapp 引用 js 组件的方法(场景分析)

    uniapp 引用 js 组件的方法(场景分析)

    在UniApp开发过程中,我们不仅需要掌握各种UI组件的使用方法,还需要了解如何在项目中引入JS文件,在本文中,我将介绍UniApp中如何引入JS的方法,感兴趣的朋友跟随小编一起看看吧
    2023-09-09
  • 重学JS之显示强制类型转换详解

    重学JS之显示强制类型转换详解

    这篇文章主要给大家介绍了关于重学JS之显示强制类型转换的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06

最新评论