PolyFill JS

Polyfill JS为浏览器提供功能，以支持原生不支持的方法和事件。简单来说，Polyfill JS是一些脚本代码，提供在旧版本的web浏览器上支持现代功能的能力。

例如，它可以在旧版本的Internet Explorer中使用IE滤镜来更改文本阴影的功能，也可以使用一些JavaScript代码动态更新网页的rem值或媒体查询。根据开发者的需求，它可以更新许多其他的web浏览器属性。

我们不仅仅使用polyfills来提供应用程序的性能和功能。Javascript API的原生实现提供比polyfills更好和更快的性能。例如，如果我们使用polyfills的 Object.create 方法创建一个对象，它将只包含通过非原生实现Object.create方法可以实现的功能。相反，如果我们遵循原生方法，它将更具功能性和易用性。

大部分情况下，polyfills的使用是为了满足某些特定要求或解决某些问题，其中web浏览器以不同的方式实现相同的功能。为了在符合标准的条件下访问该功能，它在某些浏览器中使用非标准功能。

尽管如今很少使用polyfill。它在IE6和之前的版本中非常有用。那时，浏览器设计为以不同的方式处理JavaScript。如今，现代浏览器几乎以相似的方式处理JavaScript。

那时，JQuery的第一个版本引入了Polyfill。它是多个浏览器特定解决方法的编译，将不同浏览器的功能组合成一个单一的API，以帮助JavaScript开发人员。

那时，开发人员在处理跨浏览器功能时面临着重大问题。旧版本的浏览器有很多差异，开发人员需要根据用户的浏览器使用不同的方法和有很大不同的用户界面来开发网站。因此，那时的开发人员需要有一小部分支持跨浏览器功能的JavaScript API。

如今，使用Polyfill来处理跨浏览器实现的情况非常少，因为现代浏览器根据标准语义实现了大量的JavaScript API。

让我们了解如何在JavaScript中使用polyfills。

如何在JavaScript中使用Polyfill

如今，网络充满了许多现代和各种新技术。随着引入新技术，旧版本的浏览器可能不支持许多新功能。网络上有许多不同的浏览器具有不同的功能，并且它们每天都在更新。最新版本的web浏览器支持许多功能，并对现有功能进行了一些改进。最新版本可以执行许多旧版本无法执行的任务。但是，在开发应用程序时，有必要确保它支持所有的web浏览器，并以类似的方式提供结果。

尽管如此，将最新功能的功能整合到浏览器中，并确保应用程序的行为在不同浏览器上保持一致，而不降低功能，这是一项具有挑战性的任务。

幸运的是，我们有Polyfills;借助Polyfills的帮助，我们可以实现功能以覆盖浏览器的默认行为，并强制应用程序按预期显示输出。

术语Polyfill是由Remy Sharp提出的，他希望这个术语能描述使用JavaScript复制API的方法，如果浏览器不支持原生API的话。

他在博客中描述说，他希望这个词简单易记，并能够模糊地表示出它的功能。Polyfill一词由两个词Poly和Fills组成；Poly意味着可以使用任何一种技术方法解决问题，并不仅限于使用JavaScript；fill表示填补浏览器中的空缺，无论浏览器版本如何，都需要填补技术上的空缺。

Ployfills的特点

Polyfills的一些特点和原则如下：

• 首先要理解polyfills的范围和含义；Poly表示可以使用多种方法解决，而不仅仅是通过JavaScript本地化的方法；fill表示它将满足用户的需求，并填补不同浏览器之间的差距，无论使用何种技术。
• 可以将其理解为填补空缺和缝隙的工具，以弥合任何不完善之处。
• JavaScript的新版本，如ES6，引入了一些新功能，但仍不完全支持所有的浏览器。如果使用ES6、ES7或ES8的最新语法。所以，有可能在较旧版本的浏览器中不能正常工作。
• 除了语法和运算符之外，新功能还可能包括一些新的方法和函数。因此，我们使用polyfills以及转译器来满足用户的请求。
• 它是一种技术，允许我们通过一些代码向不兼容的较旧浏览器添加功能。

以下是一些需要明确定义polyfill支持以实现旧版本Web浏览器功能的功能：

• Promises
• 数组方法，如Array.from，Array.includes，Array.of等
• 映射对象
• Set
• 符号
• 对象方法，如object.values，Object.keys等

如何使用polyfills在旧的浏览器版本中实现最新的JavaScript功能

让我们了解一下Polyfill在JavaScript中的工作原理。我们将使用node JS环境来实现较旧版本中的新功能。

我们将使用相同的ES6功能，如promises，然后我们将将它们转换为ES5代码，以避免在旧浏览器中出现不兼容的问题。我们将把这个ES5代码babel-polyfill文件从我们的node模块添加到我们的index.html文件中，这样它可以在web浏览器上进行编译和运行。

按照以下步骤实现polyfill功能：

第1步：创建一个项目并设置环境

我们将在应用程序中包含一个babel转译器，将ES6功能转换为向后兼容的JavaScript版本，以支持所有较旧和较新的浏览器。Babel转译器是一个开源工具，对每个人都是可用的。

要创建一个基本的项目并设置环境，需要在我们的机器上安装一个node JS环境。Node JS环境将帮助babel-polyfill运行。

让我们创建一个新的目录，并在其中打开终端。

现在，请运行以下命令来初始化项目：

npm init -y

按下回车键执行。它将提供以下输出：

输出：

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
Wrote to E:\polyfill\package.json:
{
  "name": "polyfill",
  "version": "1.0.0",
  "description": ",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": ",
  "license": "ISC"
}

我们需要安装Babel的cli、core和preset。执行以下命令安装babel的cli、core和preset：

npm install @babel/cli @babel/core @babel/preset-env --save-dev

一旦执行了上述命令，它将开始运行安装程序文件并提供有关已添加的package4s和npm版本的信息。它将提供以下输出：

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

added 196 packages, and audited 197 packages in 49s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New major version of npm available! 8.11.0 -> 9.6.7
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.7
npm notice Run npm install -g stash to update!
npm notice

文件夹结构如下所示：

package.json 文件包含项目的所有已安装的依赖项，而 package-lock.json 是由npm在编译时自动生成的，并且在安装或更新包时会进行更新。

The package.json file contains the following code:
{
  "name": "polyfill",
  "version": "1.0.0",
  "description": ",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": ",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.21.5",
    "@babel/core": "^7.22.1",
    "@babel/preset-env": "^7.22.4"
  }
}

当我们安装Babel-core包时，它将同时安装Babel-polyfill包。此外，为了将代码转换为旧版浏览器兼容的代码，我们需要将es2015添加到预设中。

我们需要创建一个Babel配置文件，将其放置在项目的根目录中。

在项目的根目录中创建一个.babelrc文件，并添加以下预设值：

{ "presets":["@babel/env"] }

现在，我们的文件浏览器将如下所示：

第2步：创建一个JavaScript文件

现在，创建一个包含一些现代JavaScript概念的JavaScript文件。我们将使用ES6功能和promises来使用Polyfill功能。

创建一个index.js文件并编写以下代码。在下面的代码中，我们将使用Polyfill的概念以及promises，并在2秒的时间间隔后记录一条问候信息。

Index.js：

// ES6 promises
const welcome = new Promise((resolve, reject) => {
  setTimeout(function () {
    resolve("Welcome to Javatpoint!");
    document.getElementById(
      "one"
    ).innerHTML = `Polyfil JS provides a functionality to the browser to support the methods and events which are not natively supported by them. In simple words Polyfil js is some script code that provides the ability to the support the modern functionality on older version's of the web browser.`;
    document.getElementById(
      "two"
    ).innerHTML = `For example, it can be used to alter the functionality of the text-shadow in an older version of the internet explorer let's say in IE7 by using the property IE filters, or it can also dynamically update the rem value or media query of a web page by using some JavaScript code.`;
    document.getElementById(
      "three"
    ).innerHTML = `It can update many other web browser properties as per the developer's requirement.`;
    document.getElementById("four").innerHTML =
      "We do not use the polyfills exclusively to experience the better performance and functionality of the application.";
  }, 3000);
});

welcome.then((msg) => {
  console.log(msg);
});

上面的代码使用了ES6的最新功能。现在，我们将把这段代码转换为ES5，以便在旧版浏览器上正确运行。

第3步：将ES6功能转换为ES5

要将index.js文件中的ES6功能转换为ES5代码，请执行以下命令：

npx babel <file name of ES6 code> --out-file <file name of ES5 code>
npx babel index.js --out-file index_es5.js

执行上述命令后，将根据指定的名称创建一个包含ES5代码的新文件。

考虑以下生成文件的代码：

index_es5.js：

"use strict";
// ES6 promises
var welcome = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve("Welcome to Javatpoint!");
    document.getElementById("one").innerHTML =
      "Polyfil JS provides a functionality to the browser to support the methods and events which are not natively supported by them. In simple words Polyfil js is some script code that provides the ability to the support the modern functionality on older version\u2019s of the web browser.";
    document.getElementById("two").innerHTML =
      "For example, it can be used to alter the functionality of the text-shadow in an older version of the internet explorer let\u2019s say in IE7 by using the property IE filters, or it can also dynamically update the rem value or media query of a web page by using some JavaScript code.";
    document.getElementById("three").innerHTML =
      "It can update many other web browser properties as per the developer\u2019s requirement.";
    document.getElementById("four").innerHTML =
      "We do not use the polyfills exclusively to experience the better performance and functionality of the application.";
  }, 3000);
});
welcome.then(function (msg) {
  console.log(msg);
});

在上述代码中，我们可以看到在index_es5.js文件中生成的代码与ES5语法兼容。例如，我们可以看到箭头函数语法自动转换为传统的函数关键字。

第4步：在最终编译的JavaScript中加入Polyfill

现在，我们需要将Polyfill与转换后的JavaScript代码一起包含在新文件中。为此，让我们创建一个名为index.html的html文件，其中包含一些标题值。我们将在标签中绑定所实现的功能，并在

标签中显示描述内容，根据指定的时间在2秒后显示。我们将从node模块中的babel-polyfill中将其包含在创建的index.html文件中。

在index.html文件中添加以下脚本：

<script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
<script type="text/javascript" src="/index_es5.js"></script>

index.html文件应放置在项目的根目录中。以下是我们的html代码：

Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>Polyfill</title>
</head>
<body>
    <h1 style="color: rgb(27, 93, 208);">
    Welcome to Javatpoint : Polyfill testing
    </h1>
    <h1 style="color: rgb(27, 93, 208);">
    What is Polyfill?
    </h1>
    <h3>(The description will be displayed after 2 secs)</h3>
        <span id="one">
        </span>
        <span id="two">
        </span>
        <span id="three">
        </span>
    <h4>We have understand what is Polyfill</h4>
    <h1>Do we use the polyfills exclusively?</h1>
    <p id="four"></p>   
    <!-- Polyfill.min.js file from node_modules and promise_es5 -->
    <script type="text/javascript"
            src="node_modules/babel-polyfill/dist/polyfill.min.js">
    </script>
    <script type="text/javascript"
            src="/index_es5.js">
    </script>
</body>
</html>

我们最终的文件夹结构将如下所示：

第5步：运行我们的应用程序

为了运行我们的应用程序，我们需要使用服务器来启动我们的应用程序。因此，我们在Vs-code中使用了live server插件来运行我们的应用程序。在代码编辑器的右下方，点击“Go Live”选项，或者右键单击文件并选择“live server”选项。它将在配置的端口号上开始运行应用程序。

最终输出：

我们已经为我们的应用程序实现了polyfill功能，以便在较旧的浏览器中使用ES6功能。我们使用promises来使用setTimeout方法在一段时间后显示输出。因此，通过它们的ID绑定到一些标签的指定内容将在指定时间后显示。此代码还兼容仅支持ES5功能的浏览器。

请考虑以下输出：

2秒后，输出：

结论

从上面的输出结果可以看出，通过使用Polyfill的概念，我们在ES5代码中实现了ES6 promises的特性，并实现了相同的功能。同样地，我们可以将其他JS特性转换为较旧版本的兼容性，这些特性都是在最新版本的JS中引入的。

尽管如今现代浏览器处理JS的方式相似，很少需要使用polyfills，但在某些特定情况下仍然可能需要遵循这种方法。