外观模式：JavaScript 中的简洁与统一

前端

2023-09-04 07:06:37

在 JavaScript 的世界中，外观模式（Facade）脱颖而出，为复杂的子系统接口提供了一个更高级的统一接口。这种模式旨在简化对底层结构的访问，提高代码的简洁性和可维护性。

外观模式的优势

外观模式带来了一系列好处，包括：

代码简洁： 通过提供一个单一的统一接口，外观模式消除了对多个子系统接口的直接访问需求，从而简化了代码结构。
松散耦合： 外观模式将客户端代码与底层子系统解耦，使它们可以独立开发和维护。
可扩展性： 通过将底层复杂性隐藏在外观后面，外观模式使添加或删除子系统变得更加容易。
兼容性封装： 在 JavaScript 中，外观模式可以用来封装底层结构的兼容性差异，从而简化对不同浏览器的支持。

实现外观模式

在 JavaScript 中实现外观模式非常简单，涉及以下步骤：

创建一个外观类，它将提供统一的接口。
在外观类中，创建对所有子系统接口的引用。
为外观类定义方法，这些方法委托给相应的子系统接口。

JavaScript 中的外观模式示例

考虑以下 JavaScript 代码，它使用外观模式封装对不同浏览器的兼容性差异：

class BrowserCompatibilityFacade {
  constructor() {
    this.chromeApi = new ChromeApi();
    this.firefoxApi = new FirefoxApi();
    this.safariApi = new SafariApi();
  }

  openTab(url) {
    if (this.isChrome()) {
      this.chromeApi.openTab(url);
    } else if (this.isFirefox()) {
      this.firefoxApi.openTab(url);
    } else {
      this.safariApi.openTab(url);
    }
  }

  isChrome() {
    return typeof chrome !== "undefined";
  }

  isFirefox() {
    return typeof browser !== "undefined";
  }

  isSafari() {
    return /constructor/i.test(window.HTMLElement) || (function () {
      try {
        return window.safari.pushNotification;
      } catch (e) {}
    }());
  }
}