Компиляция против полифиллинга
Компиляция в JavaScript. Компиляция - это не что иное, как транспиляция. Транспилирование - это подмножество компиляции, при котором исходный код одного языка конвертируется в другой язык или в другую версию того же языка. Компиляция также означает не вводить новые функции во время преобразования.
Полифиллинг - это способ добавить функциональность, которой нет изначально. Это означает, что если вы используете встроенную функциональность, которая доступна в одном браузере, но недоступна в другом браузере или в устаревших браузерах, вам необходимо добавить полифилл, чтобы эта функциональность работала во всех браузерах.
Для получения дополнительной информации о том, какие из функций транспилируются, а какие полифилаются, можно найти на странице https://tylermcginnis.com/compiling-polyfills/.
К счастью, у нас есть Babel, который помогает нам одновременно с транспилированием и полифиллингом. Babel - компилятор JavaScript для легкого использования функций JavaScript нового поколения. Для получения дополнительной информации https://babeljs.io/
Давайте разберемся с примерами ниже
Здесь Babel использует предустановку es2015 для переноса кода с ES6 на ES5. Теперь, если вы видите на экране ниже, левая сторона показывает несколько функций ES6, а правая сторона показывает, как Babel переносит их на ES5 для работы во всех старых браузерах, которые не поддерживают ES6.
Я хотел бы обратить ваше внимание на строки 20 и 23, в которых методы обещания и включает не были перенесены, потому что транспилирование не добавляет новых функциональных возможностей для поддержки неродных функций. . Так что их нужно заполнить полифиллами.
Теперь, переходя ко второму экрану, Babel использует разные полифиллы (babel-plugin-array-includes и babel-plugin-es6-prom) для преобразования это в функции, поддерживаемые устаревшими браузерами
Давайте посмотрим, как мы можем создать собственный полифил, допустим, функция bind поддерживается не всеми браузерами. Во фрагменте кода ниже показаны выходные данные метода привязки как пользовательского, так и собственного. Существует функция под названием sum, которая принимает 3 числа в качестве аргумента и берет 3 числа из контекста (этот объект) и возвращает сумму всех этих чисел.
const obj = {
a:1,
b:2,
c:3
}
function sum(d,e,f){
return (this.a + this.b + this.c + d + e + f);
}
const partial1 = sum.bind(obj,4,5);
console.log(“TOTAL WITH bind METHOD ”,partial1(6)) // 21
Function.prototype.myBind = function(context,…arg1){
let self = this;
return function(…arg2){
return self.apply(context,[…arg1,…arg2]);
}
}
const partial2 = sum.myBind(obj,4,5);
console.log(“TOTAL WITH myBind METHOD”,partial2(6)) // 21
const totalUsingMyBind = sum.myBind(obj,4,5)
Давайте разберем линию подхода на линию.
- Добавляем наш собственный метод изначально, чтобы он был доступен для всех функций. Этого можно добиться, добавив метод в прототип функции.
Function.prototype.myBind = function(){}
2. Поскольку функция связывания возвращает другую функцию с контекстом, мы также должны возвращать функцию.
Function.prototype.myBind = function(){
return function(){}
}
3. Присоединение контекста. Нам нужно присоединить контекст к возвращаемой функции, вызвав фактическую функцию (т. Е. Используя собственный метод вызова).
Function.prototype.myBind = function(context){
const self = this;
return function(){
self.call(context)
}
}
4. Аргументы из метода пользовательского связывания. Нам нужно прикрепить аргументы, переданные из метода пользовательского связывания, к частичной функции.
Function.prototype.myBind = function(context,…arg1){
const self = this;
return function(){
self.apply(context,arg1)
}
}
// As apply takes the argument as array
5. Аргументы частичного метода - Теперь нам нужно прикрепить аргументы, переданные частичным методом, к фактическому методу.
Function.prototype.myBind = function(context,…arg1){
const self = this;
return function(arg2){
self.apply(context,[…arg1,…arg2])
}
}
// As apply takes the arguments as array
Однако для того, чтобы указанная выше программа работала как плагин Babel, вам также необходимо проделать еще несколько шагов. Но идея этого блога состоит в том, чтобы понять основы полифилла и компиляции и того, как мы можем подойти к созданию полифилла.
