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 相关文章推荐
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
javascript cookies操作集合
Apr 12 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 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 超链接 抓取实现代码
2009/06/29 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
新闻内页-JS分页
2006/06/07 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
Python实现字典的key和values的交换
2015/08/04 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
树莓派实现移动拍照
2019/06/22 Python
python绘制彩虹图
2019/12/16 Python
python装饰器原理与用法深入详解
2019/12/19 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
工程业务员工作职责
2013/12/07 职场文书
端午节活动策划方案
2014/03/09 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书