ความหมายของ polyfills ใน HTML5 คืออะไร?

ความหมายของ polyfills ใน HTML5 คืออะไร? ฉันเห็นคำนี้ในเว็บไซต์หลายแห่งเกี่ยวกับ HTML5 เช่นHTML5-Cross-Browser-Polyfills

ดังนั้นที่นี่เรากำลังรวบรวม shims, fallbacks และ polyfills ทั้งหมดเพื่อปลูกฝังการทำงานของ HTML5 ในเบราว์เซอร์ที่ไม่สนับสนุนพวกมัน

ที่จริงฉันไม่เข้าใจความหมายของ polyfills คืออะไร

มันเป็นเทคนิค HTML5 ใหม่หรือไลบรารี JavaScript หรือไม่ ฉันไม่เคยได้ยินคำนี้มาก่อน HTML5

และความแตกต่างระหว่าง shims, fallbacks และ polyfills คืออะไร?

โพลีฟิลเป็นทางเลือกเบราว์เซอร์ที่สร้างขึ้นใน JavaScript ซึ่งช่วยให้การทำงานที่คุณคาดหวังว่าจะทำงานในเบราว์เซอร์ที่ทันสมัยเพื่อทำงานในเบราว์เซอร์รุ่นเก่าเช่นเพื่อสนับสนุน Canvas (ฟีเจอร์ HTML5) ในเบราว์เซอร์รุ่นเก่า

เป็นการเรียงลำดับของเทคนิค HTML5 เนื่องจากใช้ร่วมกับ HTML5 แต่ไม่ใช่ส่วนหนึ่งของ HTML5 และคุณสามารถมี polyfills โดยไม่มี HTML5 (ตัวอย่างเช่นเพื่อสนับสนุนเทคนิค CSS3 ที่คุณต้องการ)

นี่คือโพสต์ที่ดี:

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

นี่คือรายการที่ครอบคลุมของ Polyfills และ Shims:

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

ก่อนอื่นมาอธิบายให้ชัดเจนว่า polyfil ไม่ได้เป็นอย่างไร: polyfill ไม่ได้เป็นส่วนหนึ่งของมาตรฐาน HTML5 Nor เป็น polyfill จำกัด จาวาสคริปต์แม้ว่าคุณมักจะเห็น polyfills ถูกอ้างถึงในบริบทเหล่านั้น

คำว่า polyfill นั้นอ้างถึงรหัสบางส่วนที่ "อนุญาตให้คุณมีฟังก์ชั่นเฉพาะบางอย่างที่คุณคาดหวังในเบราว์เซอร์ปัจจุบันหรือ" ทันสมัย ​​"เพื่อทำงานในเบราว์เซอร์อื่น ๆ ที่ไม่ได้รับการสนับสนุนสำหรับการทำงานนั้น ๆ

แหล่งที่มาและตัวอย่างของ polyfill ที่นี่:

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

โพลีฟิลเป็นส่วนหนึ่งของรหัส (หรือปลั๊กอิน) ที่ให้บริการเทคโนโลยีที่คุณผู้พัฒนาคาดหวังว่าเบราว์เซอร์จะให้บริการแบบเนทีฟ

polyfill คือ shim ซึ่งแทนที่การโทรเดิมด้วยการเรียกไปที่ shim

ตัวอย่างเช่นสมมติว่าคุณต้องการใช้วัตถุ navigator.mediaDevices แต่ไม่ใช่ทุกเบราว์เซอร์ที่รองรับสิ่งนี้ คุณนึกภาพห้องสมุดที่ให้ชิมซึ่งคุณอาจใช้ในลักษณะนี้:

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

ในกรณีนี้คุณเรียก shim อย่างชัดเจนแทนที่จะใช้วัตถุหรือวิธีการดั้งเดิม ในทางตรงกันข้าม polyfill แทนที่วัตถุและวิธีการในวัตถุต้นฉบับ

ตัวอย่างเช่น:

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

ในรหัสของคุณดูเหมือนว่าคุณกำลังใช้วัตถุ navigator.mediaDevices มาตรฐาน แต่จริงๆแล้ว polyfill (adapter.js ในตัวอย่าง) ได้แทนที่วัตถุนี้ด้วยตัวของมันเอง

สิ่งที่มันแทนที่ด้วยมันคือชิมแปนซี สิ่งนี้จะตรวจสอบว่าคุณลักษณะนั้นได้รับการสนับสนุนตามธรรมชาติและใช้งานได้หรือไม่หรือมันจะแก้ไขโดยใช้ API อื่นหากไม่ได้ใช้

ดังนั้นโพลีฟิลล์จึงเป็นแบบ "โปร่งใส" และนี่คือสิ่งที่ Remy Sharp (ซึ่งเป็นคนบัญญัติศัพท์คำ) หมายถึงเมื่อพูดว่า " ถ้าคุณลบสคริปต์ polyfill รหัสของคุณจะยังคงทำงานต่อไปโดยไม่มีการเปลี่ยนแปลงใด ๆ ที่จำเป็นแม้ว่าโพลีจะถูกลบ "