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让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
EXT中xtype的含义分析
Jan 07 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 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下通过POST还是GET来传值
2008/06/05 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
在Python中使用正则表达式的方法
2015/08/13 Python
python实现发送邮件及附件功能
2021/03/02 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
全球最大的服务市场:Fiverr
2017/01/03 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
什么是反射
2012/03/17 面试题
销售人员获奖感言
2014/02/05 职场文书
统计岗位职责
2014/02/21 职场文书
2014高考励志标语
2014/06/05 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android