设计模式(8)[JS版]-JavaScript设计模式之如何实现适配器模式???
1 什么是适配器模式?
适配器模式是将一个接口(对象的属性和方法)转换为另一个接口。适配器允许编程组件协同工作,否则由于接口不匹配而无法协同工作。适配器模式也称为包装器模式。
适配器模式可以想象为我们日常生活中经常使用的接口转换器,实现两个或者多个不同的数据存储器进行数据交换,适配各自不同数据输出口的工具。适配器适用于客户系统期待的接口与现有API提供的接口不兼容这种场合。它只能用来协调语法上的差异问题。适配器所适配的两个方法执行的应该是类似的任务,否则它就解决不了问题了。适配器模式有利于避免大规模改写现有客户代码。但另一方面如果现有API还未定形,或者新接口还未定形,那么适配器可能会不管用。
2 参与者
适配器模式主要参与者有:
客户端(Client):调用Adapter来请求服务
适配器 (Adapter ):实现了客户所期望或知道的接口。
被适配对象(Adaptee) :与客户期望或知道的接口不同。
3 实例讲解
下面的示例代码显示了一个在线购物车的部分功能,其中的Shipping对象用来计算运输成本。旧的Shipping对象将被替换为新的改进的Shipping对象,该对象更加安全,价格也有所提高。
新的对象被命名为AdvancedShipping,并且具有与客户端程序不同的接口。ShippingAdapter通过将旧的Shipping接口映射(自适应)到新的AdvancedShipping接口,允许客户端程序在没有改变任何API的情况下继续运行。日志函数用来收集和显示结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>适配器模式:公众号AlbertYang</title>
</head>
<body>
</body>
<script>
// 老的运费
function Shipping() {
this.request = function(zipStart, zipEnd, weight) {
// ...
return "49.75元";
}
}
// 新的运费
function AdvancedShipping() {
this.login = function(credentials) { /* ... */ };
this.setStart = function(start) { /* ... */ };
this.setDestination = function(destination) { /* ... */ };
this.calculate = function(weight) {
return "59.50元";
};
}
// 适配器接口
function ShippingAdapter(credentials) {
var shipping = new AdvancedShipping();
shipping.login(credentials);
return {
request: function(zipStart, zipEnd, weight) {
shipping.setStart(zipStart);
shipping.setDestination(zipEnd);
return shipping.calculate(weight);
}
};
}
// 日志记录函数
var log = (function() {
var log = "";
return {
add: function(msg) {
log += msg + "n";
},
show: function() {
console.info("%c%s", "color:red; font-size:18px", log);
log = "";
}
}
})();
function run() {
var shipping = new Shipping();
var credentials = {
token: "30a8-6ee1"
};
var adapter = new ShippingAdapter(credentials);
// 老的运费对象和接口
var cost = shipping.request("78701", "10010", "5公斤");
log.add("老的运费: " + cost);
//新的运费象和相应的适配器接口
cost = adapter.request("78701", "10010", "5公斤");
log.add("新的运费: " + cost);
log.show();
}
run();
</script>
</html>
4 其它应用
适配器模式也经常用于日常的数据处理上,比如把一个有序的数组转化成我们需要的对象格式:
<script>
var arr = ['张三', '18', '河南郑州', '2020年8月2日']
// 转化成我们需要的格式
function arrObjAdapter(arr) {
return {
name: arr[0],
age: arr[1],
address: arr[2],
time: arr[3]
}
}
console.log(arr);
var adapterData = arrObjAdapter(arr);
console.log(adapterData);
</script>
在前后端的数据传递的时候会经常使用到适配器模式,后端有时无法控制数据的格式,所以在使用数据前需要对数据进行适配,适配成我们可用的数据格式才能使用。
5 总结
如果有以下情况出现时,建议使用适配器模式:
- 使用一个已经存在的对象,但其方法或属性接口不符合你的要求。
- 你想创建一个可复用的对象,该对象可以与其它不相关的对象或不可见对象(即接口方法或属性不兼容的对象)协同工作。
- 想使用已经存在的对象,但是不能对每一个都进行原型继承以匹配它的接口。对象适配器可以适配它的父对象接口方法或属性。
- 需要一个统一的输出接口,但是输入类型却不可预知。
今天的学习就到这里,你可以使用今天学习的技巧来改善一下你曾经的代码,如果想继续提高,欢迎关注我,每天学习进步一点点,就是领先的开始。
- Layui常见问题
- layui动态设置下拉框数据,根据后台数据设置选中
- BCryptPasswordEncoder加密及判断密码是否相同
- 两个HTML,CSS布局实例
- cors解决Web跨域访问问题
- Java之集合初探(二)Iterator(迭代器),collections,打包/解包(装箱拆箱),泛型(Generic),comparable接口
- IIS中实现HTTPS的自动跳转
- Windows Server下IIS安装PHP+MySql环境
- Python玩机器学习简易教程
- 腾讯云服务器搭建个人博客教程
- Ubuntu下安装Nginx+PHP+MySql环境
- JavaScript 对象
- HTML 表单
- HTML DOM
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python如何优雅删除字符列表空字符及None元素
- php语法检查的方法总结
- PHP实现浏览器格式化显示XML的方法示例
- Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
- PHP的mysqli_stmt_init()函数讲解
- PHP内置函数生成随机数实例
- PHPStudy下如何为Apache安装SSL证书的方法步骤
- PHP的mysqli_thread_id()函数讲解
- thinkPHP框架中layer.js的封装与使用方法示例
- OpenCV+python实现实时目标检测功能
- 在tensorflow实现直接读取网络的参数(weight and bias)的值
- python tkiner实现 一个小小的图片翻页功能的示例代码
- 在Pytorch中使用Mask R-CNN进行实例分割操作
- PHP类的自动加载机制实现方法分析
- strpos() 函数判断字符串中是否包含某字符串的方法