当前位置：首页 > article >正文

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

article 2024/11/10 0:45:53

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

适配器模式特性

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

应用示例

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

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