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中的事件处理
Jan 16 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
vue element table中自定义一些input的验证操作
Jul 18 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+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
SeaJS中use函数用法实例分析
2017/10/10 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
《诺贝尔》教学反思
2014/02/17 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
大二学习计划书范文
2014/04/27 职场文书
公司捐款倡议书
2014/05/14 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
党委工作总结2015
2015/04/27 职场文书
运动会200米广播稿
2015/08/19 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL