• 欢迎访问天天编码网站,Java技术、技术书单、开发工具,欢迎加入天天编码
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏天天编码吧
  • 我们的淘宝店铺已经开张了哦,传送门:https://shop145764801.taobao.com/

3.6 Polyfill(垫子)

JS 教程 tiantian 190次浏览 0个评论 扫描二维码

JavaScript 语言一直在稳步进化中。新的语法特性被不断地加入到 JavaScript 中,那些特性被不断地分析,而且在被认为值得考虑的情况下,会被加入到 https://tc39.github.io/ecma262/ 这个列表中,然后就朝着最终规范的方向前进。

JavaScript 引擎背后的团队对于如何完善特性和特性的优先顺序具有他们自己的考虑。他们有可能决定首先实现位于草案中的某些建议,而且推迟某些位于规范中的某些特性,这可能是因为那些特性没有太大的吸引力,或者实现难度过大。

所以,某些引擎只实现了 JavaScript 语言标准的部分功能是非常常见的现象。

查看语言标准中被支持的语法特性的情况,可以查看一个非常好的页面: https://kangax.github.io/compat-table/es6/,这个页面内容很多,我们还有很多知识要学。

Babel

当我们在代码中使用 JavaScript 语言的现代特性的时候,可能某些引擎并没有很好地支持那些代码。直白地说,不是所有的引擎都实现了所有的标准特性。

幸运的是,Babel 可以帮助我们解决该问题。

Babel 是一个转译器。它可以将现代的JavaScript 代码转换成老式的标准代码。

实际上,Bable 具有两个最重要的部分:

  1. 首先,是一个转译器,可以用来重写代码。

开发者在其本地机器上执行这个转换。它会将代码重写为更加老式的标准代码。然后,那些转换后的代码被分发给用户的浏览器来执行。现代的项目构建系统,比如 webpack 和 brunch ,都提供了自动执行转译器的机制,可在每次代码修改后自动运行。所以,这个转译机制不会消耗开发者任何多余的时间。

  1. 第二个部分,是一个 polyfill,中文俗称为 垫子。

Babel 中的转译器会重写代码,所以新的语法特性就被很好的处理了。但是,对于JavaScript 中新增的那些函数,我们就需要创建一个特殊的脚本来实现它们。JavaScript 是一个非常动态的脚本语言,脚本可能不仅仅是增加新的函数,而且还可能会修改那些内建的函数,所以它们的行为应该与现代的语言标准相一致。

存在一个名为“polyfill”的脚本,用来增加缺失的函数实现,并填充新旧语言标准之间的缝隙。

业界存在两个主流的的 polyfill :

  • babel polyfill 支持非常多的特性,但是代码体积也比较大
  • polyfill.io 服务允许按需加载/构造对应的 polyfill 模块。

所以,为了让老的引擎支持JavaScript 的现在特性,我们需要设置转译器和添加 polyfill 。

如果我们的最初目标就是现代的执行引擎,而且只使用那些被普遍支持的语言特性,那么我们就可以不使用 Babel。

教程样例

本教程的绝大多数样例代码都是可运行的,比如:

alert('Press the "Play" button in the upper-right corner to run');

但是,那些使用了现代JavaScripg 语言特性的示例代码只在浏览器支持那些特性的情况下才能运行。

Chrome Canary 可以很好地执行本教程的所有示例,当然,其他的现代浏览器可能也可以支持所有的示例代码。

注意:在实际的生产中,我们可以利用 Babel 来转译代码,使之可运行于不那么现代的浏览器中,所以,我们可以不限制代码所使用的语言特性,使用了新特性的代码可以在任何引擎中运行。


天天编码 , 版权所有丨本文标题:3.6 Polyfill(垫子)
转载请保留页面地址:http://www.tiantianbianma.com/polyfill.html/
喜欢 (0)
支付宝[多谢打赏]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址