Apa arti dari polyfill dalam HTML5?

387

Apa arti dari polyfill dalam HTML5? Saya melihat kata ini di banyak situs tentang HTML5, misalnya HTML5-Cross-Browser-Polyfills.

Jadi di sini kami mengumpulkan semua shims, fallback, dan polyfill untuk menanamkan fungsionalitas HTML5 di browser yang tidak mendukung mereka secara bawaan.

Saya sebenarnya tidak mengerti apa arti polyfill.

Apakah ini teknik HTML5 baru atau perpustakaan JavaScript? Saya tidak pernah mendengar kata ini sebelum HTML5.

Dan apa perbedaan antara shims, fallback, dan polyfill?

javascript html fallback polyfills shim Jitendra Vyas
sumber
1
Anda dapat memeriksa pemahaman yang lebih baik blogs.msdn.com/b/jennifer/archive/2011/08/04/...
@ user3400622 Terima kasih atas tautannya, penjelasan di tautannya sangat jelas.
Andrew Lam

Jawaban:

377

Polyfill adalah fallback browser, dibuat dalam JavaScript, yang memungkinkan fungsionalitas yang Anda harapkan dapat bekerja di browser modern untuk bekerja di browser lama, misalnya, untuk mendukung kanvas (fitur HTML5) di browser lama.

Ini semacam teknik HTML5, karena digunakan bersama dengan HTML5, tetapi ini bukan bagian dari HTML5, dan Anda dapat memiliki polyfill tanpa HTML5 (misalnya, untuk mendukung teknik CSS3 yang Anda inginkan).

Inilah pos yang bagus:

http://remysharp.com/2010/10/08/what-is-a-polyfill/

Berikut daftar lengkap Polyfills dan Shims:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Calvin Froedge
sumber
6
Jadi itu berarti ie7.js juga merupakan polyfill
Jitendra Vyas
1
Ya: "Banyak perbaikan termasuk transparansi PNG, gaya / pemilih CSS, render perbaikan bug, dll." Ini menambahkan fungsi ini melalui javascript yang belum didukung browser.
Calvin Froedge
1
Saya pikir kata Polyfills muncul setelah HTML5. Apakah Shim berbeda dari Polyfills?
Jitendra Vyas
16
Shim lebih digeneralisasi. Polyfill adalah jenis shim. Berikut adalah pertanyaan yang menjelaskannya dengan baik: stackoverflow.com/questions/6599815/…
Calvin Froedge
6
remysharp.com/2010/10/08/what-is-a-polyfill tautan ini lebih dari sekadar "pos bagus" itu sebenarnya adalah definisi lengkap & asal kata oleh orang yang menciptakan kata. Kutipan: "produk Polyfilla (spackling di AS) adalah pasta yang dapat dimasukkan ke dinding untuk menutupi celah dan lubang." Posting juga mencakup konsep bahwa shim ada sebelum dan berbeda dari polyfill. Itu harus dibaca, IMO.
Aaron-coding
64

Pertama mari kita perjelas apa itu bukan polyfil: Sebuah polyfill bukan bagian dari Standar HTML5. Polyfill juga tidak terbatas pada Javascript, meskipun Anda sering melihat polyfill dirujuk dalam konteks tersebut.

Istilah polyfill sendiri merujuk pada beberapa kode yang "memungkinkan Anda untuk memiliki beberapa fungsi spesifik yang Anda harapkan di browser saat ini atau" modern "juga berfungsi di browser lain yang tidak memiliki dukungan untuk fungsionalitas yang tertanam di dalamnya."

Sumber dan contoh polyfill di sini:

http://www.programmerinterview.com/index.php/html5/html5-polyfill/

Jarvis
sumber
31

Sebuah polyfill adalah bagian dari kode (atau plugin) yang menyediakan teknologi yang Anda, pengembang, harapkan dari browser untuk berikan secara asli.

Ranjeet Mane
sumber
2
Diterangkan dengan baik.
Eugen Sunic
16

Polyfill adalah shim yang menggantikan panggilan asli dengan panggilan ke shim.

Misalnya, Anda ingin menggunakan objek navigator.mediaDevices, tetapi tidak semua browser mendukung ini. Anda bisa membayangkan perpustakaan yang menyediakan shim yang dapat Anda gunakan seperti ini:

<script src="js/MediaShim.js"></script>
<script>
    MediaShim.mediaDevices.getUserMedia(...);
</script>

Dalam hal ini, Anda secara eksplisit memanggil shim daripada menggunakan objek atau metode asli. Polyfill, di sisi lain, menggantikan objek dan metode pada objek asli.

Sebagai contoh:

<script src="js/adapter.js"></script>
<script>
    navigator.mediaDevices.getUserMedia(...);
</script>

Dalam kode Anda, sepertinya Anda menggunakan objek navigator.mediaDevices standar. Tapi sungguh, polyfill (adaptor.js dalam contoh) telah mengganti objek ini dengan miliknya sendiri.

Yang diganti dengan itu adalah shim. Ini akan mendeteksi apakah fitur tersebut didukung secara native dan menggunakannya jika ya, atau akan mengatasinya menggunakan API lain jika tidak.

Jadi, polyfill adalah semacam shim "transparan". Dan inilah yang dimaksud Remy Sharp (yang menciptakan istilah) ketika mengatakan " jika Anda menghapus skrip polyfill, kode Anda akan terus berfungsi, tanpa perubahan apa pun yang diperlukan terlepas dari polyfill yang dihapus ".

Richard Shepherd
sumber
9
apa itu shim?
Oliver Watkins
3
@ Lebih Tua Watkins Jika Anda terbiasa dengan pola adaptor, maka Anda tahu apa itu shim. Shims memotong panggilan API dan membuat lapisan abstrak antara pemanggil dan target. Biasanya shims digunakan untuk kompatibilitas ke belakang
Anurag Ratna
@AnuragRatna Saya tidak akan menggunakan 'intersep' untuk menghindari kebingungan .. Intercept biasanya merujuk pada kode yang (secara transparan) memotong yaitu tanpa diketahui oleh penelepon. Shims menyediakan panggilan API untuk kompatibilitas ke belakang
Qetesh