JavaScript设计模式之适配器模式

栏目: JavaScript · 发布时间: 6年前

内容简介:适配器模式(Adapter)是将一个类(对象)的接口(方法或属性)转换成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不兼容而不能一起工作的那些类(对象)可以一起工作。[旧接口格式和使用者不兼容,中间加一个适配器转换接口。]模式作用:

适配器模式(Adapter)是将一个类(对象)的接口(方法或属性)转换成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不兼容而不能一起工作的那些类(对象)可以一起工作。[旧接口格式和使用者不兼容,中间加一个适配器转换接口。]

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

UML

JavaScript设计模式之适配器模式

模式作用:

  • 使用一个已经存在的对象,但其方法或接口不符合你的要求。
  • 创建一个可复用的对象,该对象可以与其他不相关或不可见的对象协同工作。
  • 使用已经存在的一个或多个对象,但是不能进行继承已匹配它的接口。

注意事项:

  • 与代理模式的区别,代理模式是不改变原接口,适配是原接口不符合规范

代码示例

//谷歌地图show方法
var googleMap = {
  googlShow: function() {
    console.log("谷歌地图");
  }
};
//百度地图show方法
var baiduMap = {
  baiduShow: function() {
    console.log("百度地图");
  }
};
//渲染地图函数
var renderMap=function(map){
  if(map.show instanceof Function){
    map.show();        
  }
};
renderMap(googleMap);//输出:开始渲染谷歌地图
renderMap(baiduMap);//输出:开始渲染百度地图

适配器模式还有数据的适配,在现在开发中,各种UI框架层出不穷(elementUI),每个框架中对组件数据格式的定义不一样,后台返回的数据也不能完全按照框架的格式,这时作为前端程序猿,我们就需要把后台返回的数据做一次修改,以适应框架。这就是设配器的想法,不要听到 设计模式 就很恼火,说不定你每天都在用!!!

JavaScript设计模式之适配器模式

最后

创建了一个前端学习交流群,感兴趣的朋友,一起来嗨呀!

JavaScript设计模式之适配器模式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

颠覆式成长

颠覆式成长

惠特尼•约翰逊 / 张瀚文 / 中信出版集团 / 2018-8 / 49.00

你可能想要标新立异、挑战自我,甚至抛弃安逸的事业; 你可能会从目前的行业或公司中跳槽,进入一个完全陌生的崭新领域, 这本书会让你认识到颠覆式成长的意义所在。 成功没有捷径,颠覆也会令人心生惧意,但是在职业发展与个人成长上的回报,会让你克服这种恐惧,让你不断尝试、不断精进。 S型曲线精进模型将帮助你预测自己创新的成长周期,洞悉颠覆自我过程中的心路历程,在变革与颠覆中从容应对,......一起来看看 《颠覆式成长》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

html转js在线工具
html转js在线工具

html转js在线工具