通用异常处理：优雅地处理挂载在 window 上的函数可能不存在的情况

2023-11-08 17:39:25

引言

在现代 Web 开发中，我们经常需要处理在浏览器环境中运行的 JavaScript 代码。其中一个常见挑战是优雅地处理可能不存在挂载在 window 对象上的函数的情况。本文将探讨如何编写一个通用的方法来处理这种异常，并提供通过 <script> 标签和自定义函数（polyfill）两种方法来实现它的示例。

问题

假设我们有一个依赖于 window.myFunction 函数的 JavaScript 应用程序。然而，在某些情况下，window.myFunction 可能不存在，例如在以下情况下：

浏览器不支持该函数。
函数尚未加载或已被移除。
应用程序在沙盒环境中运行，其中访问 window 对象受到限制。

如果不处理 window.myFunction 不存在的情况，应用程序可能会崩溃或出现意外行为。因此，至关重要的是有一个机制来优雅地处理这种异常。

通用异常处理方法

为了优雅地处理挂载在 window 对象上的函数可能不存在的情况，我们可以编写一个通用的方法，该方法可以根据函数是否存在情况采取不同的操作。该方法可以如下实现：

const checkFunction = (functionName, fallbackFunction) => {
  if (typeof window[functionName] === 'undefined') {
    // 函数不存在，使用备用函数
    return fallbackFunction;
  } else {
    // 函数存在，直接返回
    return window[functionName];
  }
};

此方法接受两个参数：

functionName：要检查的挂载在 window 对象上的函数的名称。
fallbackFunction：如果函数不存在，则要返回的备用函数。

该方法首先检查 window[functionName] 是否存在，如果存在，则直接返回该函数。否则，它返回提供的备用函数。

通过 `<script>` 标签兜底处理

一种处理 window.myFunction 可能不存在的情况的方法是使用 <script> 标签动态加载函数。当页面加载时，<script> 标签将尝试加载函数，如果成功加载，函数将挂载到 window 对象。如果没有加载，<script> 标签将提供一个备用函数。

以下是使用 <script> 标签兜底处理的示例：

<script>
  // 尝试加载 window.myFunction
  if (typeof window.myFunction === 'undefined') {
    // 函数不存在，加载备用函数
    const script = document.createElement('script');
    script.src = 'myFunction.js';
    document.head.appendChild(script);
  }
</script>

通过自定义函数（polyfill）兜底处理

另一种处理 window.myFunction 可能不存在的情况的方法是创建自定义函数（polyfill）。polyfill 是一个函数，它模仿其他环境中不存在的函数的行为。

以下是创建一个 polyfill 以兜底处理 window.myFunction 的示例：

// 自定义函数（polyfill）
const myFunctionPolyfill = () => {
  // 备用函数的实现
};

// 如果 window.myFunction 不存在，使用 polyfill
if (typeof window.myFunction === 'undefined') {
  window.myFunction = myFunctionPolyfill;
}