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 相关文章推荐
获取3个数组不重复的值的具体实现
Dec 30 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
JS实现网页时钟特效
Mar 25 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
PHP中PDO的错误处理
2011/09/04 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
python实现端口转发器的方法
2015/03/13 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Django数据统计功能count()的使用
2020/11/30 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
董事长岗位职责
2013/11/30 职场文书
生日宴会答谢词
2014/01/09 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
行政专员求职信范文
2014/05/03 职场文书
干部年终考核评语
2015/01/04 职场文书
护士辞职信怎么写
2015/02/27 职场文书
高中军训感想
2015/08/07 职场文书
python基础之停用词过滤详解
2021/04/21 Python
使用tensorflow 实现反向传播求导
2021/05/26 Python