Comment utiliser polyfill en JavaScript ?-js tutoriel-php.cn

Comment utiliser polyfill en JavaScript ?

王林

Libérer： 2023-08-26 09:05:02

avant

1819 Les gens l'ont consulté

如何在 JavaScript 中使用 polyfill？

Les développeurs JavaScript ajoutent toujours de nouvelles fonctionnalités au langage JavaScript pour améliorer les performances et ajouter de meilleures fonctionnalités. Parfois, les anciennes versions du navigateur ne prennent pas en charge les nouvelles fonctionnalités.

Par exemple, l'opérateur d'exponentiation a été introduit dans ES7, et les virgules de fin dans les objets sont également valables dans ES7. Désormais, lors du développement de l'application, nous avons ajouté l'opérateur d'exponentiation dans l'application. Cela fonctionnera sur les versions plus récentes des navigateurs, mais si quelqu'un utilise une très ancienne version du navigateur, il peut obtenir des erreurs telles que le moteur du navigateur ne prenant pas en charge l'opérateur d'exponentiation.

Nous pouvons donc utiliser polyfill pour éviter cette erreur. Divisons le mot polyfill en deux parties pour comprendre sa signification. Poly signifie beaucoup et remplir signifie combler les lacunes. Cela signifie que si un navigateur ne prend pas en charge la fonctionnalité par défaut de JavaScript, diverses techniques sont nécessaires pour combler les lacunes des fonctionnalités du navigateur.

Il existe deux façons de résoudre le problème selon lequel le navigateur ne prend pas en charge la fonction. L’un est un polyfill et l’autre est un transpileur. Un traducteur convertit le code vers une version inférieure afin que le navigateur puisse le prendre en charge. Par exemple, nous pouvons écrire du code dans une version ES7 de JavaScript, puis utiliser un transpilateur pour le convertir en ES6 ou ES5 afin qu'il soit pris en charge par les anciens navigateurs.

Ici, nous apprendrons différents exemples d'utilisation du concept polyfill.

Grammaire

Les utilisateurs peuvent implémenter manuellement des méthodes JavaScript à l'aide des concepts polyfill selon la syntaxe suivante.

String.prototype.method_name = function (params) {
   
   // implement the code for the method
   
   // use this keyword to access the reference object
}

Copier après la connexion

Nous avons ajouté des méthodes au prototype de chaîne dans la syntaxe ci-dessus. nom_méthode représente le nom de la méthode. Nous attribuons une fonction avec plusieurs paramètres à la méthode.

Exemple 1 (méthode Includes() sans polyfill)

Dans l'exemple ci-dessous, nous avons utilisé la méthode intégrée contain() de l'objet String. Nous avons défini la chaîne et utilisé la méthode include() pour vérifier si la chaîne contient un mot ou une sous-chaîne spécifique.

<html>
<body>
   <h2>Using the <i>includes() method without polyfill </i> in JavaScript</h2>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      let str = "You are welcome on TutorialsPoint's website. Hello users! How are you?";
      let isWelcome = str.includes('welcome');
      content.innerHTML += "The original string: " + str + "<br>";
      content.innerHTML += "The string includes welcome word? " + isWelcome + "<br>";
      let isJavaScript = str.includes('javaScript');
      content.innerHTML += "The string includes JavaScript word? " + isJavaScript + "<br>";
   </script>
</body>
</html>

Copier après la connexion

Exemple 2 (méthode Includes() avec polyfill)

Dans l'exemple ci-dessus, nous avons utilisé la méthode intégrée include(). Dans cet exemple, nous définirons un polyfill pour la méthode include(). Si un navigateur ne prend pas en charge la méthode include(), il exécutera la méthode include() définie par l'utilisateur.

Ici, nous ajoutons la méthode include() au prototype de l'objet string. Dans la fonction, si la chaîne de recherche est de type expression régulière, nous générerons une erreur. De plus, le paramètre "pos" est une option, donc si l'utilisateur ne le transmet pas, il est traité comme nul. Enfin, utilisez la méthode indexof() pour vérifier si la chaîne contient le mot et renvoyez une valeur booléenne basée sur le résultat.

<html>
<body>
   <h2>Using the <i>includes() method with polyfill </i> in JavaScript</h2>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      String.prototype.includes = function (str, pos) {
         
         // first, check whether the first argument is a regular expression
         if (str instanceof RegExp) {
            throw Error("Search string can't be an instance of regular expression");
         }
         
         // second parameter is optional. So, if it isn't passed as an argument, consider it zero
         if (pos === undefined) {
            pos = 0;
         }
         content.innerHTML += "The user-defined includes method is invoked! <br>"
         
         // check if the index of the string is greater than -1. If yes, string includes the search string.
         return this.indexOf(str, pos) !== -1;
      };
      let str = "This is a testing string. Use this string to test includes method.";
      content.innerHTML += `The original string is "` + str +`" <br>`;
      let isTesting = str.includes('testing');
      content.innerHTML += "The string includes testing word? " + isTesting + "<br>";
      let isYour = str.includes('your');
      content.innerHTML += "The string includes your word? " + isYour + "<br>";
   </script>
</body>
</html>

Copier après la connexion

Exemple 3 (Implémentation de la méthode polyfill pour filter())

Nous avons implémenté un polyfill pour la méthode filter() dans l'exemple ci-dessous. On s'assure d'abord que le tableau de référence n'est pas vide et que le rappel est une fonction. Après cela, nous parcourons le tableau et exécutons la fonction de rappel pour chaque valeur du tableau. Si la fonction de rappel renvoie vrai, nous la poussons vers le tableau de sortie. Enfin, nous renvoyons le tableau de sortie contenant les valeurs filtrées

<html>
<body>
   <h2>Using the <i> filter() method with polyfill </i> in JavaScript</h2>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      Array.prototype.filter = function (callback) {
         
         // check if the reference array is not null
         if (this === null) throw new Error;
         
         // check that callback is a type of function
         if (typeof callback !== "function") throw new Error;
         var output = [];
         
         // iterate through array
         for (var k = 0; k < this.length; k++) {
            
            // get value from index k
            var val = this[k];
            
            // call the callback function and, based on a returned boolean value, push the array value in the output array
            if (callback.call(this, val, k)) {
               output.push(val);
            }
         }
         return output;
      };
      function getDivisibleBy10(val, k) {
         
         // return true if val is divisible by 10.
         if (val % 10 == 0) {
            return true;
         }
         return false;
      }
      let array = [10, 20, 40, 65, 76, 87, 90, 80, 76, 54, 32, 23, 65, 60];
      let filtered = array.filter(getDivisibleBy10); 
      content.innerHTML += "The original array is " + JSON.stringify(array) + "<br>";
      content.innerHTML += "The filtered array is " + JSON.stringify(filtered) + "<br>";
   </script>
</body>
</html>

Copier après la connexion

Ce tutoriel nous apprend comment implémenter des polyfills pour les méthodes include() et filter(). Cependant, les utilisateurs peuvent utiliser des instructions if-else pour vérifier si le navigateur prend en charge une méthode spécifique. Sinon, la méthode définie par l'utilisateur est exécutée, sinon la méthode intégrée est exécutée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!