You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/03-code-quality/06-polyfills/article.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
2
-
# Поліфіли і транспілятори
2
+
# Поліфіли та транспілятори
3
3
4
4
Мова JavaScript постійно розвивається. До неї регулярно додаються нові пропозиції, далі вони аналізуються і, якщо вважаються гідними для розширення мови, додаються до списку <https://tc39.github.io/ecma262/>, а потім переходять до [специфікації](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/).
5
5
@@ -11,18 +11,18 @@
11
11
12
12
Як програмісти, ми б хотіли використовувати найновіші можливості. Чим більше хороших речей — тим краще!
13
13
14
-
З іншого боку, як змусити працювати «сучасний» код на старих рушіях? Адже вони покищо не підтримують найновіших можливостей.
14
+
З іншого боку, як змусити працювати «сучасний» код на старих рушіях? Адже вони поки що не підтримують найновіших можливостей.
15
15
16
16
Для цього існують два інструменти:
17
17
18
18
1. Транспілятори.
19
19
2. Поліфіли.
20
20
21
-
В цьому розділі ми дізнаємося, як вони працюють та яке їхнє місце у веб-розробці.
21
+
В цьому розділі ми дізнаємося, як вони працюють та яке їхнє місце у веброзробці.
22
22
23
23
## Транспілятори
24
24
25
-
[Транспілятор](https://uk.wikipedia.org/wiki/Транскомпілятор) -- це спеціальний інструмент, який «перекладає» вихідний код з однієї мови програмування в код на іншій мові програмування. Також обробка коду може виконуватися в межах однієї мови програмування. Транспілятор парсить ("читає та розуміє") сучасний код і переписує його, використовуючи старі синтаксичні конструкції, які працюють на старих рушіях.
25
+
[Транспілятор](https://uk.wikipedia.org/wiki/Транскомпілятор) -- це спеціальний інструмент, який «перекладає» вихідний код з однієї мови програмування в код іншою мовою програмування. Також обробка коду може виконуватися в межах однієї мови програмування. Транспілятор парсить ("читає та розуміє") сучасний код і переписує його, використовуючи старі синтаксичні конструкції, які працюють на старих рушіях.
26
26
27
27
Наприклад, JavaScript до 2020 року не мав "оператора об’єднання з null" `??`. Якщо відвідувач використовує старий браузер, він не зможе виконати код, на кшталт `height = height ?? 100`.
Якщо ми говоримо про нові функції, а не синтаксичні вирази, то тут нічого не потрібно транспілювати ("перекладати"). Нам лише потрібно оголосити відсутні функції.
56
56
57
-
Скрипт, який оновлює/додає нові функції називається "**поліфіл**" (polyfill). Він "заповнює" прогалини і додає відсутній функціонал.
57
+
Скрипт, який оновлює/додає нові функції називається "**поліфіл**" (polyfill). Він "заповнює" прогалини й додає відсутній функціонал.
58
58
59
59
Для нашого випадку з функцією `Math.trunc`, поліфілом буде такий скрипт, який реалізує цю функцію, ось так:
60
60
@@ -72,7 +72,7 @@ if (!Math.trunc) { // якщо немає такої функції
72
72
JavaScript дуже динамічна мова -- скрипти можуть додавати чи оновлювати функції, навіть якщо вони вбудовані.
73
73
74
74
Є два цікавих поліфіла:
75
-
- [core js](https://github.com/zloirock/core-js), що підтримує багато функціоналу, дозволяє включати лише необхідні функції.
75
+
- [core js](https://github.com/zloirock/core-js), що підтримує багато функціонала, дозволяє включати лише необхідні функції.
76
76
- [polyfill.io](https://polyfill.io) -- сервіс, що генерує скрипт з поліфілами відповідно до потрібних нам функцій та браузера користувача.
77
77
78
78
@@ -82,7 +82,7 @@ JavaScript дуже динамічна мова -- скрипти можуть
82
82
83
83
Просто не забувайте використовувати транспілятор (якщо будете використовувати сучасний синтаксис чи оператори) та поліфіли (щоб додавати функції, які можуть бути відсутні). Це дозволить впевнитися, що код працює на різних рушіях.
84
84
85
-
Наприклад, пізніше (коли достатньо вивчите JavaScript), ви зможете налаштувати систему збору проєкту на основі [webpack](https://webpack.js.org/) із плаґіном [babel-loader](https://github.com/babel/babel-loader).
85
+
Наприклад, пізніше (коли достатньо вивчите JavaScript), ви зможете налаштувати систему збору проєкту на основі [webpack](https://webpack.js.org/) із плагіном [babel-loader](https://github.com/babel/babel-loader).
86
86
87
87
Ось хороші ресурси, де можна дізнатися поточний стан підтримки різного функціоналу:
88
88
- <https://kangax.github.io/compat-table/es6/> - для чистого JavaScript.
0 commit comments