前端设计模式——适配器模式

十六夜雨

适配器模式（Adapter Pattern）：将一个类的接口转化为客户端所期望的接口，使得原本不兼容的类可以一起工作。在前端开发中，可以使用适配器模式来处理不同浏览器之间的兼容性问题。
适配器模式通常包含三个角色：客户端、目标对象和适配器对象。客户端调用适配器对象的接口，适配器对象再调用目标对象的接口，将目标对象的接口转换为客户端需要的接口，从而实现兼容性。
另外，适配器模式也可以用于将不同的第三方组件或插件进行整合和兼容。例如，当一个网站需要使用不同的图表库来绘制图表时，可以使用适配器模式将这些图表库进行封装，从而实现统一的调用接口，方便使用和维护。
下面是一个简单的例子，演示如何使用适配器模式将不同的 API 接口进行统一封装：

1. // 目标接口
2. class Target {
3.   request() {
4.     return 'Target: 请求完成！';
5.   }
6. }
8. // 需要适配的对象
9. class Adaptee {
10.   specificRequest() {
11.     return 'Adaptee: 请求完成！';
12.   }
13. }
15. // 适配器对象
16. class Adapter extends Target {
17.   constructor(adaptee) {
18.     super();
19.     this.adaptee = adaptee;
20.   }
22.   request() {
23.     const result = this.adaptee.specificRequest();
24.     return `Adapter: ${result}`;
25.   }
26. }
28. // 使用适配器模式
29. const adaptee = new Adaptee();
30. const adapter = new Adapter(adaptee);
31. console.log(adapter.request()); // 输出：Adapter: Adaptee: 请求完成！

复制代码

 
在上面的代码中，我们定义了一个目标接口 `Target` 和一个需要适配的对象 `Adaptee`，它们之间的接口不兼容。然后我们使用适配器模式，将 `Adaptee` 对象适配为 `Target` 接口，从而实现了兼容性。
适配器对象 `Adapter` 继承了目标接口 `Target`，并在其内部使用了需要适配的对象 `Adaptee`。在 `Adapter` 的 `request` 方法中，我们调用了 `Adaptee` 的 `specificRequest` 方法，将其返回值包装为符合 `Target` 接口的形式。
通过适配器模式，我们可以将不同接口的对象进行统一封装，从而方便我们使用和维护代码。

来源:https://www.cnblogs.com/ronaldo9ph/p/17208801.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！