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 相关文章推荐
重定向实现代码
Nov 20 Javascript
jQuery 常见学习网站与参考书
Nov 09 Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 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
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
深入解析koa之异步回调处理
2019/06/17 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
Python装饰器使用示例及实际应用例子
2015/03/06 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
施工人员岗位职责
2013/12/12 职场文书
大学校务公开实施方案
2014/03/31 职场文书
企业安全生产责任书
2014/04/14 职场文书
中等生评语大全
2014/05/04 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
雾霾停课通知
2015/04/24 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers