设计模式(8)[JS版]-JavaScript设计模式之如何实现适配器模式？？？AlbertYang的博客- | ImapBox

设计模式(8)[JS版]-JavaScript设计模式之如何实现适配器模式？？？AlbertYang的博客-

04 八月
星期二, 04 八月 2020 15:10 Last Updated on 星期二, 04 八月 2020 15:10 0 Comments

目录

1 什么是适配器模式？

2 参与者

3 实例讲解

4 其它应用

5  总结

1 什么是适配器模式？

适配器模式是将一个接口（对象的属性和方法）转换为另一个接口。适配器允许编程组件协同工作，否则由于接口不匹配而无法协同工作。适配器模式也称为包装器模式。

适配器模式可以想象为我们日常生活中经常使用的接口转换器，实现两个或者多个不同的数据存储器进行数据交换，适配各自不同数据输出口的工具。适配器适用于客户系统期待的接口与现有API提供的接口不兼容这种场合。它只能用来协调语法上的差异问题。适配器所适配的两个方法执行的应该是类似的任务，否则它就解决不了问题了。适配器模式有利于避免大规模改写现有客户代码。但另一方面如果现有API还未定形，或者新接口还未定形，那么适配器可能会不管用。

2 参与者

设计模式(8)[JS版]-JavaScript设计模式之如何实现适配器模式？？？AlbertYang的博客-

适配器模式主要参与者有：

客户端(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  总结

如果有以下情况出现时，建议使用适配器模式：

  1. 使用一个已经存在的对象，但其方法或属性接口不符合你的要求。

  2. 你想创建一个可复用的对象，该对象可以与其它不相关的对象或不可见对象（即接口方法或属性不兼容的对象）协同工作。

  3. 想使用已经存在的对象，但是不能对每一个都进行原型继承以匹配它的接口。对象适配器可以适配它的父对象接口方法或属性。

  4. 需要一个统一的输出接口，但是输入类型却不可预知。

今天的学习就到这里，你可以使用今天学习的技巧来改善一下你曾经的代码，如果想继续提高，欢迎关注我，每天学习进步一点点，就是领先的开始。如果觉得本文对你有帮助的话，欢迎，评论，转发！！！



 
 
 
 


本页所有内容来自官方网站 http://www.imapbox.com 新闻来源：互联网搜索引擎和新闻站

本网页所有图片由 ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片，下载并得到。

ImageBox 图片批量下载器 工具地址: 网页图片批量下载工具-最新版本下载

非凡下载站地址：http://www.crsky.com/soft/35838.html

本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。

ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载

本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.




文章目录

  • 全球报导 (16311)
  • 全球云计算 (29506)
  • 程序员专区 (1974)
  • Imap 全球通用标准协议 (7)
  • 全球邮局列表 (17)
  • Imapbox 系列软件 (3)
  • 产品一览 (6)
  • 事业方向 (7)
  • 联系我们 (2)

官方链接

imapbox邮箱网盘 imapbox 海外官网 iMapBox百度百科

登录