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

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

适配器模式特性

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

应用示例

1. 数据格式转换

javascript 复制代码

// 目标接口
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

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

2. 浏览器兼容性处理

javascript 复制代码

// 目标接口
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() {
    if (typeof window.fetch === 'function') {
      // 使用现代浏览器的 fetch API 发送请求
      return fetch('/api/data').then(response => response.json());
    } else {
      // 使用旧版浏览器的 XMLHttpRequest 发送请求
      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();
      });
    }
  }
}

// 使用适配器
const adaptee = new Adaptee();
const adapter = new Adapter(adaptee);
adapter.request().then(data => console.log(data));

首先，我们定义了一个目标接口 Target，其中包含一个 request 方法。这个方法在基类中是抽象的，抛出一个错误以表明应该被重写。

然后，我们定义了一个被适配对象 Adaptee，它具有一个 specificRequest 方法，返回一个字符串。

接下来，我们定义了一个适配器类 Adapter，它继承自目标接口 Target。适配器类的构造函数接受一个被适配对象作为参数，并将其存储在实例变量 adaptee 中。

在适配器类中，我们重写了 request 方法，根据浏览器环境中是否存在 fetch 函数来判断使用现代浏览器的 fetch API 还是旧版浏览器的 XMLHttpRequest 来发送请求。如果存在 fetch 函数，则使用 fetch API 发送请求并解析为 JSON 格式的数据。否则，使用 XMLHttpRequest 发送请求并解析为 JSON 格式的数据。

最后，我们创建了一个被适配对象 adaptee 和一个适配器对象 adapter，并将被适配对象传递给适配器对象的构造函数。然后，我们调用适配器对象的 request 方法，并使用 .then() 方法处理返回的数据。在回调函数中，我们将数据打印到控制台。

优缺点

优点

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

缺点

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

总结

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