外观模式：探索简化复杂系统，优化开发流程的秘密

在软件开发中，复杂性是一个不可避免的挑战。随着系统规模的增长，代码结构变得越来越复杂，这给开发人员带来了很多困难。比如，去医院看病时需要挂号、门诊、缴费、取药等一系列操作。如果有一个接待人员能够代劳，只需要把需求告诉接待人员，由接待人员处理所有事务，就会更加方便

外观模式的目标就是为了简化这个过程，提供一个统一的接口，隐藏内部的复杂逻辑，使得使用者只需关注外观接口，而无需了解底层的具体实现细节

模式定义

外观模式 又被叫作 门面模式，是一种结构型设计模式。它通过提供一个简化的统一接口，将系统的复杂性进行封装，使得外部调用者可以通过统一的接口来访问内部的复杂逻辑

通俗的理解就是 隐藏功能的复杂性，提供统一的高阶接口

模式作用

简化接口

外观模式提供了一个统一的接口，屏蔽了底层的复杂逻辑和调用过程，使得调用者只需关注一个简单的接口，而无需了解底层的实现细节

提高代码可维护性

通过将复杂的子系统封装在外观类中，可以降低代码的耦合度，减少代码的重复性，提高代码的可读性和可维护性

提高系统易用性

外观模式可以为使用者提供一个简单、直观的接口，使得系统的功能更易于理解和使用

应用场景

封装复杂的第三方库

当需要使用一个复杂的第三方库时，可以使用外观模式将其封装起来，提供一个更简洁、易用的接口给其他开发人员使用

统一接口调用

当一个系统或服务提供多个接口时，可以使用外观模式将这些接口进行封装，提供一个统一的接口给外部调用者使用，简化使用过程

解决子系统之间的依赖关系

当多个子系统之间存在依赖关系时，可以使用外观模式将这些依赖关系进行封装，减少系统之间的直接耦合，提高系统的可扩展性和灵活性

模式总结

外观模式可以隐藏底层的复杂逻辑和调用过程，使得使用者可以更方便地访问和使用系统功能。它能够提高代码的可维护性和易用性，降低代码的复杂度

实战案例

浏览器兼容性处理

js 复制代码

const blobToString = async blob => {
  let buffer = null
  try {
    buffer = await blob.arrayBuffer()
  } catch {
    // 自定义 arrayBuffer 方法
    buffer = await arrayBuffer(blob)
  }
  return [...new Uint8Array(buffer)].map(n => n.toString(16).toUpperCase().padStart(2, '0')).join(' ')
}

js 复制代码

const uuid = () => {
  let uniqueId = null 
  try { 
    uniqueId = crypto.randomUUID() 
  } catch {
    const blobUrl = URL.createObjectURL(new Blob())
    URL.revokeObjectURL(blobUrl)
    uniqueId = blobUrl.slice(blobUrl.lastIndexOf('/') + 1)
  }
  return uniqueId.replace(/-/g, '')
}