javascript设计模式之适配器模式
---恢复内容开始---
定义:
是指讲一个接口转换成客户端希望 的另外一个接口,该模式使得原本不兼容的类可以一起工作。适配器模式的作用事解决两个软件实体间的接口不兼容的问题。
生活中的实例:
USB转接器,在以前的电脑上,PS2接口是连接鼠标,键盘等其他外部设备的标准接口。但随着技术的发展,越来越多的电脑开始放弃PS2 接口,转而仅支持USB接口。所以哪些过去生产的只拥有PS2接口的鼠标,键盘,游戏手柄等,需要一个USB的转换器接口才能继续正常工作,着就是PS2-USB适配器诞生的原因。
在程序开发的过程中,随着产品一次次的升级,我们发现有时候之前的接口不能满足现有的业务需求了,公司可能不会把大量的人力,精力放在一个维护中的项目上,那怎么办,能够在改动最小的前提下,让接口适用于新系统。这时候,就需要"适配器模式",该模式也称为“亡羊补牢”的模式,因为没有人在项目设计之初就使用它。
适配器模式的三个角色:
- 目标角色(Target):例如:USB接口
- 源角色(Adaptee): 例如:PS2接口
- 适配器角色(Adapter): 例如: PS2-USB适配器
例子:
Target.js
// 目标角色类
export class Target{
constructor() { }
usb() {
console.log('usb接口')
}
}
Adaptee.js
// 源目标角色是
export class Adaptee {
constructor() { }
ps() {
console.log('原目标是ps2')
}
}
Adapter.js
// 适配器
import {Adaptee} from './Adaptee.js'
let adaptee = new Adaptee() export class Adapter {
constructor() { }
usb() {return adaptee.ps()
}
}
客户端的实现:
import {Adapter} from '@/assets/Adapter.js'
let adapter = new Adapter()
mounted() {
adapter.usb() //原目标是ps2
}
在适配器类中,定义与目标角色类相同的方法,但是在该方法中,调用原目标角色类中的方法,就可以实现原目标的方法。
数据格式转换的适配器
在前后端数据传递的时候经常会使用到适配器模式,如果后端的数据经常发生变化,比如在某些网站拉取的数据,后端有时无法控制数据的格式,所以,在使用数据前最好对数据进行 适配成我们可用的数据格式在使用。
新的数据格式如下:
var BeijingCity = {
chaoyang: ,
haidian: ,
pinggu:
};
旧的数据格式如下:
var beijingCity = [
{
name: 'chaoyang',
id: ,
}, {
name: 'haidian',
id: ,
} ];
使用适配器模式来进行数据格式的转换
var getBeijingCity = function(){
var beijingCity = [
{
name: 'chaoyang',
id: ,
}, {
name: 'haidian',
id: ,
}
];
return beijingCity;
};
var render = function( fn ){
console.log( '开始渲染北京市地图' );
document.write( JSON.stringify( fn() ) );
};
var addressAdapter = function( oldAddressfn ){
var address = {},
oldAddress = oldAddressfn();
for ( var i = , c; c = oldAddress[ i++ ]; ){
address[ c.name ] = c.id;
}
return function(){
return address;
}
};
render( addressAdapter( getBeijingCity ) );
结果是:
{"chaoyang":,"haidian":}
使用场景:
- 使用一个已经存在的对象,但其方法或属性接口不符合你的要求;
- 你想创建一个可复用的对象,该对象可以与其它不相关的对象或不可见对象(即接口方法或属性不兼容的对象)协同工作;
- 想使用已经存在的对象,但是不能对每一个都进行原型继承以匹配它的接口。对象适配器可以适配它的父对象接口方法或属性。
总结
适配器模式主要用来解决两个已有接口之间不匹配的问题,他不考虑这些接口是怎么实现的,也不考虑它们将来可能会如何演化。适配器模式不许哟啊改变已有的接口,就能够使它们协同作用。
javascript设计模式之适配器模式的更多相关文章
- 再起航,我的学习笔记之JavaScript设计模式12(适配器模式)
适配器模式 适配器模式(Adapter): 将一个类(对象)的接口(方法或属性)转化成为另外一个接口,使类(对象)之间接口的不兼容问题通过适配器得以解决. 适配相似的框架 不知道大家有没有遇到过这种场 ...
- JavaScript设计模式 Item9 --适配器模式Adapter
适配器模式(转换器面模式),通常是为要使用的接口,不符本应用或本系统使用,而需引入的中间适配层类或对象的情况. 适配器模式的作用是解决两个软件实体间的接口不兼容的问题. 一.定义 适配器模式(Adap ...
- JavaScript设计模式-15.适配器模式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【读书笔记】读《JavaScript设计模式》之适配器模式
一.定义 适配器模式可用来在现有接口和不兼容的类之间进行匹配.使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象.在设计类的时候旺旺会遇到有些接口不能与现有API ...
- 《JavaScript设计模式 张》整理
最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单 ...
- 《JavaScript设计模式与开发实践》整理
最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...
- 常用的Javascript设计模式
<parctical common lisp>的作者曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型 ...
- 转载,javascript 设计模式
了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过) 闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理解. 1.闭包最常用的 ...
- JavaScript设计模式 -- 读书笔记
JavaScript设计模式 一. 设计模式 一个模式就是一个可重用的方案: 有效的解决方法.易重用.善于表达该解决方案: 未通过"模式特性"测试的模式称为模式原型: 三规则:适用 ...
随机推荐
- 第09组 Alpha冲刺(1/4)
队名:软工9组 组长博客: https://www.cnblogs.com/cmlei/ 作业博客: 组员进度 ● 组员一(组长) 陈明磊 ○过去两天完成了哪些任务 ●文字/口头描述 初步 ...
- 【Tensorflow】tf.nn.depthwise_conv2d如何实现深度卷积?
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/mao_xiao_feng/article/ ...
- Java-JUC(十四):SimpleDateFormat是线程不安全的
SimpleDateFormat是Java提供的一个格式化和解析日期的工具类,日常开发中应该经常会用到,但是由于它是线程不安全的,多线程公用一个SimpleDateFormat实例对日期进行解析.格式 ...
- A3C 算法资料收集
A3C 算法资料收集 2019-07-26 21:37:55 Paper: https://arxiv.org/pdf/1602.01783.pdf Code: 1. 超级马里奥:https://gi ...
- Hbuilder提交项目到GitHub出现cannot open git-upload-pack
问题描述 Hbuilder上传本地项目到GitHub时是通过下载的Egit插件,然而提交代码时出现下图问题 网上有说添加http的sslVerify=false,然并卵. 解决方案 不用hbuilde ...
- Oralce 如何将查询结果中的0转成空的
我们遇到过大多的情况的需求是查询结果中空转为0,这个可以通过oracle的NVL()函数就可以搞定. 之前做报表客户有个需求,查询出结果为0 要转成空的,不显示0 那么在oracle有没有现成函数能搞 ...
- 【docker】 yaml.scanner.ScannerError: mapping values are not allowed here in "./docker-compose.yml", line 60, column 35
在启动docker-compose 时候 报错了 命令: docker-compose up -d && docker-compose logs -f 错误代码: 解决 出现这个错误的 ...
- 基于EasyDarwin开源流媒体服务器框架实现EasyNVR H5无插件直播流媒体服务器方案
背景分析 在之前的一篇博客<web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!>中,描述了实现一套H5无插件直播方案的各个组件的参考建议,又在博客<EasyNVR H5流媒体服 ...
- Linq查询连接guid与varchar字段
使用场景 在数据库设计中进场会出现一些通用表,如通用附件表,一般都是通过ForeignTable(关联的表名)和ForeignKey(关联表的主键)与其他表关联.这样的表在数据库中没有外键关系,而且一 ...
- Saltack 针对用户进行权限控制
一. client_acl 配置使用 1.1 client_acl概述 开启对系统上非root的系统用户在master上执行特殊的模块,这些模块名可以使用正则表达式进行表示,不能指定对那些minion ...