[Web翻译]JavaScript中的编译与填充

时间:2020-7-29 作者:admin

副标题:有什么区别,为什么有关系?

原文地址:medium.com/better-prog…

原文作者:medium.com/@derek_deve…

发布时间:2019年9月8日 – 4分钟阅读

[Web翻译]JavaScript中的编译与填充

照片:Scott Webbon Unsplash

“Babel的目的是把你的代码,使用浏览器可能还不支持的新功能,并把它转化为任何你关心的浏览器都能理解的代码。”Tyler McGinnis在 “编译与填充“中说。

什么是编译 JavaScript?

Babel是用来编译您的代码,使其与旧版本的JavaScript兼容(从而在旧版本的浏览器中工作)。

编译意味着编译器(Babel)会执行语法转换,但不会添加任何新的JavaScript基元。

当您编译您的代码时,您就是在转换它。


什么是 JavaScript 填充?

当您添加填充时,您是在您的JavaScript代码中添加了以前不存在的全新功能。

填充对于那些已经添加到JavaScript中的新功能是必要的,这些新功能在普通的JavaScript代码中是无法复制的。

Polyfills对于已经添加到全局JavaScript命名空间的新属性是必要的,因为编译器不会解释这些属性。


什么时候使用哪个?

归根结底是语法与属性的问题。例如,箭头函数是语法编译的,但Array.from是多义词填充的。

通常情况下,您需要同时使用填充和编译来使您的代码向后兼容旧的浏览器。

当支持现代浏览器时,这两种方法对于ES6功能来说都不是必需的,但是,一旦下一个伟大的JavaScript功能发布,知道如何使用它是一种很好的做法;编译和/或多边填充该新功能。

连词记忆法

“编译你干净的代码,但要填充你漂亮的属性。” – Dr. Derek Austin🥳

[Web翻译]JavaScript中的编译与填充

(照片由Samuel ZellerUnsplash上拍摄)

例子:填充式或编译式

箭头函数

Babel可以通过函数关键字将箭头函数转化为常规函数,这意味着箭头函数可以被编译

类,如箭头函数,可以转化为常规函数(通过使用原型),所以类也可以被编译

Promises

Babel将无法将承诺转化为旧浏览器能够理解的原生JavaScript语法。
更重要的是,编译不会向全局命名空间添加像 Promise这样的新属性。这意味着Promises需要被填充

析构

因为Babel可以使用点(.)符号将每一个结构化对象转化为正常变量,所以会进行反构造编译。

Includes

Includes可以被转换为使用indexof,但编译时不会添加任何新的关键字、属性或基元,所以Includes需要被填充

[Web翻译]JavaScript中的编译与填充

(Photo by Silvio Kundton Unsplash

大名单:填充式或编译式

这个列表只包括ES6的功能,不包括较新的ECMAScript功能,如flatMap,这些功能也需要编译或填充。

可以被编译

  • 箭头函数
  • 异步函数
  • 块内函数
  • 类属性
  • 计算属性
  • 常量
  • 修饰器
  • 默认参数
  • 析构
  • 模块
  • 对象聚合/展开
  • 属性访问方法

需要进行填充

  • ArrayBuffer
  • Array.from
  • Array.of
  • Array#find
  • Array#findIndex
  • Fuction#name
  • Map
  • Number.isNan
  • Object.assign
  • Object.entries
  • Object.values
  • Promise
  • Set
  • String#includes
  • Symbol
  • WeakMap
  • WeakSet

资料来源:Tyler McGinnis在他的在线课程 “现代Javascript “中,特别是在3:54的这个讲座(可在他的博客上免费获得)。神奇的Tyler McGinnis在他的在线课程Modern Javascript中,特别是3:54的这个讲座(可在他的博客上免费获得)。

[Web翻译]JavaScript中的编译与填充

(照片由Samuel ZellerUnsplash上拍摄)

太多东西记不住?

如果某件事情需要在JavaScript中加入新的属性或基元,你就会知道它需要进行填充。

但如果改变的是简单的语法糖(如箭头函数),可以使用像Babel这样的工具进行编译。

当有疑问时,你总是可以简单地在谷歌上搜索你想做的事情以及关键字polyfill,例如arrow functions polyfillarray.from polyfill

[Web翻译]JavaScript中的编译与填充

(图片作者:贝莉儿NGon Unsplash

其他资源

把浏览器想象成一堵有裂缝的墙。这些polyfills有助于抚平裂缝,给我们提供了一堵光滑的浏览器墙。

[Web翻译]JavaScript中的编译与填充

(图片:Pierre Châtel-Innocention Unsplash)


通过www.DeepL.com/Translator(免费版)翻译

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。