JS设计模式——11.适配器模式
适配器模式概述
适配器模式可用来在现有接口和不兼容的类之间进行适配。使用这种模式的对象又叫包装器(wrapper)。
适配器特点
从表面看,适配器模式很像门面模式。她们都要对别的对象进行包装并改变其呈现的接口。
二者的区别在于她们如何改变接口:
- 门面元素展现的是一个简化的接口,她并不提供额外的选择,而且有时为了方便完成任务她还会做出一些假定。
- 适配器则要把一个接口转换为另一个接口,她并不滤除某些能力,也不会简化接口。
假设有一个对象,还有一个以三个字符串为参数的函数:
var clientObject = {
string1: 'foo',
string1: 'bar',
string1: 'baz'
};
function interfaceMethod(str1, str2, str3){
console.log('ehhe');
}
为了把clientObject作为参数传递给interfaceMethod,需要用到适配器。如下:
function clientToInterfaceAdapter(o){//适配器
interfaceMethod(o.string1, o.string2, o.string3);
}
示例:适配两个库
下面我们来实现从Prototype库的$函数到YUI的get方法的转换。这两个函数的功能比较相似,不过先看看她们在接口方面的差别:
function $(){
var elments = new Array();
for(var i=0; i<arguments.length; i++){
var element = arguments[i];
if(typeof element == 'string'){
element = document.getElementById(element);
}
if(arguments.length == 1){
return element;
}
elments.push(element);
}
return elements;
}
YAHOO.util.Dom.get = function(el){
if(YAHOO.lang.isString(el)){
return document.getElementById(el);
}
if(YAHOO.lang.isArray(el)){
var c = [];
for(var i= 0, len=el.length; i<len; i++){
c[c.length] = YAHOO.util.Dom.get(el[i]);
}
return c;
}
if(el){
return el;
}
return null;
}
二者的区别主要在于:get具有一个参数,这个参数可以是一个HTML元素、字符串或者由字符串或HTML元素组成的数组,与此不同,$函数没有正式列出参数,而是允许客户传入任意数目的参数,不管是字符串还是HTML元素都行。
如果要实现从$方法到get方法的转换(或者相反),那么用于这个用途的适配器会是什么样子呢?
function $2getAdapter(){
return YAHOO.util.Dom.get(arguments);
}
function get2$Adapter(el){
return $.apply(window, el instanceof Array ?el: [el]);
}
对于从Prototype改投YUI的人应该如下使用:
$ = $2getAdapter;
相反的如下使用:
YAHOO.util.Dom.get = get2$Adapter;
适配器模式的使用场合
适配器适用于客户系统期待的接口与现有API提供的接口不兼容这种场合。她只能用来协调语法上的差异问题。适配器所适配的两个方法执行的应该是类似的任务,否则她就解决不了问题。
适配器模式之利
适配器模式有利于避免大规模改写现有客户代码。
适配器模式之弊
如果现有API还未定形,或者新街口还未定形,那么适配器可能不会一直管用。
JS设计模式——11.适配器模式的更多相关文章
- 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
- js设计模式总结1
js设计模式有很多种,知道不代表会用,更不代表理解,为了更好的理解每个设计模式,对每个设计模式进行总结,以后只要看到总结,就能知道该设计模式的作用,以及模式存在的优缺点,使用范围. 本文主要参考张容铭 ...
- 大型Java进阶专题(八)设计模式之适配器模式、装饰者模式和观察者模式
前言 今天开始我们专题的第八课了.本章节将介绍:三个设计模式,适配器模式.装饰者模式和观察者模式.通过学习适配器模式,可以优雅的解决代码功能的兼容问题.另外有重构需求的人群一定需要掌握装饰者模式. ...
- 每天一个设计模式-3 适配器模式(Adapteer)
每天一个设计模式-3 适配器模式(Adapteer) 1.现实中的情况 旧式电脑的硬盘是串口的,直接与硬盘连接,新硬盘是并口的,显然新硬盘不能直接连在电脑上,于是就有了转接线.好了,今天的学习主题出来 ...
- JS设计模式(一)
刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...
- Head First 设计模式之适配器模式与外观模式
Head First设计模式之适配器模式与外观模式 前言: 之前讲过装饰者模式,将对象包装起来并赋予新的职责,这一章我们也会将对象进行包装,只不过是让它们看起来不像自己而像是别的东西.这样就可以在设计 ...
- C#设计模式(7)——适配器模式(Adapter Pattern)
一.引言 在实际的开发过程中,由于应用环境的变化(例如使用语言的变化),我们需要的实现在新的环境中没有现存对象可以满足,但是其他环境却存在这样现存的对象.那么如果将“将现存的对象”在新的环境中进行调用 ...
- js设计模式(12)---职责链模式
0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...
- JS设计模式——5.单体模式
JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html 单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...
随机推荐
- 理解RESTful架构【转】
越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency).高 ...
- NeuralEnhance: 提高图像分辨率的深度学习模型
NeuralEnhance是使用深度学习训练的提高图像分辨率的模型,使用Python开发,项目地址:https://github.com/alexjc/neural-enhance. 貌似很多电影都有 ...
- 安装Zookeeper出现Unable to start AdminServer,existing abnormally问题解决方法
问题如下: 出现这个问题主要是由于8080端口占用,可在zoo.cfg中增加admin.serverPort=没有被占用的端口号解决问题.
- Java继承,重写方法时改变方法的访问权限
java中的方法天生具有继承多态特性,这点与C++有很大不同(需要在父类方发上加virtual关键字),但用起来确实方便了许多. 最简单的继承多态 声明一个接口BaseIF,只包含一个方法声明 pub ...
- Qt——常用控件样式
下面是我设计.调整.修改的Qt控件样式,仅供参考. Github地址:https://github.com/ikongziming/QtDemo/tree/master/StyleSheetDemo ...
- 【转】VS2012简单的使用感受+插件推荐
转自:http://blog.sina.com.cn/s/blog_58c506600101b34t.html ~PS:后面有博主自己补充的VS2013的哦~ 1.Visual Studio Achi ...
- 服务器启动完成执行定时任务Timer,TimerTask
由于项目需求:每隔一段时间就要调外部接口去进行某些操作,于是在网上找了一些资料,用了半天时间弄好了,代码: import java.util.TimerTask; public class Accou ...
- Rancher Server HA的高可用部署实验-学习笔记
转载于https://blog.csdn.net/csdn_duomaomao/article/details/78771731 Rancher Server HA的高可用部署实验-学习笔记 一.机器 ...
- Mac 上配置 PhpMyAdmin
一.配置自带的 apache 服务器环境 由于 PHP apache 环境在 Mac OS上是自带的,所以不需要另处下安装包,只需要简单配置一下即可.首先打开终端输入命令: sudo vim /etc ...
- python 中的queue, deque
python3 deque(双向队列) 创建双向队列 import collections d = collections.deque() append(往右边添加一个元素) import colle ...