浏览器兼容性：JavaScript polyfill

由于 JavaScript API 有自己的规范，因此并非所有浏览器都同时支持特定规范。因此，我们必须提供 API 的补丁版本，以确保它仍然可以在不原生支持它的浏览器上运行。这种补丁称为 polyfill。

比如为 Safari 15.4 之前提供 Array 的at()方法的补丁：

Array.prototype.at =
    Array.prototype.at ||
    function (index) {
        // The implementation ...
    };

又比如在Safari 15.4 之前 structedClone不可用，也需要打上补丁：

typeof window.structuredClone !== 'function' &&
    window.structuredClone = function (value) {
        // ...
    };

出于为 CSS 属性添加前缀的相同原因，浏览器也在实验阶段为 JavaScript API 添加前缀。下表列出了最流行的浏览器的前缀： 

前缀	浏览器
moz	firefox
ms	使用 Chromium 引擎之前的 Internet Explorer 和 Microsoft Edge
o	使用 WebKit 引擎之前的 Opera 旧版本
webkit	Google Chrome、Safari、更新版本的 Opera 和 Edge 以及几乎所有的 iOS 浏览器

比如，针对requestAnimationFrame函数：

window.requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame;

全屏 API 则是更复杂的场景，支持全屏模式必须涵盖以下功能：

标准API	描述
fullscreenEnabled	检查是否启用了全屏模式
requestFullscreen	请求浏览器进入全屏模式
fullscreenElement	返回全屏元素
fullscreenchange	全屏模式发生时触发该事件
exitFullscreen	退出全屏模式

首先需要一个支持该接口的包装器： 

enum Api {
    ExitFullScreen,
    FullScreenChange,
    FullScreenElement,
    FullScreenEnabled,
    RequestFullScreen,
}

type ApiMap = {
    [key in keyof typeof Api]: string;
};

针对不同浏览器，定义每个API的包装器：

const defaultVendor: ApiMap = {
    ExitFullScreen: 'exitFullscreen',
    FullScreenChange: 'fullscreenchange',
    FullScreenElement: 'fullscreenElement',
    FullScreenEnabled: 'fullscreenEnabled',
    RequestFullScreen: 'requestFullscreen',
};

const webkitVendor: ApiMap = {
    ExitFullScreen: 'webkitExitFullscreen',
    FullScreenChange: 'webkitfullscreenchange',
    FullScreenElement: 'webkitFullscreenElement',
    FullScreenEnabled: 'webkitFullscreenEnabled',
    RequestFullScreen: 'webkitRequestFullscreen',
};

const mozVendor: ApiMap = {
    ExitFullScreen: 'mozCancelFullScreen',
    FullScreenChange: 'mozfullscreenchange',
    FullScreenElement: 'mozFullScreenElement',
    FullScreenEnabled: 'mozFullScreenEnabled',
    RequestFullScreen: 'mozRequestFullScreen',
};

const msVendor: ApiMap = {
    ExitFullScreen: 'msExitFullscreen',
    FullScreenChange: 'msFullscreenChange',
    FullScreenElement: 'msFullscreenElement',
    FullScreenEnabled: 'msFullscreenEnabled',
    RequestFullScreen: 'msRequestFullscreen',
};

最后就可以得到当前浏览器支持的API集，直接简单地调用给定元素的全屏AP即可：

const vendor: ApiMap =
    (Api.FullScreenEnabled in document && defaultVendor) ||
    (webkitVendor.FullScreenEnabled in document && webkitVendor) ||
    (msVendor.FullScreenEnabled in document && msVendor) ||
    defaultVendor;

element[vendor.RequestFullScreen]();