Table des matières
Que sont les polyfills en science de la programmation?
View more Tutorials:
Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles.
Facebook
En termes simples, on peut considérer un polyfill comme une pâte de colmatage ordinaire laquelle peut être utilisée pour combler les trous et les fissures afin de lisser les défauts d'un mur. Au Royaume-Uni, il existe une très célèbre marque de ce type de pâte qui s'appelle "Polyfilla".
Pour le web, le terme "Polyfill" a une signification similaire. Un Polyfill est un petit morceau de code ou une fonction de navigateur manquante qui doit être ajoutée ou remplie.
Pour une meilleure compréhension, observer un petit extrait de code ES6 JavaScript ci-dessous :
// ES6 Code
var s = 'Tom and Jerry';
if (s.startsWith('Tom')) {
console.log('Hello Tom');
}
La méthode startsWith fait partie de la spécification ES6 publiée en 2015. Le code ci-dessus fonctionne parfaitement sur les nouveaux navigateurs, comme Chrome 41+. Remarque : La version 41 de Chrome ne prend en charge que partiellement les fonctionnalités ES6. Il fallait attendre jusqu'à la publication de Chrome version 51 (mai 2016) pour que l'ES6 soit entièrement pris en charge par Chrome.
| Browser | Version Supports startsWith | Version Fully Support ES6 | Date |
| Chrome | 41 | 51 | May 2016 |
| Edge | 12 | 14 | Aug 2016 |
| Firefox | 17 | 54 | Jun 2017 |
| Internet Explorer | No | No | |
| Safari | 9 | 10 | Sep 2016 |
| Opera | 28 | 38 | Jun 2016 |
Pour prendre en charge les anciens navigateurs, vous devez corriger les fonctions manquantes. Dans ce cas, il vous faut vérifier si le navigateur prend en charge la méthode startWith. Si ce n'est pas le cas, vous devez le simuler avec une fonctionnalité équivalente :
// ES5 Code
if (!String.prototype.startsWith) {
String.prototype.startsWith = function (searchString, position) {
position = position || 0;
return this.substr(position, searchString.length) === searchString;
};
}
var s = 'Tom and Jerry';
if (s.startsWith('Tom')) {
console.log('Hello Tom');
}
Un autre exemple de polyfill. La méthode statique Math.trunc(number) est utilisée pour "tronquer" (truncate) la partie décimale d'un nombre et renvoyer un entier. Par exemple Math.trunc(1.23) renvoie 1. Les anciens navigateurs ne prennent pas en charge la méthode, on doit donc simuler cette méthode pour l'ajouter.
if (!Math.trunc) { // if no such method
// implement it
Math.trunc = function (number) {
// Math.ceil and Math.floor exist even in ancient JavaScript engines
// they are covered later in the tutorial
return number < 0 ? Math.ceil(number) : Math.floor(number);
};
}
Au moment de la publication de cet article (2021), nous pouvons être sûrs que la plupart des utilisateurs sont passés à un navigateur prenant en charge JavaScript ES5+. Il faut donc créer des polyfill(s) pour les navigateurs "trop anciens" (ES4-) n'est plus vraiment nécessaire.
caniuse.com est un site Web qui vous permet de vérifier quels navigateurs prennent en charge une certaine fonctionnalité. Par exemple, vérifier la prise en charge du navigateur pour la méthode startsWith.
En règle générale, il existe deux manières d'utiliser Polyfill:
Polyfilling manually
Écrire et utiliser manuellement votre ou vos Polyfill comme dans les exemples ci-dessus.
Polyfill library
De nombreuses bibliothèques Polyfill sont créées par la communauté et sont librement partagées. Ils sont souvent utilisés en conjonction avec le(s) Transpiler(s).
Par exemple, les bibliothèques JavaScript Polyfill comme babel-polyfill, Es6-shim, polyfill-library,... peuvent être importées dans vos projets, comme NodeJS, React,...
Quelques exemples utilisant les librairies Polyfill, qui pourraient vous être intéressants :
*
