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 相关文章推荐
jQuery get和post 方法传值注意事项
Nov 03 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
ES6对象操作实例详解
May 23 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 Javascript
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获取英文姓名首字母的方法
2015/07/13 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
浅析Python中signal包的使用
2015/11/13 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
"引用"与多态的关系
2013/02/01 面试题
数据库专业英语
2012/11/30 面试题
2015年文明创建工作总结
2015/04/30 职场文书