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 callBack 返回前一页的js方法
Nov 30 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
比较node.js和Deno
Apr 27 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
自定义jQuery选项卡插件实例
2013/03/27 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
python获取糗百图片代码实例
2013/12/18 Python
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
学期个人工作总结
2015/02/13 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
Win11 BitLocker 驱动器加密
2022/04/19 数码科技