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 学习 - 提高篇
Feb 02 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
Jquery中"$(document).ready(function(){ })"函数的使用详解
Dec 30 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 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/03/09 PHP
基于php缓存的详解
2013/05/15 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
详解PHP中的PDO类
2015/07/06 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
经验几则 推荐
2006/09/05 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
Python中函数参数调用方式分析
2018/08/09 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
python excel多行合并的方法
2020/12/09 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
《曹刿论战》教学反思
2014/03/02 职场文书
保安公司服务承诺书
2014/05/28 职场文书
高中综合实践活动总结
2014/07/07 职场文书
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers