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 相关文章推荐
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 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
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
Javascript 面试题随笔
2011/03/31 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
vue登录注册实例详解
2019/09/14 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
Python中endswith()函数的基本使用
2015/04/07 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
HTML5有哪些新特征
2015/12/01 HTML / CSS
对公司合理化的建议书
2014/03/12 职场文书
公务员诚信承诺书
2014/05/26 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
详解MySQL的半同步
2021/04/22 MySQL
详解php中流行的rpc框架
2021/05/29 PHP
mysql分表之后如何平滑上线详解
2021/11/01 MySQL