适配器模式

适配器模式（Adapter Pattern）是一种结构型设计模式，它允许将一个类的接口转换成客户端所期望的另一个接口，使得原本由于接口不匹配而无法一起工作的类能够协同合作。在JavaScript中，适配器模式常用于处理不同组件间接口不一致的问题，尤其是当你想复用现有组件但它们的接口不符合新需求时。

核心思想

目标接口（Target Interface）：定义了客户端所期望的方法或功能。适配器将被适配者的接口转换成目标接口，使其能够和客户端适配。
被适配者（Adaptee）：已经存在的类或接口，包含了需要被适配的功能。被适配者的接口与目标接口不兼容，无法直接和客户端进行交互。
适配器（Adapter）：一个中间层，它将被适配者的接口转换成目标接口，从而使得被适配者能够与客户端适配。适配器通过实现目标接口，并在内部持有一个被适配者的实例。当客户端调用适配器的方法时，适配器会将请求转发给被适配者，并将结果转换成符合目标接口的形式返回给客户端。

代码实现：

假设在html中有这样一段代码:

typescript

<div id="app">
  <h1>Eddie's-design-patterns</h1>
  <button>btn</button>
</div>

脚本代码：

typescript

window.onload = () => {
  const btn = document.querySelector("button");
  const title = document.querySelector("h1")!;
  //希望在用户点击按钮的时候改变标题颜色
  btn?.addEventListener("click", function () {
    title.style.background = "red";
  });
};

使用一个适配器去操作DOM

typescript

// 定义一个类型来表示 CSS 属性
type CSSPropertiesType = {
  [key in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[key] | number;
};

//适配器
const $ = function (ele: keyof HTMLElementTagNameMap) {
  const dom = document.querySelector(ele)! as HTMLElement;
  return {
    css: (options: CSSPropertiesType) => {
      for (const key in options) {
        //调用原来的接口
        dom.style[key] = options[key] as any;
      }
    },
  };
};

window.onload = () => {
  const btn = document.querySelector("button");
  btn?.addEventListener("click", function () {
    //被适配者是浏览器的web api
    // title.style.background = "red";
    //使用适配器
    $(`h1`).css({ background: "red" });
  });
};

适配器模式 ​

核心思想 ​

适配器模式

核心思想