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 单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...
随机推荐
- Linux进程调度策略的发展和演变(转)
转发:http://blog.csdn.net/gatieme/article/details/51701149 1 前言 1.1 进程调度 内存中保存了对每个进程的唯一描述, 并通过若干结构与其他 ...
- DataTable学习笔记 - 01
DataTable 是 jQuery 的一个插件. 代码上来吧, <!DOCTYPE html> <html> <head> <meta charset=&q ...
- js & click copy to clipboard
js & click copy to clipboard https://www.cnblogs.com/xgqfrms/p/9999061.html https://www.cnblogs. ...
- Spring(1):Spring简介
一句话概括: Spring是一种轻量级控制反转IoC和面向切面AOP的容器框架 初衷: 使用接口编程而不是类 为javabean提供一个更好的应用配置框架 javabean是一种规范而不是技术.是指符 ...
- c语言基本数据类型(short、int、long、char、float、double)
一 C 语言包含的数据类型 short.int.long.char.float.double 这六个关键字代表C 语言里的六种基本数据类型. 在不同的系统上,这些类型占据的字节长度是不同的: 在32 ...
- HNOI2013旅行
一道欺负我智商的题... 本来想打单调队列优化dp的,结果看到算法标签就点了此题 洛谷题面 首先你要理解题意,蒟蒻理解了好久.它就是说,给你一个由1和-1组成的数列,让你分成m段,并让这m段区间和最大 ...
- 【NOI2015】寿司晚宴
题目链接:http://uoj.ac/problem/129 描述 为了庆祝 NOI 的成功开幕,主办方为大家准备了一场寿司晚宴.小 G 和小 W 作为参加 NOI 的选手,也被邀请参加了寿司晚宴. ...
- kindeditor<=4.1.5上传漏洞复现
0x00 漏洞描述 漏洞存在于kindeditor编辑器里,你能上传.txt和.html文件,支持php/asp/jsp/asp.net,漏洞存在于小于等于kindeditor4.1.5编辑器中 这里 ...
- struts2练习时犯的错误(2016年11月4日)
1.Tomcat启动时报错 严重: 文档无效: 找不到语法. at (null:3:8) org.xml.sax.SAXParseException; systemId: file:/F:/Progr ...
- Android 图片加载框架 Glide 的用法
https://github.com/bumptech/glide Android图片加载框架最全解析(一),Glide的基本用法http://blog.csdn.net/guolin_blog/ar ...