Bagaimana untuk menggunakan polyfill dalam JavaScript?-tutorial js-php.cn

Bagaimana untuk menggunakan polyfill dalam JavaScript?

王林

Lepaskan： 2023-08-26 09:05:02

ke hadapan

1819 orang telah melayarinya

如何在 JavaScript 中使用 polyfill？

Pembangun JavaScript sentiasa menambah ciri baharu pada bahasa JavaScript untuk meningkatkan prestasi dan menambah kefungsian yang lebih baik. Kadangkala, versi pelayar lama tidak menyokong ciri baharu.

Sebagai contoh, pengendali eksponen telah diperkenalkan dalam ES7, dan koma mengekor dalam objek juga sah dalam ES7. Kini, semasa membangunkan aplikasi, kami menambah pengendali eksponen dalam aplikasi. Ia akan berfungsi pada versi penyemak imbas yang lebih baharu, tetapi jika seseorang menggunakan versi penyemak imbas yang sangat lama, mereka mungkin mendapat ralat seperti enjin penyemak imbas tidak menyokong pengendali eksponen.

Jadi, kita boleh menggunakan polyfill untuk mengelakkan ralat ini. Mari kita pecahkan perkataan polyfill kepada dua bahagian untuk memahami maksudnya. Poli bermakna banyak dan mengisi bermakna mengisi ruang. Ini bermakna jika penyemak imbas tidak menyokong kefungsian lalai JavaScript, pelbagai teknik diperlukan untuk mengisi jurang dalam kefungsian penyemak imbas.

Terdapat dua cara untuk menyelesaikan masalah iaitu pelayar tidak menyokong fungsi tersebut. Satu ialah polyfill dan satu lagi ialah transpiler. Penterjemah menukar kod kepada versi yang lebih rendah supaya penyemak imbas boleh menyokongnya. Sebagai contoh, kita boleh menulis kod dalam versi ES7 JavaScript dan kemudian menggunakan transpiler untuk menukarnya kepada ES6 atau ES5 supaya ia disokong oleh pelayar lama.

Di sini kita akan mempelajari contoh yang berbeza menggunakan konsep polyfill.

Tatabahasa

Pengguna boleh melaksanakan kaedah JavaScript secara manual menggunakan konsep polyfill mengikut sintaks berikut.

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

Salin selepas log masuk

Kami telah menambah kaedah pada prototaip rentetan dalam sintaks di atas. method_name mewakili nama kaedah. Kami menetapkan fungsi dengan berbilang parameter kepada kaedah.

Contoh 1 (Termasuk() kaedah tanpa polyfill)

Dalam contoh di bawah, kami telah menggunakan kaedah mengandungi() terbina dalam objek String. Kami telah menentukan rentetan dan menggunakan kaedah includes() untuk menyemak sama ada rentetan itu mengandungi perkataan atau subrentetan tertentu.

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

Salin selepas log masuk

Contoh 2 (Termasuk() kaedah dengan polyfill)

Dalam contoh di atas, kami menggunakan kaedah termasuk() terbina dalam. Dalam contoh ini, kami akan mentakrifkan polyfill untuk kaedah includes(). Jika mana-mana penyemak imbas tidak menyokong kaedah includes(), ia akan melaksanakan kaedah includes() yang ditentukan pengguna.

Di sini, kami menambah kaedah includes() pada prototaip objek rentetan. Dalam fungsi, jika rentetan carian adalah jenis regex, kami akan membuang ralat. Selain itu, parameter "pos" ialah pilihan, jadi jika pengguna tidak melepasinya, ia dianggap sebagai tiada. Akhir sekali, gunakan kaedah indexof() untuk menyemak sama ada rentetan mengandungi perkataan dan mengembalikan nilai Boolean berdasarkan hasilnya.

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

Salin selepas log masuk

Contoh 3 (Melaksanakan kaedah polyfill untuk penapis())

Kami telah melaksanakan polyfill untuk kaedah penapis() dalam contoh di bawah. Mula-mula kami pastikan tatasusunan rujukan tidak kosong dan panggilan balik ialah fungsi. Selepas itu, kami mengulangi tatasusunan dan melaksanakan fungsi panggil balik untuk setiap nilai tatasusunan. Jika fungsi panggil balik kembali benar, kami menolaknya ke tatasusunan output. Akhir sekali, kami mengembalikan tatasusunan output yang mengandungi nilai yang ditapis

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

Salin selepas log masuk

Tutorial ini mengajar kita cara melaksanakan polyfill untuk kaedah includes() dan filter(). Walau bagaimanapun, pengguna boleh menggunakan pernyataan if-else untuk menyemak sama ada penyemak imbas menyokong kaedah tertentu. Jika tidak, kaedah yang ditentukan pengguna dilaksanakan, jika tidak kaedah terbina dalam dilaksanakan.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan polyfill dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!