设计模式(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 总结
如果有以下情况出现时，建议使用适配器模式：
-
使用一个已经存在的对象，但其方法或属性接口不符合你的要求。
-
你想创建一个可复用的对象，该对象可以与其它不相关的对象或不可见对象（即接口方法或属性不兼容的对象）协同工作。
-
想使用已经存在的对象，但是不能对每一个都进行原型继承以匹配它的接口。对象适配器可以适配它的父对象接口方法或属性。
-
需要一个统一的输出接口，但是输入类型却不可预知。
今天的学习就到这里，你可以使用今天学习的技巧来改善一下你曾经的代码，如果想继续提高，欢迎关注我，每天学习进步一点点，就是领先的开始。如果觉得本文对你有帮助的话，欢迎点赞，评论，转发！！！
文章来源: albertyang.blog.csdn.net，作者：Albert Yang，版权归原作者所有，如需转载，请联系作者。
原文链接：albertyang.blog.csdn.net/article/details/107750445
- 点赞
- 收藏
- 关注作者
评论（0）