【前端设计模式】之适配器模式

✨ 专栏介绍

设计模式是在软件开发中经过验证的解决问题的方法。它们是从经验中总结出来的，可以帮助我们更好地组织和管理代码，提高代码的可维护性、可扩展性和可重用性。无论是前端还是后端开发，设计模式都扮演着重要的角色。在本专栏中，我们将探索一些常见的前端设计模式，并学习如何将它们应用于实际项目中。通过掌握这些设计模式，我们可以编写更优雅、可靠且易于维护的前端代码。

本文主要讲解结构型模式中的适配器模式

适配器模式是一种常见的设计模式，用于将一个类的接口转换成客户端所期望的另一个接口。在前端开发中，适配器模式可以帮助我们解决不同框架或库之间的兼容性问题，提高代码的复用性和可维护性。

适配器模式特性

1. 适配器类：适配器类是实现目标接口并包含对被适配对象的引用。它将客户端请求转发给被适配对象，并进行必要的转换。
2. 目标接口：目标接口是客户端所期望使用的接口。适配器类通过实现目标接口来与客户端进行交互。
3. 被适配对象：被适配对象是需要被转换成目标接口的类或对象。它可能是一个已有的类、第三方库或其他框架。

应用示例

1. 数据格式转换

// 目标接口
class Target {
  request() {
    throw new Error('This method should be overridden!');
  }
}

// 被适配对象
class Adaptee {
  specificRequest() {
    return 'Specific request';
  }
}

// 适配器类
class Adapter extends Target {
  constructor(adaptee) {
    super();
    this.adaptee = adaptee;
  }

  request() {
    const specificRequest = this.adaptee.specificRequest();
    // 对数据进行格式转换
    return specificRequest.toUpperCase();
  }
}

// 使用适配器
const adaptee = new Adaptee();
const adapter = new Adapter(adaptee);
console.log(adapter.request()); // 输出：SPECIFIC REQUEST

1. 目标接口（Target） ：定义了一个名为request的方法，但这个方法没有具体实现，只是一个抛出错误的抽象方法。
2. 被适配对象（Adaptee） ：这个类有一个名为specificRequest的特定方法，这个方法实现了具体的功能。
3. 适配器类（Adapter） ：这个类继承了目标接口，因此它实现了和目标接口一致的request方法。然后在request方法中，适配器调用了被适配对象的specificRequest方法，并对其返回的数据进行了格式转换（转换为大写）。在适配器模式中，适配器是一个新的类，它将被适配对象和目标接口连接起来，使得目标接口可以像调用被适配对象的specificRequest方法一样调用request方法。
4. 使用适配器：创建了一个被适配对象和一个适配器，然后将被适配对象传递给适配器。当调用适配器的request方法时，适配器内部调用了被适配对象的specificRequest方法并进行了格式转换，最后输出结果为"SPECIFIC REQUEST"。

2. 浏览器兼容性处理

// 请求接口
class Request {
  send() {
    throw new Error("This method should be overridden!");
  }
}

// 现代浏览器请求类
class FetchRequest extends Request {
  send() {
    return fetch("/api/data").then((response) => response.json());
  }
}

// 旧版浏览器请求类
class XHRRequest extends Request {
  send() {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", "/api/data");
      xhr.onload = () => resolve(JSON.parse(xhr.responseText));
      xhr.onerror = () => reject(xhr.statusText);
      xhr.send();
    });
  }
}

// 适配器类
class Adapter extends Request {
  constructor() {
    super();
    this.request = null;
    if (typeof window.fetch === "function") {
      this.request = new FetchRequest();
    } else {
      this.request = new XHRRequest();
    }
  }
  send() {
    return this.request.send();
  }
}

// 使用适配器发送请求
const adapter = new Adapter();
adapter.send().then((data) => console.log(data));

上述示例中创建了一个适配器类Adapter，它继承自Request类，并具有一个request属性。这个request属性实际上是一个现代浏览器的请求类（FetchRequest）或者一个旧版浏览器的请求类（XHRRequest）。

在适配器类的构造函数中，根据浏览器是否支持fetch函数，选择创建一个FetchRequest实例或者一个XHRRequest实例，然后赋值给request属性。

然后，在适配器类中，重写了send方法，这个方法调用了对应request实例的send方法。

最后，创建了一个适配器实例，并调用了它的send方法，这个方法会根据当前浏览器环境，使用对应的请求方式发送请求，然后打印返回的数据。

优缺点

优点

1. 提高代码复用性：通过适配器模式，我们可以重用已有的类或对象，而无需修改它们的代码。
2. 提高代码可维护性：适配器模式将适配逻辑封装在适配器类中，使得代码更易于理解和维护。
3. 解决兼容性问题：适配器模式可以帮助我们解决不同框架或库之间的兼容性问题，使它们能够无缝地协同工作。

缺点

1. 增加了代码复杂性：引入适配器类会增加代码的复杂性，特别是在处理多个被适配对象时。
2. 可能引入性能损耗：由于需要进行数据转换或接口转换，适配器模式可能会引入一定的性能损耗。

总结

适配器模式是一种非常有用的设计模式，在前端开发中经常用于解决不同框架或库之间的兼容性问题。它可以提高代码复用性和可维护性，并且能够有效地解决兼容性问题。然而，使用适配器模式也需要注意增加了代码复杂性和可能引入的性能损耗。