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

Jadual Kandungan

Tatabahasa

Contoh 1 (Termasuk() kaedah tanpa polyfill)

Contoh 2 (Termasuk() kaedah dengan polyfill)

Contoh 3 (Melaksanakan kaedah polyfill untuk penapis())

Rumah

hujung hadapan web

tutorial js

Bagaimana untuk menggunakan polyfill dalam JavaScript?

王林

Aug 26, 2023 am 09:05 AM

如何在 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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Repo: Cara menghidupkan semula rakan sepasukan

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

4 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7359

Tutorial Java

1628

Tutorial CakePHP

1353

Tutorial Laravel

1265

Tutorial PHP

1214

Tunjukkan Lagi

Related knowledge

Ganti aksara rentetan dalam javascript Mar 11, 2025 am 12:07 AM

Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi

Tutorial Persediaan API Carian Google Custom Mar 04, 2025 am 01:06 AM

Tutorial ini menunjukkan kepada anda bagaimana untuk mengintegrasikan API carian Google tersuai ke dalam blog atau laman web anda, menawarkan pengalaman carian yang lebih halus daripada fungsi carian tema WordPress standard. Ia menghairankan mudah! Anda akan dapat menyekat carian ke y

8 plugin susun atur halaman jquery yang menakjubkan Mar 06, 2025 am 12:48 AM

Leverage JQuery untuk Layouts Laman Web yang mudah: 8 Plugin Essential JQuery memudahkan susun atur laman web dengan ketara. Artikel ini menyoroti lapan plugin jQuery yang kuat yang menyelaraskan proses, terutamanya berguna untuk penciptaan laman web manual

Bina Aplikasi Web Ajax anda sendiri Mar 09, 2025 am 12:11 AM

Jadi di sini anda, bersedia untuk mempelajari semua perkara ini yang dipanggil Ajax. Tetapi, apa sebenarnya? Istilah Ajax merujuk kepada kumpulan teknologi longgar yang digunakan untuk membuat kandungan web yang dinamik dan interaktif. Istilah Ajax, yang asalnya dicipta oleh Jesse J

Apa itu ' ini ' Dalam JavaScript? Mar 04, 2025 am 01:15 AM

Mata teras Ini dalam JavaScript biasanya merujuk kepada objek yang "memiliki" kaedah, tetapi ia bergantung kepada bagaimana fungsi dipanggil. Apabila tidak ada objek semasa, ini merujuk kepada objek global. Dalam penyemak imbas web, ia diwakili oleh tetingkap. Apabila memanggil fungsi, ini mengekalkan objek global; tetapi apabila memanggil pembina objek atau mana -mana kaedahnya, ini merujuk kepada contoh objek. Anda boleh mengubah konteks ini menggunakan kaedah seperti panggilan (), memohon (), dan mengikat (). Kaedah ini memanggil fungsi menggunakan nilai dan parameter yang diberikan. JavaScript adalah bahasa pengaturcaraan yang sangat baik. Beberapa tahun yang lalu, ayat ini

Tingkatkan pengetahuan jQuery anda dengan penonton sumber Mar 05, 2025 am 12:54 AM

JQuery adalah rangka kerja JavaScript yang hebat. Walau bagaimanapun, seperti mana -mana perpustakaan, kadang -kadang perlu untuk mendapatkan di bawah tudung untuk mengetahui apa yang sedang berlaku. Mungkin kerana anda mengesan bug atau hanya ingin tahu tentang bagaimana jQuery mencapai UI tertentu

10 helaian cheat mudah alih untuk pembangunan mudah alih Mar 05, 2025 am 12:43 AM

Siaran ini menyusun helaian cheat berguna, panduan rujukan, resipi cepat, dan coretan kod untuk perkembangan aplikasi Android, BlackBerry, dan iPhone. Tiada pemaju harus tanpa mereka! Panduan Rujukan Gesture Touch (PDF) Sumber yang berharga untuk desig

Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri? Mar 18, 2025 pm 03:12 PM

Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.

See all articles