Panduan pemula ' s ke polyfills silang html5

mata utama

Polyfill adalah alat yang membolehkan pemaju menggunakan ciri -ciri ini dalam pelayar yang lebih tua yang tidak menyokong ciri -ciri web moden, memastikan pengguna pelayar ini masih boleh mengakses dan menggunakan laman web tanpa kehilangan sebarang ciri atau pengalaman.
Polyfill.io adalah projek sumber terbuka yang menyediakan Perpustakaan Polyfill atas permintaan, yang membolehkan pemaju menggunakan piawaian terkini sambil mengekalkan keserasian dengan pelayar yang lebih tua. Ia membaca header HTTP ejen pengguna dan hanya menyediakan polyfill yang diperlukan, dengan itu mengurangkan kembung penyemak imbas moden.
Walaupun Polyfill membantu membolehkan ciri -ciri moden dalam pelayar yang lebih tua, ia juga mempunyai beberapa kelemahan yang berpotensi, seperti meningkatkan berat laman web, yang mungkin melambatkan masa pemuatan; Kepada fungsi Polyfill yang dimaksudkan, mengakibatkan ketidakkonsistenan atau kesilapan.

laman web sedang berkembang pesat. Rangka kerja, alat, dan juga bahasa baru muncul satu demi satu. Walau bagaimanapun, ramai pemaju merasakan bahawa mereka perlu bergerak ke hadapan pada kelajuan pengguna yang paling lambat. Pelayar moden adalah "malar hijau" - mereka secara automatik dikemas kini di latar belakang, tidak memerlukan permintaan kebenaran, dan telah membuat kemajuan yang besar dalam meningkatkan API baru.

Walau bagaimanapun, pelayar moden tidak melaksanakan semua fungsi pada masa yang sama. Adalah mengecewakan untuk membaca artikel tentang teknologi canggih dalam pembangunan moden dan mendapati bahawa teknologi ini tidak akan tersedia untuk tahun yang akan datang. Mungkin anda telah menyemak data analisis laman web dan mendapati bahawa masih ada pengguna menggunakan IE9? Sekiranya anda menulis kod seperti yang anda lakukan pada tahun 2011, atau mewakilkan semuanya ke jQuery atau kerangka kerja? Terdapat pilihan lain. Iaitu

polyfill .

Apa itu Polyfill? Mengapa kita memerlukannya?

Remy Sharp mencipta istilah ini dalam buku dan catatan blog 2009. Jika ciri ini wujud dalam penyemak imbas, Polyfill membolehkan penyemak imbas melaksanakan operasinya; Mereka mengisi kelemahan pelayar yang lebih tua, ciri -ciri yang hilang yang ingin kami gunakan hari ini. Ia menggunakan kod bukan asli untuk menyalin API asli.

Apakah fungsi yang hilang yang kita bicarakan?

Pada tahun 2009, ECMAScript Versi 5 telah dikeluarkan. Ini adalah kemajuan besar dan radikal untuk bahasa. ECMASCRIPT 2015 juga membawa kemas kini utama yang sama. Pada masa akan datang, peningkatan bahasa ini akan beransur -ansur dan akan berlaku setiap tahun. Ini adalah masa yang menarik, dengan ciri -ciri baru yang sentiasa ditambah kepada bahasa. Sebagai tambahan kepada bahasa teras itu sendiri, terdapat pelbagai API untuk DOM dan platform web. Untuk menyerlahkan perbezaan antara pelayar moden dan lebih tua, berikut adalah perbandingan versi Chrome terkini kepada Internet Explorer 9 (sesetengah syarikat masih menyesal dengan sokongan mandatori). Terdapat juga jadual yang menunjukkan sokongan untuk ECMAScript 6. Jadual kedua mengesan kembali ke IE 11, dan seperti yang anda lihat, ia menyokong hampir tiada ciri ES6. Ini banyak fungsi yang hilang ...

Polyfill and Translation

Oleh itu, jelas dari jadual di atas yang kita perlukan untuk menterjemahkan kod kami. Ia mengambil sintaks baru yang berkilat dan output ECMAScript lama 5. Jika anda ingin menggunakan fungsi anak panah, async/menunggu, berehat dan menyebarkan parameter, kelas, dan lain -lain. Dalam kod anda, anda perlu menggunakan alat seperti Babel untuk menterjemahkan kod ES6 anda ke ES5. Walau bagaimanapun, anda tidak boleh polyfill sintaks JavaScript. Walaupun Babel menukar fungsi anak panah anda ke dalam fungsi biasa, Polyfill menambah kaedah ke skop global dan prototaip asli. Babel menyediakan polyfill ES6 sendiri, yang di laman web Babel mengatakan ia menyediakan "objek terbina dalam baru seperti janji atau lemah, kaedah statik seperti array.from atau object.assign, kaedah contoh seperti array.prototype.cludes, dan Oleh itu, fungsi penjana. "Babel Polyfill boleh memberikan kita semua ciri ES6 yang kita mahu. Tetapi ia sangat merindui. Mungkin anda menggunakan API senarai kelas untuk menambah dan membuang kelas, atau menggunakan MatchMedia untuk pertanyaan media, tetapi anda masih perlu menyokong IE9. Nasib baik, terdapat perkhidmatan yang menyediakan semua penutup Babel Polyfill, dan banyak lagi.

memudahkan hidup anda dengan polyfill.io

Polyfill.io adalah projek sumber terbuka yang dibangunkan oleh Financial Times. Ia kini menerima sehingga 204 juta permintaan setiap hari dan memanggil dirinya sebagai "perpustakaan spesifikasi Polyfill." Sistem polyfill atas permintaan ini membolehkan anda melayari

boleh saya gunakan , mengangkat bahu, menggunakan piawaian terkini, dan masih serasi dengan pelayar yang lebih tua.

Sebaik -baiknya, kita hanya perlu fungsi polyfill yang sebenarnya kita gunakan dan hanya menghantar polyfills yang benar -benar memerlukan pelayar tertentu. Polyfill.io boleh memenuhi kedua -dua keperluan. Perkhidmatan ini membaca header HTTP ejen pengguna supaya ia hanya berfungsi dengan kandungan yang diperlukan, dan bukannya menyediakan fail kembung kepada pelayar moden. Pelayar baru akan menerima fail hampir kosong, dan versi lama IE akan menerima banyak kod. Anda boleh mengurangkan berat kod yang dihantar ke mesin lama dengan menentukan senarai ciri yang anda gunakan dalam rentetan pertanyaan. Jika ditinggalkan, satu set nilai lalai akan digunakan. Menggunakan perkhidmatan ini memerlukan permintaan HTTP yang menghalang tambahan, tetapi pada pendapat saya kemudahan penggunaannya adalah berbaloi. Jurutera Google Philip Walton mempunyai perspektif sendiri mengenai polyfill dan prestasi, yang patut dibaca jika anda bimbang tentang permintaan tambahan.

apa yang tidak diliputi?

polyfill.io sangat komprehensif, dan ia termasuk beberapa API pelayar canggih seperti mengambil dan menjanjikan. Walau bagaimanapun, terdapat banyak polyfills yang membolehkan anda mencuba dan menggunakan teknologi baru. Mungkin perkara yang paling menarik ialah Komponen Web, kemajuan pembangunan front-end yang berpotensi revolusioner yang menawarkan enkapsulasi gaya dan ciri-ciri mudah digunakan. Sokongan silang penyemak imbas akhirnya akan datang. Google menolak projek polimer mereka dengan keras, yang pada dasarnya merupakan kerangka JavaScript yang dibina di atas polyfill yang besar. Walau bagaimanapun, komponen web tidak sepadan dengan rangka kerja ini, kerana komponen web itu sendiri mempunyai potensi yang besar. Anda boleh menggunakan komponen tanpa polimer, tetapi skop penuh API belum disalin lagi. API Animasi Web menyediakan cara bebas perpustakaan yang cekap untuk membina animasi menggunakan JavaScript. Sokongan penyemak imbas tidak begitu baik lagi, tetapi Shim cukup dipercayai bahawa saya dengan yakin menggunakan teknologi ini untuk animasi di semua tapak pengeluaran yang saya telah terlibat. Ia menawarkan dua pilihan - satu untuk mengisi ciri -ciri yang ada sekarang dalam penyemak imbas tertentu. Satu lagi ciri yang belum dimuktamadkan, yang telah membawa saya ke topik terakhir saya ...

"Prolyfills": Menguji API muncul

dan prolyfills -a shim spekulatif untuk API yang mungkin muncul. Ciri-ciri yang belum dirilis oleh Polyfill menjadi semakin biasa sebagai bukti konsep dan menarik untuk mencuba teknologi canggih untuk pembangunan front-end. Mungkin anda ingin menguji cadangan yang diilhamkan oleh perpustakaan RXJS yang popular? Terdapat prolyfill untuk ini. Mencuba teknologi baru adalah salah satu bahagian yang paling menarik sebagai pemaju.

Kesimpulan

itu sahaja. Kami telah belajar apa polyfills, mengapa mereka perlu, bagaimana untuk mengekstrak mana -mana polyfills yang anda perlukan dari polyfill.io, dan bagaimana polyfill belum mengeluarkan ciri -ciri. Tetapi bagaimana dengan anda? Adakah anda hanya menggunakan ciri bahasa yang tersedia dalam semua penyemak imbas yang anda sokong? Atau adakah anda menulis kod moden dan kemudian menggunakan polyfill untuk menjadikannya berfungsi dalam pelayar yang lebih tua? Apakah penyemak imbas tertua yang anda perlukan untuk menyokong? Tolong beritahu saya dalam komen di bawah.

Artikel ini telah dikaji semula oleh Graham Cox. Terima kasih kepada semua pengulas rakan sebaya untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya!

Soalan Lazim Mengenai Polyfill Cross-Browser HTML5

Apakah tujuan menggunakan polyfill silang pelayar HTML5?

Polyfill silang penyemak imbas HTML5 digunakan untuk membolehkan ciri-ciri web moden dalam pelayar yang lebih tua yang tidak menyokong mereka sendiri. Mereka bertindak sebagai fungsi sandaran, menyediakan fungsi yang sama seperti pelayar moden. Ini memastikan pengguna pelayar yang lebih tua masih boleh mengakses dan menggunakan laman web atau aplikasi web tanpa kehilangan sebarang fungsi atau pengalaman.

Bagaimana untuk melaksanakan polyfill dalam projek web saya?

Melaksanakan polyfill dalam projek web terdiri daripada beberapa langkah. Pertama, anda perlu menentukan fungsi yang anda mahu polyfill. Seterusnya, anda perlu mencari polyfill yang sesuai untuk menyediakan ciri tersebut. Ini boleh dilakukan dengan mencari dalam talian untuk perpustakaan atau repositori polyfill. Sebaik sahaja anda mencari polyfill yang sesuai, anda boleh memasukkannya ke dalam projek anda dengan menambahkannya ke fail HTML menggunakan tag skrip.

Apakah masalah atau kelemahan yang berpotensi menggunakan polyfill?

Walaupun polyfills sangat berguna, mereka mempunyai beberapa kelemahan yang berpotensi. Salah satu masalah utama ialah prestasi. Polyfill menambah berat tambahan ke halaman, yang boleh melambatkan masa pemuatan dan memberi kesan negatif kepada pengalaman pengguna. Juga, tidak semua polyfills adalah sama. Sesetengah mungkin tidak sepenuhnya atau tepat menyalin apa yang mereka direka untuk menjadi polyfill, yang boleh menyebabkan ketidakkonsistenan atau kesilapan.

Bagaimana memilih polyfill yang sesuai untuk keperluan saya?

Pilih polyfill yang betul bergantung kepada beberapa faktor. Pertama, anda perlu mempertimbangkan apa yang anda cuba polyfill dan mencari polyfill yang tepat mereplikasi fungsinya. Anda juga harus mempertimbangkan penyemak imbas yang ingin anda targetkan dan pastikan Polyfill menyokong mereka. Akhirnya, anda harus mempertimbangkan saiz dan prestasi polyfills kerana ini boleh menjejaskan masa beban dan prestasi keseluruhan laman web anda.

Bolehkah saya membuat polyfill saya sendiri?

Ya, anda boleh membuat polyfill anda sendiri. Ini melibatkan menulis skrip yang memeriksa sama ada penyemak imbas menyokong ciri tertentu dan menyediakannya jika penyemak imbas tidak. Walau bagaimanapun, mewujudkan polyfill anda sendiri boleh menjadi kompleks dan memakan masa, dan ia sering lebih mudah dan lebih cekap untuk menggunakan polyfill sedia ada.

Apakah perpustakaan atau sumber yang popular untuk mencari polyfills?

Terdapat beberapa perpustakaan dan sumber yang popular untuk mencari polyfills. Ini termasuk Polyfill.io, yang menyediakan perkhidmatan yang secara automatik mengembalikan polyfills yang diperlukan oleh pelayar;

Bagaimana untuk menguji jika polyfill berfungsi dengan betul?

Ujian polyfill termasuk memeriksa sama ada ciri -ciri yang direka untuk menyediakan kerja dengan betul dalam penyemak imbas yang anda ingin sasarkan. Ini boleh dilakukan dengan menggunakan alat ujian penyemak imbas atau secara manual menguji ciri dalam pelayar yang berbeza. Jika ciri berfungsi seperti yang dijangkakan, Polyfill berfungsi dengan baik.

Bolehkah polyfill digunakan dengan kerangka JavaScript seperti React atau Sudut?

Ya, polyfill boleh digunakan dengan kerangka JavaScript seperti React atau Sudut. Malah, rangka kerja ini sering mengesyorkan dan juga memerlukan polyfills tertentu untuk keserasian dan prestasi yang optimum. Proses melaksanakan polyfill menggunakan rangka kerja ini adalah serupa dengan melaksanakan polyfill dalam projek web biasa.

Adakah polyfill penyelesaian jangka panjang untuk masalah keserasian penyemak imbas?

Polyfill lebih seperti penyelesaian jangka pendek kepada isu keserasian penyemak imbas. Mereka digunakan untuk mengisi jurang sokongan penyemak imbas untuk ciri -ciri tertentu sehingga penyemak imbas menangkap dan menyokong mereka secara asli. Apabila penyemak imbas terus berkembang dan dikemas kini, permintaan untuk polyfills tertentu akan berkurangan.

Apakah perbezaan antara polyfill dan shim?

Polyfill dan Shim kedua-duanya digunakan untuk menyediakan ciri-ciri cadangan untuk ciri-ciri yang tidak disokong oleh penyemak imbas. Walau bagaimanapun, Shim biasanya menyediakan fungsi sandaran untuk API yang hilang dengan menggunakan API yang berbeza, sementara Polyfill menyediakan pelaksanaan baru yang boleh digunakan oleh penyemak imbas seolah -olah ia adalah asli.

Atas ialah kandungan terperinci Panduan pemula ' s ke polyfills silang html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!