Quelle est la différence entre une cale et un polyfill?

Les deux semblent être utilisés dans les cercles de développement Web, voir par exemple les Polyfills HTML5 Cross Browser , qui disent:

Alors ici, nous collectons toutes les cales, les remplacements et les polyfills ...

Ou, il y a le projet es5-shim .

Dans mon projet actuel, nous en utilisons un certain nombre, et je veux les coller tous dans le même répertoire. Alors, comment dois-je appeler ce répertoire --- shims, ou polyfills?

• Un shim est un morceau de code qui effectue l'interception d'un appel API et fournit une couche d'abstraction. Il n'est pas nécessairement limité à une application web ou HTML5 / CSS3.

• Un polyfill est un type de cale qui modernise les navigateurs hérités avec des fonctionnalités HTML5 / CSS3 modernes utilisant généralement Javascript ou Flash.

Pour répondre à votre question spécifique, appelez votre répertoire shimssi vous souhaitez conserver le répertoire générique.

Shim

Si vous connaissez le modèle d'adaptateur, vous savez ce qu'est une cale. Shims intercepte les appels d'API et crée une couche abstraite entre l'appelant et la cible. En règle générale, des cales sont utilisées pour une compatibilité descendante. Par exemple, le package npm es5-shim vous permettra d'écrire la syntaxe ECMAScript 5 (ES5) sans vous soucier si le navigateur exécute ES5 ou non. Prenez l' exemple de Date.now . Il s'agit d'une nouvelle fonction dans ES5 où la syntaxe dans ES3 serait new Date (). GetTime () . Si vous utilisez le shim es5, vous pouvez écrire Date.now et si le navigateur que vous utilisez prend en charge ES5, il s'exécutera simplement. Cependant, si le navigateur exécute le moteur ES3, es5-shim interceptera l'appel à Date.nowet renvoyez simplement new Date (). getTime () à la place. Cette interception est appelée calage. Le code source pertinent de es5-shim ressemble à ceci:

if (!Date.now) {
    Date.now = function now() {
        return new Date().getTime();
    };
}

Polyfill

Le polyfilling n'est vraiment qu'une version spécialisée du calage. Polyfill consiste à implémenter des fonctionnalités manquantes dans une API, alors qu'un shim ne serait pas nécessairement autant à implémenter des fonctionnalités manquantes qu'à corriger des fonctionnalités. Je sais que cela semble trop vague, mais lorsque les shims sont utilisés comme un terme plus large, polyfill est utilisé pour décrire les shims qui offrent une compatibilité descendante pour les navigateurs plus anciens. Ainsi, alors que les cales sont utilisées pour couvrir les anciens péchés, les polyfills sont utilisés pour apporter des améliorations futures dans le temps. Par exemple, il n'y a pas de prise en charge de sessionStorage dans IE7, mais le polyfill dans le package sessionstorage npm ajoutera cette fonctionnalité dans IE7 (et versions antérieures) en utilisant des techniques telles que le stockage de données dans la propriété name de la fenêtre ou en utilisant des cookies.

D'après ce que je comprends:

Un polyfill est un code qui détecte si une certaine API «attendue» est manquante et l'implémente manuellement. Par exemple

if (!Function.prototype.bind) { Function.prototype.bind = ...; }

Un shim est un code qui intercepte les appels d'API existants et implémente un comportement différent. L'idée ici est de normaliser certaines API dans différents environnements. Ainsi, si deux navigateurs implémentent la même API différemment, vous pouvez intercepter les appels d'API dans l'un de ces navigateurs et aligner son comportement sur l'autre navigateur. Ou, si un navigateur a un bogue dans l'une de ses API, vous pouvez à nouveau intercepter les appels vers cette API, puis contourner le bogue.

Citant Axel Rauschmayer de son livre Speaking JavaScript :

• Un shim est une bibliothèque qui apporte une nouvelle API à un environnement plus ancien, en utilisant uniquement les moyens de cet environnement.
• Un polyfill est une cale pour une API de navigateur. Il vérifie généralement si un navigateur prend en charge une API. Si ce n'est pas le cas, le polyfill installe sa propre implémentation. Cela vous permet d'utiliser l'API dans les deux cas. Le terme polyfill vient d'un produit de rénovation domiciliaire; selon Remy Sharp :

  Polyfilla est un produit britannique appelé Spackling Paste aux États-Unis. Dans cet esprit: considérez les navigateurs comme un mur avec des fissures. Ces [polyfills] aident à lisser les fissures et nous donnent un joli mur lisse de navigateurs avec lesquels travailler.

Shim. Un shim est une bibliothèque qui apporte une nouvelle API à un environnement plus ancien, en utilisant uniquement les moyens de cet environnement.

Polyfill. En octobre 2010, Remy Sharp a blogué sur le terme «polyfill» [via Rick Waldron]:

Un polyfill est un morceau de code (ou plugin) qui fournit la technologie que vous, le développeur, attendez du navigateur qu'il fournisse nativement. Aplatir le paysage API si vous le souhaitez.

Un article fantastique écrit à ce sujet il y a quelques années qui explique bien cela:

Qu'est-ce qu'un Polyfill?

Dans l'article, les (2) sont simplement contrastés en tant que tels:

Shim: un morceau de code que vous pourriez ajouter (c'est-à-dire JavaScript) qui corrigerait certaines fonctionnalités, mais il aurait le plus souvent sa propre API .

Polyfill: quelque chose que vous pourriez ajouter (c'est-à-dire JavaScript) et cela fonctionnerait silencieusement pour imiter les API de navigateur existantes qui ne sont pas prises en charge autrement.