JavaScript 设计模式(四):适配者模式

适配者模式

适配器模式:将一个类(对象)的接口(方法或属性)转化成客户希望的另外一个接口(方法或属性),使得原本由于接口不兼容而不能一起工作的那些类(对象)可以正常协作。简单理解就是为兼容而生的 “转换器”。

对于强迫症患者,那么多形状各异的接口,对应着不同数据线。如果可以有一个转接口实现集合兼容,岂不美哉。没错,这样一个适配器,你值得拥有。(各大厂商加把劲。。。)

生活小栗子:

  1. 港式插头转换器
  2. 笔记本电源适配器
  3. Type-C 转接口

模式特点

  1. 新包装对象(适配器对象)实现对原对象接口的访问(接口名可不同)
  2. 适配器对象不对请求数据做预处理,直接传入原对象接口处理
  3. 适配器对象对外接口名统一,外部调用者可统一接口调用多对象方法

模式实现

实现方式:在不改变原有对象接口的基础上,定义一个包装对象,新对象转接调用原有接口,使外部调用者可以正常使用。

第三方SDK的应用

// 适配器实现地图SDK统一渲染
var googleMap = {
    show: function(){
        console.log('开始渲染谷歌地图');
    }
};
var baiduMap = {
    display: function(){
        console.log('开始渲染百度地图');
    }
};

// 外部实际调用的适配器对象
var baiduMapAdapter = {
    show: function() {
        return baiduMap.display();
    }
};

// 外部调用者
var renderMap = function(map) {
    map.show();   // 统一接口调用
};

renderMap(googleMap);
renderMap(baiduMapAdapter);

ES6实现适配器

// 使用ES6改写适配器实现地图SDK统一渲染
class googleMap {
  show() {
    console.log('开始渲染谷歌地图');
  }
}

class baiduMap {
  display() {
    console.log('开始渲染百度地图');
  }
}

class baiduMapAdapter extends baiduMap {
  constructor() {
    super();
  }

  show() {
    this.display();
  }
}

// 外部调用者
function renderMap(map) {
  map.show();   // 统一接口调用
}

renderMap(new googleMap());
renderMap(new baiduMapAdapter());

jQuery中的应用

适配器模式非常适用于跨浏览器兼容,例如强大的 jQuery 封装了事件处理的适配器,解决跨浏览器兼容性问题,极大简化我们日常编程操作。

// $('selector').on 的实现
function on(target, event, callback) {
    if (target.addEventListener) {
        // 标准事件监听
        target.addEventListener(event, callback);
    } else if (target.attachEvent) {
        // IE低版本事件监听
        target.attachEvent(event, callback)
    } else {
        // 低版本浏览器事件监听
        target[`on${event}`] = callback
    }
}

适用场景

  1. 跨浏览器兼容
  2. 整合第三方SDK
  3. 新老接口兼容

适配器模式的初衷是为了解决多对象(接口)兼容问题,如果存在多对象协同工作时,不方便直接修改原对象的基础上,可考虑用适配器封装,以便外部调用者统一使用。

与其它模式的异同

适配器模式不会改变原有接口,这一点与装饰者模式和代理模式类似。

VS 代理模式

适配器模式与代理模式最相似,同样都是创建一个新对象(包装一次),实现对本体的调用。

两者的区别:代理模式是为了管控原有对象(本体)的访问,代理的初衷并不是为兼容,并主张代理与本体对外接口保持一致。

而适配器则是为兼容而生的 “转换器”,并不预处理请求,直接将请求转接给原接口,新接口与原接口名可能不同。

“代理模式“(严父):学校缴费要一千块,这么多?
"适配器模式” (慈母):学校缴费要一千块,给给给。

装饰者模式及外观模式,会在之后的篇章整理,这里稍作了解。

VS 装饰者模式

装饰者模式的作用是为对象添加功能,可添加多次,形成装饰链。而适配器只会对原有对象包装一次。

VS 外观模式

外观模式与适配器模式最大的区别,是定义了一个新的接口。

优缺点

  • 优点:兼容性,保证外部可统一接口调用
  • 缺点:额外对象的创建,非直接调用,存在一定的开销(且不像代理模式在某些功能点上可实现性能优化)。

参考文章

本文首发Github,期待Star!
https://github.com/ZengLingYong/blog

作者:以乐之名
本文原创,有不当的地方欢迎指出。转载请指明出处。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容