Adapter适配器模式在JavaScript设计模式编程中的运用分析


Posted in Javascript onMay 18, 2016

定义
适配器模式(Adapter)是将一个类(对象)的接口(方法或属性)转化成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不兼容而不能一起工作的那些类(对象)可以一些工作。速成包装器(wrapper)。

适配器的别名是包装器(wrapper),这是一个相对简单的模式。在程序开发中有许多这样的场景:当我们试图调用模块或者对象的某个接口时,却发现这个接口的格式并不符合目前的需求。这时候有两种解决办法,第一种是修改原来的接口实现,但如果原来的模块很复杂,或者我们拿到的模块是一段别人编写的经过压缩的代码,修改原接口就显得不太现实了。第二种办法是创建一个适配器,将原接口转换为客户希望的另一个接口,客户只需要和适配器打交道。

为什么需要采用适配器模式?
在开发应用程序时,您往往会需要更换其中某一部分,例如,您用于保存日志或类似性质的内容的一个库。 当您用一个新库来替换它时,新库不太可能有完全相同的接口。 从这里开始,您有两种选择:
(1)检查所有代码,并更改指向旧库的一切代码。
(2)创建一个适配器,使新库可以使用与旧库相同的接口。
显然,在一些情况下,假如您的应用程序很小,或者对旧库的引用很少,更合适的做法是检查完整的代码,并更改它以匹配新库,而不是添加一个新的抽象层,使代码更复杂。 但是,在大多数情况下,创建一个适配器更为实用且节省时间。

JavaScript代码示例

一件事情有可能发生时,它就一定会发生。首先让我们来看一下这个小小的LoggerFactory,它让我们能更容易地修改我们使用的日志接口。

var LoggerFactory = {
  getLogger: function() {
    return window.console;
  },
  ...
};

/* 用法示例 */
var logger = LoggerFactory.getLogger();
logger.log("something to log");

在我们调用getLogger时它给我们返回了控制台对象(console)。为了这个练习我们假装console对象只有一个方法——log,并且它只能接收一个字符串类型的参数。 接下来,我们有另一个日志接口,这个会复杂些,因为1)它是用JavaScript实现的,不像console那样是浏览器本身就有的;2)它会把日志通过AJAX发送到服务器,这也意味着我们要对URL数据进行编码(代码里不会具体实现URL编码相关的事,因为它和我们的要讲的适配器模式毫不相干)。当然,它会使用一个和控制台不同的接口。

var AjaxLogger = {
  sendLog: function() {
    var data = this.urlEncode(arguments);

    jQuery.ajax({
      url: "http://example.com/log",
      data: data
    });
  },

  urlEncode: function(arg) {
    ...
    return encodedData;
  },
  ...
};

我们使用了jQuery的AJAX请求,主要是为了节省时间,忽略那些和适配器模式不想干的事情。 我们现在要做的事情就是创建一个适配器,并且改变之前的LoggerFactory让其返回这个适配器而不是控制台对象。

var AjaxLoggerAdapter = {
  log: function(arg) {
    AjaxLogger.sendLog(arg);
  }
};

/* 调整 LoggerFactory */

var LoggerFactory = {
  getLogger: function() {
    // 改变返回值
    return AjaxLoggerAdapter;
  },
  ...
};

我们对现有代码只做了一行更改,整个程序就可以使用这个新的日志接口了。

复杂适配器

日志接口是个很简单的例子,它只有一个方法,把它直接映射到旧的方法上也没什么难的。大多数情况下并不是如此。你可能会碰到这样的问题,即这些互相映射的函数的参数是完全不同的,旧接口可能根本没有这些参数,你必须自己处理它们。某些情况下,你又必须删掉一些参数,因为新的接口根本用不上它们。如果两个对象之间的接口映射太难,我们就要想想别的办法了,反正我不希望查找和修改数千行旧代码。

Javascript 相关文章推荐
javascript Array.remove() 数组删除
Aug 06 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
Three.js学习之网格
Aug 10 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
jQuery添加options点击事件并传值实例代码
May 18 #Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 #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
You might like
php快递单号查询接口使用示例
2014/05/05 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
实现PHP搜索加分页
2016/10/12 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Python 的内置字符串方法小结
2016/03/15 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
python学生信息管理系统实现代码
2019/12/17 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
Python中Yield的基本用法
2020/10/18 Python
Python中常用的os操作汇总
2020/11/05 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
《木笛》教学反思
2014/03/01 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
2014年就业工作总结
2014/11/26 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
在Python中如何使用yield
2021/06/07 Python
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS