Heim > Artikel > Web-Frontend > Wie verwende ich Polyfill in JavaScript?

Wie verwende ich Polyfill in JavaScript?

王林nach vorne: 2023-08-26 09:05:021771Durchsuche

如何在 JavaScript 中使用 polyfill？

JavaScript-Entwickler fügen der JavaScript-Sprache ständig neue Funktionen hinzu, um die Leistung zu verbessern und bessere Funktionen hinzuzufügen. Manchmal unterstützen ältere Browserversionen neue Funktionen nicht.

Zum Beispiel wurde der Potenzierungsoperator in ES7 eingeführt, und nachgestellte Kommas in Objekten sind auch in ES7 gültig. Während der Entwicklung der Anwendung haben wir nun den Potenzierungsoperator in die Anwendung eingefügt. Es funktioniert auf neueren Browserversionen, aber wenn jemand eine sehr alte Version des Browsers verwendet, kann es zu Fehlern kommen, z. B. dass die Browser-Engine den Potenzierungsoperator nicht unterstützt.

Wir können also polyfill verwenden, um diesen Fehler zu vermeiden. Teilen wir das Wort „Polyfill“ in zwei Teile auf, um seine Bedeutung zu verstehen. Poly bedeutet viel und füllen bedeutet, die Lücken zu füllen. Das heißt, wenn ein Browser die Standardfunktionalität von JavaScript nicht unterstützt, sind verschiedene Techniken erforderlich, um die Lücken in der Browserfunktionalität zu schließen.

Es gibt zwei Möglichkeiten, das Problem zu lösen, dass der Browser die Funktion nicht unterstützt. Einer ist ein Polyfill und der andere ist ein Transpiler. Ein Übersetzer konvertiert den Code in eine niedrigere Version, damit der Browser ihn unterstützen kann. Beispielsweise können wir Code in einer ES7-Version von JavaScript schreiben und ihn dann mithilfe eines Transpilers in ES6 oder ES5 konvertieren, sodass er von älteren Browsern unterstützt wird.

Hier lernen wir verschiedene Beispiele für die Verwendung des Polyfill-Konzepts kennen.

Grammatik

Benutzer können JavaScript-Methoden mithilfe von Polyfill-Konzepten gemäß der folgenden Syntax manuell implementieren.

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

Wir haben dem String-Prototyp in der obigen Syntax Methoden hinzugefügt. method_name stellt den Methodennamen dar. Wir weisen der Methode eine Funktion mit mehreren Parametern zu.

Beispiel 1 (Includes()-Methode ohne Polyfill)

Im folgenden Beispiel haben wir die integrierte Methode contains() des String-Objekts verwendet. Wir haben den String definiert und mit der Methode Includes() überprüft, ob der String ein bestimmtes Wort oder einen bestimmten Teilstring enthält.

<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>

Beispiel 2 (Includes()-Methode mit Polyfill)

Im obigen Beispiel haben wir die integrierte Methode Includes() verwendet. In diesem Beispiel definieren wir eine Polyfüllung für die Methode Includes(). Wenn ein Browser die Methode Includes() nicht unterstützt, führt er die benutzerdefinierte Methode Includes() aus.

Hier fügen wir die Methode Includes() zum Prototyp des String-Objekts hinzu. Wenn die Suchzeichenfolge in der Funktion vom Typ „Regulärer Ausdruck“ ist, wird ein Fehler ausgegeben. Außerdem ist der Parameter „pos“ eine Option. Wenn der Benutzer ihn also nicht übergibt, wird er als Null behandelt. Verwenden Sie abschließend die Methode indexof(), um zu überprüfen, ob die Zeichenfolge das Wort enthält, und geben Sie basierend auf dem Ergebnis einen booleschen Wert zurück.

<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>

Beispiel 3 (Implementieren von Polyfill für die filter()-Methode)

Im folgenden Beispiel haben wir eine Polyfüllung für die filter()-Methode implementiert. Wir stellen zunächst sicher, dass das Referenzarray nicht leer ist und dass der Callback eine Funktion ist. Danach durchlaufen wir das Array und führen die Callback-Funktion für jeden Array-Wert aus. Wenn die Rückruffunktion „true“ zurückgibt, schieben wir sie in das Ausgabearray. Schließlich geben wir das Ausgabearray mit den gefilterten Werten zurück

<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>

In diesem Tutorial lernen wir, wie man Polyfills für die Methoden Includes() und Filter() implementiert. Benutzer können jedoch mithilfe von if-else-Anweisungen überprüfen, ob der Browser eine bestimmte Methode unterstützt. Wenn nicht, wird die benutzerdefinierte Methode ausgeführt, andernfalls wird die integrierte Methode ausgeführt.

Das obige ist der detaillierte Inhalt vonWie verwende ich Polyfill in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie kann ich einen Fehler auslösen, wenn ich die Eigenschaften eines Objekts verwende?Nächster Artikel：Wie kann ich einen Fehler auslösen, wenn ich die Eigenschaften eines Objekts verwende?

In Verbindung stehende Artikel

Mehr sehen