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 相关文章推荐
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
layui select动态添加option的实例
Mar 07 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
vue发送ajax请求详解
Oct 09 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
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
PHP4实际应用经验篇(5)
2006/10/09 PHP
php表单提交实例讲解
2015/11/12 PHP
php session的应用详细介绍
2017/03/22 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
母亲七十大寿答谢词
2014/01/18 职场文书
仓管员岗位责任制
2014/02/19 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
施工安全汇报材料
2014/08/17 职场文书
2015年档案室工作总结
2015/05/23 职场文书
学校食堂管理制度
2015/08/04 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
导游词之崇武古城
2019/10/07 职场文书