El DOM está en constante evolución. Algunos navegadores lo adaptan más rápido, otros más lentamente. Todo esto dificulta el uso fácil y sin problemas de las últimas novedades. Los desarrolladores deben pensar cada vez qué navegadores son comunes entre los usuarios de sus proyectos.
¿Cómo podemos averiguar qué navegadores son relevantes? Por lo general, esto se conoce a través del análisis. Por ejemplo, podemos utilizar Google Analytics, que recopila datos en tiempo real sobre todos los visitantes del sitio.
En situaciones especialmente complicadas, es necesario admitir navegadores muy antiguos que apenas pueden hacer nada. Esto ocurre con frecuencia en organizaciones gubernamentales.
Por ejemplo, hay un método matches() que busca elementos por selectores CSS. Es compatible con Internet Explorer, pero solo a partir de la versión 9. Si su proyecto se declara compatible con la versión 8, obtendremos un error al llamar a este método:
const div = document.querySelector('div');
div.matches('.someClass'); // Uncaught TypeError: matches is not a function
Afortunadamente, JavaScript permite compensar parcialmente las limitaciones de los navegadores antiguos. Gracias a los prototipos, los desarrolladores pueden agregar funcionalidad faltante directamente a la implementación del DOM. Esto se hace mediante polyfills, que estudiaremos hoy.
El principio general de funcionamiento de estas bibliotecas es el siguiente:
- Verificar si existe el método o propiedad necesario.
- Si no existe, agregarlo.
Es importante que la biblioteca de polyfills se cargue antes de ejecutar cualquier otro código. Solo de esta manera el resto del código puede confiar en que todas las propiedades necesarias estarán disponibles.
Agregar un método
Veamos un ejemplo de polyfill para el método node.matches(). Funciona en todos los navegadores populares y utiliza su especificidad, como se puede ver por los nombres de las propiedades:
(function(constructor) {
const p = constructor.prototype;
if (!p.matches) {
p.matches = p.matchesSelector ||
p.mozMatchesSelector ||
p.msMatchesSelector ||
p.oMatchesSelector ||
p.webkitMatchesSelector;
};
})(window.Element);
Después de ejecutar este código, podemos usar el método element.matches() sin preocuparnos de que no esté presente en navegadores antiguos.
Agregar una propiedad
Un caso más complejo es agregar la propiedad ParentNode.lastElementChild. Aquí es necesario programar la lógica para buscar el elemento necesario:
// Tenga en cuenta que la adición de la propiedad se realiza de una manera especial,
// lo que hace que la propiedad sea dinámica y perezosa
// En otras palabras, su valor se calculará solo cuando se acceda a él
if (!('lastElementChild' in document.documentElement)) {
Object.defineProperty(Element.prototype, 'lastElementChild', {
get: function() {
for (let nodes = this.children, n, i = nodes.length — 1; i >= 0; --i) {
if (n = nodes[i], 1 === n.nodeType) {
return n;
}
}
return null;
}
});
}
Los ejemplos anteriores no son completamente completos. Si miráramos el código fuente de las bibliotecas correspondientes, nos sorprenderíamos de la cantidad de código que contienen. Después de todo, garantizar un funcionamiento universal en todos los navegadores y versiones no es una tarea fácil.
Para verificar el soporte de características específicas en diferentes navegadores, podemos utilizar el recurso Can I use:
Hay muchos polyfills listos para usar en GitHub para cualquier parte del DOM. Están dispersos en diferentes repositorios de diferentes personas. Por lo tanto, si necesitas polyfill algo, primero deberías buscar la biblioteca adecuada.
A veces solo necesitamos verificar la presencia de una determinada característica y ejecutar un código diferente según el resultado. En esta situación, la biblioteca modernizr puede ayudar:
// Verificar la presencia de Flash
Modernizr.on('flash', (result) => {
if (result) {
// el navegador tiene Flash
} else {
// el navegador no tiene Flash
}
});
El núcleo de JavaScript
Los polyfills no solo existen para el DOM. JavaScript en sí también está en constante evolución.
Muchas características del JavaScript moderno han simplificado tanto el desarrollo que ya es difícil prescindir de ellas. Por lo tanto, casi ningún proyecto moderno se puede hacer sin la biblioteca core-js. Cubre casi todas las características del JavaScript moderno.
Para usar esta biblioteca, debes instalarla como una dependencia del proyecto y agregarla en el nivel superior de la aplicación. Y eso es todo, luego hace todo el trabajo por sí misma, por lo que no es necesario compilar la aplicación a través de webpack:
import 'core-js/stable';
// Otras dependencias
A continuación, en el curso, habrá ejercicios donde verás la conexión de esta biblioteca en el archivo index.js.
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
