详解JavaScript实现设计模式中的适配器模式的方法


Posted in Javascript onMay 18, 2016

有的时候在开发过程中,我们会发现,客户端需要的接口和提供的接口发生不兼容的问题。由于特殊的原因我们无法修改客户端接口。在这种情况下,我们需要适配现有接口和不兼容的类,这就要提到适配器模式。通过适配器,我们可以在不用修改旧代码的情况下也能使用它们,这就是适配器的能力。
适配模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象。
从表面上看,适配器模式很像外观模式。它们都要对别的对象进行包装并改变其呈现的接口。二者的差别在于它们如何改变接口。外观元素展现的是一个简化的接口,它并不提供额外的选择,而且有时为了方便完成常见任务它还会做出一些假定。而适配器则要把一个接口转换为另一个接口,它并不会滤除某些能力,也不会简化接口。如果客户系统API不可用,就需要用到适配器。

基本理论

适配器模式:将一个接口转换成客户端需要的接口而不需要去修改客户端代码,使得不兼容的代码可以一起工作。

适配器主要有3个角色组成:
(1)客户端:调用接口的类
(2)适配器:用来连接客户端接口和提供服务的接口的类
(3)适配者:提供服务,但是却与客户端接口需求不兼容服务类。

适配器模式的实现

1.最简单的适配器

适配器模式没有想象中的那么复杂,举个最简单的例子。
客户端调用一个方法进行加法计算:

var result = add(1,2);

但是我们没有提供add这个方法,提供了同样类似功能的sum方法:

function sum(v1,v2){
  return v1 + v2;
}

为了避免修改客户端和服务端,我们增加一个包装函数:

function add (v1,v2){
  reutrn sum(v1,v2);
}

这就是一个最简单的适配器模式,我们在两个不兼容的接口之间添加一个包装方法,用这个方法来连接二者使其共同工作。

2.实际应用

随着前端框架的发展,越来越多的开发者开始使用MVVM框架进行开发,只需要操作数据而不需要操作DOM元素,jQuery的作用越来越少。而很多项目中还是引用着jQuery库作用工具类,因为我们要利用jQuery提供的ajax去服务器请求数据。如果jQuery在项目中的作用仅仅是作为ajax工具库的话,有点杀鸡焉用牛刀的感觉,造成资源浪费。这个时候我们完全可以封装一个自己的ajax库。
假设我们封装的ajax就通过一个函数进行使用:

ajax({
  url:'/getData',
  type:'Post',
  dataType:'json',
  data:{
    id:"123"
  }
})
.done(function(){})

除了调用接口ajax与jQuery的$.ajax的不同,其他完全一样。
项目中请求ajax的地方必然很多,我们替换jQuery的时候不可能一个一个去修改$.ajax,那怎么办呢,这个时候,我们就可以增加一个适配器:

var $ = {
  ajax:function (options){
    return ajax(options);
  }
}

这样就能兼容旧代码和新接口,避免对已有的代码的修改。

总结

适配器模式的原理很简单,就是新增一个包装类,对新的接口进行包装以适应旧代码的调用,避免修改接口和调用代码。
适用场景:存在较多代码调用旧接口,为了避免修改旧代码和更换新接口,不影响现有实现方式的应用场景。

1.适配器模式的适用场合:
适配器适用于客户系统期待的接口与现有API提供的接口不兼容这种场合。适配器所适配的两个方法执行的应该是类似的任务,否则的话就解决不了问题。就像桥接元素和外观元素一样,通过创建适配器,可以把抽象与其实现隔离开来,以便二者独立变化。

2.适配器模式之利:
用一个新的接口对现有类的接口进行包装,这样客户程序就能使用这个并非为其量身打造的类而又无需为此大动手术。

3.设配器模式之弊:
有人认为适配器是一种不必要的开销,完全可以通过重写现有代码避免。此外适配器模式也会引入一批需要支持的新工具。如果现有API还未定形,或者新接口还未定形,那么适配器可能不会一直管用。
在涉及大型系统和遗留框架的情况下,它的优点往往比缺点更突出。

Javascript 相关文章推荐
原生js制作简单的数字键盘
Apr 24 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
JS搜狐面试题分析
Dec 16 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
深入剖析javascript中的exec与match方法
May 18 #Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 #Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 #Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 #Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 #Javascript
JQuery解析XML数据的几个简单实例
May 18 #Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 #Javascript
You might like
基于empty函数的输出详解
2013/06/17 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
用ADODB.Stream转换
2007/01/22 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
浅谈Python 参数与变量
2020/06/20 Python
深入了解Python enumerate和zip
2020/07/16 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
Java基础知识面试要点
2016/07/29 面试题
程序员跳槽必看面试题总结
2013/06/28 面试题
社区文化建设方案
2014/05/02 职场文书
结对共建协议书
2014/08/20 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
2019各种承诺书范文
2019/06/24 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
分析Netty直接内存原理及应用
2021/06/14 Java/Android