Introduction aux polyfills

Parent Previous Next



Introduction aux polyfills



La problématique

Vous n'êtes pas sans savoir que certaines technologies récentes sont plus ou moins bien supportées par certains navigateurs, voire même pas du tout. Cela nous pose à tous de nombreux problèmes dans le développement de nos projets destinés au Web. Dans ce cours, nous avons déjà étudié des méthodes et des propriétés qui ne sont pas supportées par de vieux navigateurs, comme isArray() par exemple.


Pour réaliser nos projets, il nous faut alors ruser avec des conditions permettant de tester si le navigateur actuel supporte telle ou telle technologie ; dans le cas contraire il nous faut alors déployer des solutions dont certaines sont peu pratiques. Dans certains cas, nous sommes même obligés de nous passer de ces technologies récentes et de nous rabattre sur de vieilles solutions… Bref, un vrai casse-tête !


La solution


Il existe un moyen de se faciliter plus ou moins la tâche, cela s'appelle les polyfills ! Concrètement, un polyfill est un script qui a pour but de fournir une technologie à tous les navigateurs existants. Une fois implémenté dans votre code, un polyfill a deux manières de réagir :


Rien ne vaut un bon exemple pour comprendre le principe ! Essayez donc le script suivant avec votre navigateur habituel (qui se doit d'être récent) puis sur un vieux navigateur ne supportant pas la méthode isArray(), Internet Explorer 8 fera très bien l'affaire :

if (!Array.isArray) { // Si isArray() n'existe pas, alors on crée notre méthode alternative :

    Array.isArray = function(element) {

        return Object.prototype.toString.call(element) == '[object Array]';

    };

}

 

alert(Array.isArray([])); // Affiche : « true »

alert(Array.isArray({})); // Affiche : « false »



La méthode isArray() fonctionne maintenant sur tous les navigateurs ! Pas besoin de s'embêter à vérifier à chaque fois si elle existe, il suffit juste de s'en servir comme à notre habitude et notre polyfill s'occupe de tout !


Quelques polyfills importants


Le principe des polyfills ayant été abordé, sachez maintenant que la plupart d'entre vous n'auront pratiquement jamais à réaliser vos propres polyfills, car ils sont déjà nombreux à avoir été créés par d'autres développeurs Javascript. Le MDN est un bon concentré de polyfills et


les recherches sur Google peuvent aussi vous aider. Essayez donc de taper le nom d'une méthode suivi du mot-clé « polyfill », vous trouverez rapidement ce que vous cherchez. 


Depuis le début de ce cours, nous vous avons parlé de nombreuses méthodes et propriétés qui ne sont pas supportées par de vieux navigateurs (Internet Explorer étant souvent en cause). À chaque fois, nous avons tâché de vous fournir une solution fonctionnelle, cependant il existe trois méthodes pour lesquelles nous ne vous avions pas fourni de solutions car les polyfills sont bien plus adaptés. Vous trouverez donc ici un lien vers un polyfill pour chacune des méthodes désignées :



Créé avec HelpNDoc Personal Edition: Générateur de documentation complet

Site à deux balles