优化实战 第 38 期 - 外观模式最佳实践

外观模式

• 模式定义

  外观模式 又被叫作 门面模式，是一种对外提供一个一致的接口，使内部的复杂逻辑更加容易被访问的 结构型设计模式

  

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

• 模式作用

  对外提供一个统一接口，外部应用程序不用关心其内部的具体细节

  大大降低应用程序的复杂度，提高了程序的可维护性和易用性

• 生活示例

  去医院看病时，可能要去挂号、门诊、缴费、取药，让患者和患者家属觉得既繁琐又复杂，如果有提供接待人员，只让接待人员来处理，就很方便

应用场景

• 参数支持多格式

  function request(config) {
    const args = Array.from(arguments)
    if (typeof config === 'string') {
      config = args[1] || {}
      config.url = args[0]
    } else {
      config = config || {}
    }
  }
  

  axios 内部核心方法 request 对传入参数支持多格式的实现

• 浏览器兼容性处理

  blob.arrayBuffer()的兼容性处理

  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(' ')
  }
  

  详情可参阅 第17期 - 防止修改文件扩展名上传文件 一文中的兼容性处理方案

  crypto.randomUUID()的兼容性处理

  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, '')
  }
  

  详情可参阅 第42期 - 前端如何高效的生成唯一ID 一文中的兼容性处理方案

  自定义事件的兼容性处理

  const saveAs = (data, filename) => {
    const blob = data instanceof Blob ? data : new Blob(data)
    const node = document.createElement('a')
    Object.assign(node, {
      download: filename,
      href: URL.createObjectURL(blob),
    })
    try {
      node.dispatchEvent(new MouseEvent('click'))
    } catch(e) {
      const evt = document.createEvent('MouseEvents')
      evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null)
      node.dispatchEvent(evt)
    }
    URL.revokeObjectURL(node.href)
  }
  

  详情可参阅 第45期 - 基于二进制流实现文件下载 一文中的兼容性处理方案

  一起学习，加群交流看 沸点