Polyfilling y Transpiling en JavaScript

JavaScript | Polyfilling y Transpiling : En este tutorial, vamos a aprender sobre la Polyfilling y Transpiling en JavaScript con ejemplos.

JavaScript está avanzando rápidamente. Hoy en día es el lenguaje de programación / scripting más popular que los desarrolladores utilizan para la lógica de código y aplicaciones y se utiliza en innumerables número de lugares. La comunidad detrás de su desarrollo no ha dejado de crear y añadir nuevas características a JavaScript para que sea más animada, fácil e incluso más potente. Sin embargo, el inconveniente de que a lo largo de etiquetas cada vez que un idioma o marco avanza rápidamente con los nuevos cambios que vienen en todo el tiempo es su apoyo en los navegadores. Sabemos que compila JavaScript en el navegador y es importante class el navegador para entender lo que JavaScript está escribiendo. características Newser toman tiempo para ser interpretado por los navegadores y, a veces algunas versiones de algunos navegadores propósito frenar el apoyo for nuevas características, debido a la estabilidad. Sino como un desarrollador, no podemos utilizar esto como una excusa para no conocer las novedades for nosotros. Entonces, ¿cómo nos aseguramos de que la moderna JS funciona perfectamente en las versiones anteriores de los navegadores?

1) Polyfilling

Un polyfill es una pieza de código o un plugin que permite moderna cuenta con JavaScript para funcionar en las versiones anteriores del navegador. Es sólo un truco o una solución donde las características modernas están codificados dentro y fuera usando las características de edad avanzada por lo que el navegador pueda entender.

for ejemplo, ES15 nos permite cheque es un valor es un número o no usando el método isNaN () .

isNaN(44);
isNaN('hello');

salida

false
true

isNaN () cheques For valores que no hacen un número. Devuelve cierto si el valor pasado como parámetro no es un número y falsa si se trata de un número. Al ser una nueva característica, algunos navegadores no sean compatibles con ella. Así que podemos aplicar nuestra propia NaN como polyfill y replicar su comportamiento que el navegador pueda entender.

Number.isNaN = function isNaN(n) {
return n !== n;
};

También podemos comprobar si el método no está ya disponible for el navegador primero y luego definimos.

if (!Number.isNan) {
Number.isNaN = function isNaN(n) {
return n !== n;
};
}

La desventaja de polyfills es que todas las características no pueden ser codificados como polyfills Sin embargo, es todavía muy comúnmente utilizado por los desarrolladores for características que pueden codificarse fácilmente.

2) Transpiling

La sintaxis más reciente no se puede replicar usando polyfills . No importa lo que hagamos, obtendremos un error de sintaxis definida y es aquí donde transpiling viene al rescate. Puede for abajo transpiling como una combinación de dos palabras transformadora y la compilación de . Ahora se puede entender fácilmente que transpiling es una herramienta que transforma nueva sintaxis en el más viejo, que el navegador pueda entender. El transpiler más comúnmente usado es Babel, que hace todo el trabajo break nosotros. Para demostrarlo, vamos a código de alguna nueva sintaxis ver cómo están transpiled por Babel.

Ir a https://babeljs.io/repl y en el editor de izquierda, vamos a escribir algunas Newser sintaxis de JS, que Babel transpile de sintaxis más antigua en el editor de la derecha.

const add = (a, b) => {
console.log(`${a} + ${b} = ${a+b}`);
}

salida

"use strict";
var add = function add(a, b) {
console.log("".concat(a, " + ").concat(b, " = ").concat(a + b));
};

Como se puede ver que hemos utilizado tres características modernas, la palabra clave for, función de matrices y cadenas de la plantilla y todos ellos se convierten en sintaxis anterior.

const multiply = (a = 5, b = 3) => {
console.log(a * b);
};

salida

"use strict";
var multiply = function multiply() {
var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5;
var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
console.log(a * b);
};

Utilizando el parámetro valor const es también una característica bastante nueva y Babel compila en un código comprensible en términos de sintaxis más antigua de JS. Echemos un vistazo a un último ejemplo,

class Student {
constructor(name, rollNo) {
this.name = name;
this.rollNo = rollNo;
this.attendance = 0;
}
isPresent() {
this.attendance++;
}
}

Un poco orientado a objetos JS para crear un pequeño default class estudiantes. Y miramos a la derecha …

salida

"use strict";
function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }
function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var Student =
function () {
function Student(name, rollNo) {
_classCallCheck(this, Student);
this.name = name;
this.rollNo = rollNo;
this.attendance = 0;
}
_createClass(Student, [{
key: "isPresent",
value: function isPresent() {
this.attendance++;
}
}]);
return Student;
}();

Oh, ahora, lo que la brujería es esto? Unas pocas líneas de código transpiled en una cantidad monstruosa de código! Imagínese cuántas líneas de código y complejidad a ahorrar mediante el uso de nuevas características. Si se tenía que utilizar la sintaxis más antigua que le realmente tener que escribir mucho! Increíblemente increíble.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *