1. 首页

JavaScript 编程中的 Polyfills 指的到底是什么?

JavaScript 编程中的 Polyfills 指的到底是什么?

Polyfills

JavaScript 语言在稳步发展。也会定期出现一些对语言的新提议,它们会被分析讨论,如果认为有价值,就会被加入到 tc39.github.io/ecma262/ 的列表中,然后被加到 规范 中。

JavaScript 引擎背后的团队关于首先要实现什么有着他们自己想法。他们可能会决定执行草案中的建议,并推迟已经在规范中的内容,因为它们不太有趣或者难以实现。

因此,一个 JavaScript 引擎只能实现标准中的一部分是很常见的情况。

查看语言特性的当前支持状态的一个很好的页面是 kangax.github.io/compat-tabl…(它很大,我们现在还有很多东西要学)。

Babel

当我们使用语言的一些现代特性时,一些引擎可能无法支持这样的代码。正如上所述,并不是所有功能在任何地方都有实现。

这就是 Babel 来拯救的东西。

Babel 是一个 transpiler。它将现代的 JavaScript 代码转化为以前的标准形式。

实际上,Babel 包含了两部分:

  1. 第一,用于重写代码的 transpiler 程序。开发者在自己的电脑上运行它。它以之前的语言标准对代码进行重写。然后将代码传到面向用户的网站。像 webpack 这样的现代项目构建系统,提供了在每次代码改变时自动运行 transpiler 的方法,因此很容易集成在开发过程中。

  2. 第二,polyfill。

    新的语言特性可能包括新的内置函数和语法构造。 transpiler 会重写代码,将语法结构转换为旧的结构。但是对于新的内置函数,需要我们去实现。JavaScript 是一个高度动态化的语言。脚本可以添加/修改任何函数,从而使它们的行为符合现代标准。

    更新/添加新函数的脚本称为 “polyfill”。它“填补”了缺口,并添加了缺少的实现。

    两个有意思的 polyfills 是:

    • core js 支持很多,允许只包含需要的功能。
    • polyfill.io 根据功能和用户的浏览器,为脚本提供 polyfill 的服务。

所以,如果我们要使用现代语言功能,transpiler 和 polyfill 是必要的。

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区,你想要的,在这里都能找到

教程中的案例

大多数例子都是可运行的,例如:

//码农进阶题库,每天一道面试题 or Js小知识 https://www.javascriptc.com/interview-tips/
alert('Press the "Play" button in the upper-right corner to run');

只有在你的浏览器支持它时才会工作的现代 JS 例子。

Google Chrome 通常是对新语言特性支持更新最快的,在没有任何 transpiler 的情况下,也能很好地运行前沿的演示,当然其他的现代浏览器也挺好。


现代 JavaScript 教程:开源的现代 JavaScript 从入门到进阶的优质教程。React 官方文档推荐,与 MDN 并列的 JavaScript 学习教程

在线免费阅读:zh.javascript.info


作者:技术漫谈
链接:https://juejin.im/post/5dfc26476fb9a016207991b5

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:JavaScript 编程中的 Polyfills 指的到底是什么?

链接:https://www.javascriptc.com/3159.html

« JavaScript设计模式笔记:3个设计原则、14个设计模式、9个技巧(干货)
你需掌握的CSS知识都在这了(长文建议收藏,文末有福利)»
Flutter 中文教程资源

相关推荐

QR code