[JavaScript][Web] Polyfill คืออะไร ตัวอย่างการทำ Polyfill ให้กับบราวเซอร์เวอ์ชันเก่า

Polyfill คืออะไร

สำหรับการทำเว็บแล้วสิ่งสำคัญคือการทำให้เว็บนั่นสามารถทำงานได้ทุกบราวเซอร์ (แต่เดียวนี้ต่ำกว่า IE9 ผมนี่ปล่อยแล้ว 555)  แต่ปัญหาของการทำที่เขาเรียกกันว่า cross-browser (การทำให้เว็บทำงานกับบราวเซอร์หลายๆ เจ้า และรุ่นต่ำๆ ได้) มันอยู่ที่ฟังก์ขันที่เราเขียนหรือเลือกใช้นั้นไม่ทำงานกับบราวเซอร์รุ่นต่ำๆ เช่น firefox บางรุ่น หรือ IE8 ,7,6 ยิ่งถ้าเป็นคำสั่งที่ทำงานใน modern browser อย่างเช่น HTML5 หรือ map , fillter ของ JavaScrip หมดสิทธิ์ที่จะทำงานกับบราวเซอร์รุ่นเก่าเลยครับ มันจึงเกิดไลบรารี่ พวก shim, fallback แะ polyfill เพื่อให้คำสั่งใน   modern browser ทำงานในเวอร์ชั่นต่ำๆ ได้ ลากยาวมาสะงั่นนานเลย สรุปว่า polyfill คือการเขียนครอบฟังก์ชั่นที่เราทำให้ไปทำงานกับบราวเซอร์เวอร์ชั่นต่ำๆ ได้ วิธีง่ายๆ ก็ใช้ prototype นั่นแหละครับ เช็ค prefix แล้วก็เขียนมันลงไปใน prototype

กระบวนการในการทำ polyfill มีอยู่สองสเตปหลักๆ คือ เช็คว่าฟังก์ชั่นนั่นมีอยู่ในบราวเซอร์หรือป่าว จากนั่นก็ทำการเขียนฟังก์ชันนั่นว่าต้องการให้มันทำอะไรนั่นเองหรือเรียกว่า “patching”

Polyfill ไม่ได้ทำแค่ในบราวเซอร์ต่ำๆ

ตามหัวข้อเลยครับ เราไม่ได้ทำให้มันทำงานได้ในเวอร์ชั่นต่ำๆ บางครั่งเราต้องทำให้ modern browser หรือบราวเซอร์รุ่นใหม่ๆ มันทำงานกับฟังก์ชั่นนั่นได้ด้วย ยกตัวอย่าง่ายๆ เช่น คำสั่ง HTML5, แท็กต่างๆ หรือแอทริบิวต์ต่างๆ อย่างอินพุช type: date, time บางบราวเซอร์ใหม่ๆ มันทำงานได้ไม่ได้เลยครับ ดังนั่นเราจริงต้องทำ polyfill เพื่อให้มันทำงานได้แบบปกตินั่นเอง

สรุปคือ polyfill มันเป็นคำเรียกเฉยๆ ไม่ได้เป็นฟังก์ชันของ JavaScrip หรือ HTML5 ครับ เขาใช้มาเรียกว่ากระบวนการทำให้ฟังก์ชันที่ไม่มีในบราวเบอร์อื่นๆ ทำงานได้เขาจริงตั่งชื่อว่า polyfill และมันก็ถูกใช้ในการช่วยทำให้แม้แต่ CSS เองทำงานได้ด้วยครับ

Polyfill มีหลายแบบผมจะยกตัวอย่างการอธิบายของ codeproject  มาเขาอธิบายไว้แบบนี้ครับ

  • Perfect polyfills are polyfills that perfectly implement features completely without any side effects. An example is the JSON library, which implements JSON.stringify and JSON.parse on older browsers that do not already support the global JSON object.
  • Common polyfills are polyfills that implement features almost completely. They might have a few small missing features, some edge cases that don’t work correctly, or there might be some slightly annoying side effects. Most polyfills fall into this category.
  • Partial polyfills implement certain features, but have a lot of missing or broken functionality. An example of this is the ES5 shim, which implements a lot of ECMAScript 5 features for ECMAScript 3 engines, but is missing several key features.
  • Fallback polyfills are polyfills that don’t implement the new functionality at all, but just make sure that there is a graceful fallback behavior for older browsers. An example of this is a Web Worker fallback. In HTML5, using web workers, you can execute Javascript code in multiple threads, but there is no known way to do this in older browsers. This fallback just makes all the multi-threaded code run in a single thread, which allows the code to run in older browsers, but the browser will freeze while the code is running.

ตัวอย่างการทำ Polyfill ด้วย Prototype

ผมจะยกตัวอย่างฟังก์ชันที่มาใหม่ๆ ใน ECMAScript 5 มาให้ดู แน่นอนว่า IE < 9 ใช้ไม่ได้แน่นอนลองไปดูลิสรายชื่อตามนี้ ผมจะเอา Array.prototype.map()โดยที่ map เป็นการแปลงร่างสมาชิกข้อมูลใน array ของเราครับ 

เราก็จะได้

จากเดิมที่เป็น

โค้ดตัวอย่างด้านบนแน่นอนว่าทำงานได้ดีกับ browser ใหม่ๆ ครับ แต่ถ้า IE < 8 ลงไปมันจะไม่รู้จักสเตปต่อมาเราจะมาทำ polifill กัน

เราก็จะเอาฟังก์ชันมาเช็คว่ามันมีค่าไหมนั้นเอง ถ้าไม่มีเราก็เขียนฟังก์ชันในแบบของเราไปครับ โดยผมจะเอาตัวอย่างของ developer.mozilla.org ว่าเขาเขียน polyfill ยังไง

อีกตัวอย่างจาก codeproject คือ Array.prototype.filter() อธิบายง่ายๆ fillter ไว้กรองเอาข้อมูลที่ไม่ต้องการออกไปนั่นเองครับ ซึ่งการใช้งานปกติก็จะเป็นแบบนี้ 

สิ่งที่ได้คือ ค่าที่หารสองลงตัวนั่นเอง เราสามารถทำงานกับ object ได้ด้วยแบบนี้

และขั่นต่อการทำ polyfill ก็เหมือน fillter เราก็เช็คง่ายๆ แบบนี้

การทำ Polyfill กับ blink แท็ก

blink นั่นไม่ได้การยอมรับให้เป็น standard code html โดยหน้าที่มันคือการซ่อนและโชว์แท็กครับ อ่านต่อตรงนี้  ดังนั่นจะลองมาทำให้ blink นั่นใช้งานได้ทุกบราวเซอร์กัน โดยก็ยังเป็นโค้ดตัวอย่างจาก codeproject เหมือนเดิม

โค้ดนี้ทำหน้าทีย้ายเอาข้อมูลให้ blink มาใส่ใน blinky คนเขียนเขาตั่งชื่อใหม่แล้วเอาข้อมูลในนั่นมาใส่ในแท็กใหม่แล้วก็ใส่กลับไปในหน้าเว็บ

เมือ่กี้บอกไปว่า blink นั่นเอาไว้ทำให้มันซ่อนและโชว์ข้อมูล โค้ดข้างบนก็จะเป็นการทำให้มันกระพริบๆ ครับ เท่านี้เราก็เอา blink ไปใช้ได้ทุกบราวเซอร์แล้วครับ ลองดูตัวอย่าง

จบแล้วครับเกี่ยวกับการ cross-browser ของ  JavaScrip ด้วยการทำ Polyfill สนใจอ่านเพิ่มเติมได้ที่ล้างข้างล่างนะครับ ไว้บทความหน้าจะหาอะไรมาให้อ่านอีกนะครับ

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

https://en.wikipedia.org/wiki/Shim_(computing)

Facebook Comments