JavaScript设计模式之适配器模式介绍


Posted in Javascript onDecember 28, 2014

适配器模式说明

说明: 适配器模式,一般是为要使用的接口,不符本应用或本系统使用,而需引入的中间适配层类或对象的情况;

场景: 就好比我们买了台手机,买回来后发现,充电线插头是三插头,但家里,只有两插头的口的插座,怎么办?为了方便,也有为能在任何地方都能充上电,就得去买个通用充电适配器; 这样手机才能在自己家里充上电;不然只能放着,或跑到有这个插头的地方充电;

实际开发环境下,由于旧的系统,或第三方应用提供的接口,与我们定义的接口不匹配,在以面向接口编程的环境下,就无法使用这样旧的,或第三方的接口,这时我们就使用适配类继承待适匹配的类,并让适配类实现接口的方式来引入旧的系统或第三方应用的接口;

这样使用接口编程时,就可以使用这个适匹配类,来间接调用旧的系统或第三方应用的接口。

在 Javascript 要实现类似动态面向对象语言的适配器模式的代码,可以使用到 prototype 的继承实例来实现;因为是基于接口约束的,但是Javascript没有接口这号东西,我们去掉接口这一层,直接实现接口实现类 Target ,模拟类似的源码出来;

源码实例

1. 待适配的类及接口方法:

function Adaptee() {

    this.name = 'Adaptee';

}

Adaptee.prototype.getName = function() {

    return this.name;

}

2. 普通实现类 [由于 Javascript 中没有接口,所以就直接提供实现类]

function Target() {

    this.name = 'Target';

}
Target.prototype.queryName= function() {

    return this.name;

}

3. 适配类:

function Adapte() {

    this.name = '';

}
Adapte.prototype = new Adaptee();
Adapte.prototype.queryName = function() {

    this.getName();

}

4.使用方法:

var local = new Target();

local.queryName(); //调用普通实现类
var adapte = new Adapte();

adapte.queryName(); //调用旧的系统或第三方应用接口;

其他说明

上面第四步,var local 以及 var adapte 类似像 Java,C# 这样的面向对象语言中接口引用指定,如:

interface Target {

    public String queryName();

}

//接口引用指向

Target local = new RealTarget(); //即上面 Javascript 的 Target 实现类

local.queryName();
//适配器

Target adapte = new Adapte();

adapte.queryName();

可见适配器类是连接接口与目标类接口的中间层;就是用来解决,需要的目标已经存在了,但我们无法直接使用,不能跟我们的代码定义协同使用,就得使用适器模式,适配器模式也叫转换模式,包装模式;

Javascript 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
Jun 24 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
JavaScript中的 new 命令
May 22 Javascript
javascript+canvas制作九宫格小程序
Dec 28 #Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 #Javascript
浅谈Javascript Base64 加密解密
Dec 28 #Javascript
JavaScript设计模式之代理模式介绍
Dec 28 #Javascript
JavaScript设计模式之外观模式介绍
Dec 28 #Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 #Javascript
jQuery中removeData()方法用法实例
Dec 27 #Javascript
You might like
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
js option删除代码集合
2008/11/12 Javascript
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
2016/06/24 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
vue的keep-alive用法技巧
2019/08/15 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
Python实现批量下载图片的方法
2015/07/08 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
简单英文演讲稿
2014/01/01 职场文书
学习十八大报告感言
2014/02/04 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
信用卡工资证明范本
2014/10/17 职场文书
大学生毕业评语
2014/12/31 职场文书
邀请函模板
2015/02/02 职场文书
普宁寺导游词
2015/02/04 职场文书
伏羲庙导游词
2015/02/09 职场文书