开发者俱乐部
标题: JavaScript设计模式--适配器模式Adapter [打印本页]
作者: jack 时间: 2016-3-17 21:56
标题: JavaScript设计模式--适配器模式Adapter
适配器模式(转换器面模式),一般是为要使用的接口,不符本应用或本系统使用,而需引入的中间适配层类或对象的情况。适配器模式的作用是解决两个软件实体间的接口不兼容的问题。
一、定义适配器模式(Adapter)是将一个类(对象)的接口(方法或属性)转化成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不兼容而不能一起工作的那些类(对象)可以一些工作。速成包装器(wrapper)。
适配器的别名是包装器(wrapper),这是一个相对简单的模式。在程序开发中有许多这样的场景:当我们试图调用模块或者对象的某个接口时,却发现这个接口的格式并不符合目前的需求。这时候有两种解决办法,第一种是修改原来的接口实现,但如果原来的模块很复杂,或者我们拿到的模块是一段别人编写的经过压缩的代码,修改原接口就显得不太现实了。第二种办法是创建一个适配器,将原接口转换为客户希望的另一个接口,客户只需要和适配器打交道。
二、现实生活中的适配器场景: 就好比我们买了台手机,买回来后发现,充电线插头是三插头,但家里,只有两插头的口的插座,怎么办?为了方便,也有为能在任何地方都能充上电,就得去买个通用充电适配器; 这样手机才能在自己家里充上电;不然只能放着,或跑到有这个插头的地方充电;
三、适配器模式如果现有的接口已经能够正常工作,那我们就永远不会用上适配器模式。适配器模式是一种“亡羊补牢”的模式,没有人会在程序的设计之初就使用它。因为没有人可以完全预料到未来的事情,也许现在好好工作的接口,未来的某天却不再适用于新系统,那么我们可以用适配器模式把旧接口包装成一个新的接口,使它继续保持生命力。比如在JSON 格式流行之前,很多cgi 返回的都是XML 格式的数据,如果今天仍然想继续使用这些接口,显然我们可以创造一个。
XML-JSON 的适配器。
3.1 参数适配器有时候,我们在定义函数的时候需要传递N多个参数,例如:
- <font color="#000000">function doSomething(name,title, age,color,size,prize){}</font>
复制代码
我们要记住这些参数的顺序是很难的,那怎么办呢?我们经常会以一个参数对象的形式传递,如下:
- <font color="#000000">/* params.name:name
- params.title:title
- params.age:age
- params.color:color
- params.size:size
- params.prize:prize*/
- function doSomething(params){}</font>
复制代码
然而在实际调用的过程中,并不知道传递的参数是否完整,如一些必须的参数没有传入,一些参数有初始值。此时我么你就可以通过适配器来适配这些参数的要求,如下:
- <font color="#000000">function doSomething(params){
- var _adapter={
- name:"适配器",
- title:"设计模式",
- age:24,
- color:"pink",
- size:240,
- prize:50
- };
- for(var i in _adapter){
- _adapter[i] = params[i] || _adapter[i];
- }
- //或者extend(_adapter,params);这有可能会增加属性
- }</font>
复制代码
四、数据适配器比如在一些插件的开发中,存在着很多对数据的适配,比如说下面是一个数组
var arr=[“javascript”,”book”,”前端编程利器”,”3月14日”];
我们发现数组中的数据代表不同的意义,这种数据在语义上很不友好,我们可能会要求把它转化为对象的形式:
- <font color="#000000">var obj={
- name:"",
- type:"",
- title:"",
- time:""
- }</font>
复制代码
按照需求,我们可以定义这么一个数据适配器
- <font color="#000000">function arrToObjAdapter(){
- return{
- name:arr[0],
- type:arr[1],
- title:arr[2],
- date:arr[3]
- };
- }
- var adapterData = arrToObjAdapter(arr);
- console.log(adapterData);</font>
复制代码
这给我们灵活使用数据提供了新思路。
五、前后台数据适配当我们向googleMap 和baiduMap 都发出“显示”请求时,googleMap和baiduMap 分别以各自的方式在页面中展现了地图:
- <font color="#000000">var googleMap = {
- show: function(){
- console.log( '开始渲染谷歌地图' );
- }
- };
- var baiduMap = {
- show: function(){
- console.log( '开始渲染百度地图' );
- }
- };
- var renderMap = function( map ){
- if ( map.show instanceof Function ){
- map.show();
- }
- };
- renderMap( googleMap ); // 输出:开始渲染谷歌地图
- renderMap( baiduMap ); // 输出:开始渲染百度地图</font>
复制代码
这段程序得以顺利运行的关键是googleMap 和baiduMap 提供了一致的show 方法,但第三方的接口方法并不在我们自己的控制范围之内,假如baiduMap 提供的显示地图的方法不叫show 而叫display 呢?
baiduMap 这个对象来源于第三方,正常情况下我们都不应该去改动它。此时我们可以通过增加baiduMapAdapter 来解决问题:
- <font color="#000000">var googleMap = {
- show: function(){
- console.log( '开始渲染谷歌地图' );
- }
- };
- var baiduMap = {
- display: function(){
- console.log( '开始渲染百度地图' );
- }
- };
- var baiduMapAdapter = {
- show: function(){
- return baiduMap.display();
- }
- };
- renderMap( googleMap ); // 输出:开始渲染谷歌地图
- renderMap( baiduMapAdapter ); // 输出:开始渲染百度地图</font>
复制代码
再来看看另外一个例子。假设我们正在编写一个渲染广东省地图的页面。目前从第三方资源里获得了广东省的所有城市以及它们所对应的ID,并且成功地渲染到页面中:
- <font color="#000000">var getGuangdongCity = function(){
- var guangdongCity = [
- {
- name: 'shenzhen',
- id: 11,
- }, {
- name: 'guangzhou',
- id: 12,
- }];
- return guangdongCity;
- };
- var render = function( fn ){
- console.log( '开始渲染广东省地图' );
- document.write( JSON.stringify( fn() ) );
- };
- render( getGuangdongCity );</font>
复制代码
利用这些数据,我们编写完成了整个页面,并且在线上稳定地运行了一段时间。但后来发现这些数据不太可靠,里面还缺少很多城市。于是我们又在网上找到了另外一些数据资源,这次的数据更加全面,但遗憾的是,数据结构和正运行在项目中的并不一致。新的数据结构如下:
- <font color="#000000">var guangdongCity = {
- shenzhen: 11,
- guangzhou: 12,
- zhuhai: 13
- };</font>
复制代码
除了大动干戈地改写渲染页面的前端代码之外,另外一种更轻便的解决方式就是新增一个数据格式转换的适配器:
- <font color="#000000">var addressAdapter = function( oldAddressfn ){
- var address = guangdongCity,
- oldAddress = oldAddressfn();
- for ( var i = 0, c; c = oldAddress[ i++ ]; ){
- address[ c.name ] = c.id;
- }
- return address;
- };
- render( addressAdapter( getGuangdongCity ) );</font>
复制代码
那么接下来需要做的,就是把代码中调用getGuangdongCity 的地方,用经过addressAdapter适配器转换之后的新函数来代替。
六、应用场景那合适使用适配器模式好呢?如果有以下情况出现时,建议使用:
- 使用一个已经存在的对象,但其方法或属性接口不符合你的要求;
- 你想创建一个可复用的对象,该对象可以与其它不相关的对象或不可见对象(即接口方法或属性不兼容的对象)协同工作;
- 想使用已经存在的对象,但是不能对每一个都进行原型继承以匹配它的接口。对象适配器可以适配它的父对象接口方法或属性。
有一些模式跟适配器模式的
结构非常相似,比如装饰者模式、代理模式和外观模式。这几种模式都属于“包
装模式”,都是由一个对象来包装另一个对象。区别它们的关键仍然是模式的意图。
适配器模式主要用来解决两个已有接口之间不匹配的问题,它不考虑这些接口是怎样实现的,也不考虑它们将来可能会如何演化。适配器模式不需要改变已有的接口,就能够使它们协同作用。
装饰者模式和代理模式也不会改变原有对象的接口,但装饰者模式的作用是为了给对象增加功能。装饰者模式常常形成一条长的装饰链,而适配器模式通常只包装一次。代理模式是为了控制对对象的访问,通常也只包装一次。
外观模式的作用倒是和适配器比较相似,有人把外观模式看成一组对象的适配器,但外观模式最显著的特点是定义了一个新的接口。
欢迎光临 开发者俱乐部 (http://xodn.com/) |
Powered by Discuz! X3.2 |