js设计模式(6)---适配器模式
0.前言
脖子又开始痛了,难道还没成为码农就开始出现颈椎问题,一直以来举得自己不算那种死宅的人,怎么这么年轻就出现这种问题。哎,不管了,还是先把自己学习的适配器模式写出来,算是一种总结吧。
1.为什么存在该模式
在项目的实际开发过程中,期待的接口与现有的接口之间存在不兼容问题,但是又不规模修改代码,为了达到兼容性,就需要使用这种模式。通过这种接口使得原来由于接口不兼容而不能一起工作的那些类可以一起工作,也就是用一个新的的接口包装另外一个对象。
与门面模式的区别:都是对别的对象进行包装并改变呈现接口,但是二者的区别在不如何改变接口。门面模式展现的是一个简化的接口,并不提供额外的选择,而适配器模式则要把一个接口转换为另一个接口,它并不会滤除某些能力,也不会简化接口。
适配器的工作机制是:用一个新的接口对现有类的接口进行包装。
2.举例说明:
//假如有一个3个字符串参数的函数,但是现在拥有的却是一个包含三个字符串元素的对象,那么就可以用一个配置器来衔接二者 var clientObject = { str1:'bat', str2:'foo', str3:'baz' } function interfaceMethod(str1,str2,str3){ alert(str1) } //配置器函数 function adapterMethod(o){ interfaceMethod(o.str1, o.str2, o.str3); } adapterMethod(clientObject) //adapterMethod函数的作为就在于对interfaceMethod函数进行包装,并把传递给它的参数转换为后者需要的形式。
适配器模式还可以用来适配两个库:
//先看它们在接口方面的差别 //Prototype $ function function $(){ var elements =new Array(); for(var i=0;i<arguments.length;i++){ var element = arguments[i]; if(typeof element =='string'){ element = document.getElementById(element); } if(typeof.length ==1) return element; elements.push(element); } return elements; } //YUI get method 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; } returnnull; } //二者区别就在于get具有一个参数,且可以是HTML,字符串或者数组;而$木有正是的参数,允许使用者传入任意数目的参数,不管HTML还是字符串。 //如果需要从使用Prototype的$函数改为使用YUI的get方法(或者相反,那么用适配器模式其实很简单) function PrototypeToYUIAdapter(){ return YAHOO.util.Dom.get(arguments); } function YUIToPrototypeAdapter(el){ return $.apply(window,el instanceof Array?el:[el]); }
3.个人理解
1.就是期望的接口跟现有的接口之间存在差异,但是又不想修改原来的对象,这样就可以通过使用适配器模式来兼容;
2.适配器就是通过一个接口来包装对象,从而改变现有对象的接口为另外一个接口;
3.就是用一个接口包装现有类的接口。