diff --git a/1-js/03-code-quality/06-polyfills/article.md b/1-js/03-code-quality/06-polyfills/article.md index 891d17d53..fc2993ff0 100644 --- a/1-js/03-code-quality/06-polyfills/article.md +++ b/1-js/03-code-quality/06-polyfills/article.md @@ -1,89 +1,89 @@ +# Polyfills และ Transpilers -## Polyfills และ Transpilers +ภาษา JavaScript มีวิวัฒนาการอย่างต่อเนื่อง มีข้อเสนอใหม่ๆ สำหรับภาษานี้เกิดขึ้นเป็นประจำ โดยจะมีการวิเคราะห์และพิจารณาว่าข้อเสนอใดมีคุณค่าเพียงพอที่จะเพิ่มเข้าไปในรายการที่ จากนั้นจะค่อยๆ ผ่านเข้าสู่[ข้อกำหนด](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/) -ภาษา JavaScript มีการพัฒนาอย่างต่อเนื่อง ข้อเสนอใหม่ๆ สำหรับภาษาจะปรากฏขึ้นเป็นประจำ พวกเขาจะถูกวิเคราะห์และถ้าเห็นว่าเหมาะสมจะถูกเพิ่มเข้าไปในรายการที่ [https://tc39.github.io/ecma262/](https://tc39.github.io/ecma262/) และจากนั้นจะไปต่อที่ ข้อกำหนด: [https://www.ecma-international.org/publications-and-standards/standards/ecma-262/](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/) +ทีมงานที่อยู่เบื้องหลังเอนจิ้น JavaScript มีแนวคิดของตัวเองว่าจะเริ่มใช้อะไรก่อน พวกเขาอาจตัดสินใจใช้ข้อเสนอที่ยังอยู่ในร่างและเลื่อนสิ่งที่อยู่ในข้อกำหนดแล้วออกไป เพราะมันน่าสนใจน้อยกว่าหรือยากกว่าที่จะทำ -ทีมงานเบื้องหลังเอนจิ้น JavaScript มีแนวคิดของตัวเองว่าจะทำอะไรก่อน พวกเขาอาจตัดสินใจที่จะนำข้อเสนอที่อยู่ในร่างและเลื่อนสิ่งที่อยู่ในข้อกำหนดออกไป เพราะสิ่งเหล่านั้นไม่น่าสนใจหรือทำได้ยากกว่า +ดังนั้นจึงเป็นเรื่องปกติที่เอนจิ้นจะใช้งานแค่บางส่วนของมาตรฐานเท่านั้น -ดังนั้นจึงเป็นเรื่องปกติที่เอนจิ้นจะใช้งานเพียงบางส่วนของข้อกำหนด +เว็บเพจที่ดีในการดูสถานะปัจจุบันของการรองรับฟีเจอร์ภาษาคือ (มันใหญ่มาก เรายังมีอีกหลายอย่างที่ต้องศึกษา) -หน้าเว็บที่ดีในการดูสถานะปัจจุบันของการรองรับฟีเจอร์ของภาษาคือ [https://kangax.github.io/compat-table/es6/](https://kangax.github.io/compat-table/es6/) (มันใหญ่ เรายังมีอีกหลายอย่างที่ต้องเรียนรู้) +ในฐานะโปรแกรมเมอร์ เราอยากใช้ฟีเจอร์ล่าสุด ยิ่งมีของดีๆ มากเท่าไหร่ก็ยิ่งดี! -ในฐานะโปรแกรมเมอร์ เราต้องการใช้ฟีเจอร์ล่าสุด ยิ่งมีของดีมากเท่าไหร่ก็ยิ่งดี! +ในทางกลับกัน จะทำอย่างไรให้โค้ดสมัยใหม่ของเราทำงานได้บนเอนจิ้นเก่าๆ ที่ยังไม่เข้าใจฟีเจอร์ใหม่ๆ -ในทางกลับกัน เราจะทำอย่างไรให้โค้ดสมัยใหม่ของเราทำงานบนเอนจิ้นรุ่นเก่าที่ยังไม่เข้าใจฟีเจอร์ล่าสุดได้? +มีเครื่องมือสองอย่างสำหรับเรื่องนี้: -มีเครื่องมืออยู่สองอย่าง: +1. Transpilers +2. Polyfills -1. Transpilers. -2. Polyfills. +ที่นี่ในบทนี้ จุดประสงค์ของเราคือการทำความเข้าใจเบื้องต้นว่าพวกมันทำงานอย่างไร และบทบาทของมันในการพัฒนาเว็บ -ในบทนี้ วัตถุประสงค์ของเราคือการทำความเข้าใจว่าพวกมันทำงานอย่างไร และตำแหน่งของพวกมันในการพัฒนาเว็บ +## Transpilers -## Transpilers: เปลี่ยนภาษาให้เข้าใจกัน +[Transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler) เป็นซอฟต์แวร์พิเศษที่แปลโค้ดต้นฉบับอันหนึ่งเป็นโค้ดต้นฉบับอีกชุดหนึ่ง มันสามารถแยกวิเคราะห์ ("อ่านและทำความเข้าใจ") โค้ดสมัยใหม่ และเขียนใหม่โดยใช้โครงสร้างไวยากรณ์แบบเก่า เพื่อให้ทำงานได้แม้กับเอนจิ้นที่ล้าสมัย -**Transpiler** (นึกถึงคำว่า "แปลภาษา") เป็นเครื่องมือพิเศษที่ช่วยแปลงโค้ดจากภาษาหนึ่งไปเป็นอีกภาษาหนึ่ง เปรียบเหมือนล่ามแปลภาษาที่อ่านแล้วเข้าใจโค้ดสมัยใหม่ แล้วเขียนใหม่ด้วยไวยากรณ์แบบเก่า เพื่อให้ทำงานได้กับเอนจิ้นรุ่นเก่า +ยกตัวอย่างเช่น JavaScript ก่อนปี 2020 ไม่มี "ตัวดำเนินการ nullish coalescing" `??` ดังนั้น หากผู้ใช้ใช้เบราว์เซอร์รุ่นเก่า มันอาจล้มเหลวในการทำความเข้าใจโค้ดอย่างเช่น `height = height ?? 100` -ยกตัวอย่างเช่น ใน JavaScript ก่อนปี 2020 ไม่มีตัวดำเนินการ "nullish coalescing" `??` ดังนั้นถ้าผู้เยี่ยมชมเว็บไซต์ใช้เบราว์เซอร์รุ่นเก่า โค้ดอย่าง `height = height ?? 100` อาจทำงานไม่ถูก - -Transpiler จะวิเคราะห์โค้ดของเราแล้วเขียน `height ?? 100` ใหม่เป็น `(height !== undefined && height !== null) ? height : 100` +Transpiler จะวิเคราะห์โค้ดของเราและเขียน `height ?? 100` ใหม่เป็น `(height !== undefined && height !== null) ? height : 100` ```js // ก่อนรัน transpiler height = height ?? 100; -// หลังรัน transpiler +// หลังรัน transpiler height = (height !== undefined && height !== null) ? height : 100; ``` -ตอนนี้โค้ดที่เขียนใหม่ก็ใช้งานได้กับเอนจิ้น JavaScript รุ่นเก่าแล้ว +ตอนนี้โค้ดที่เขียนใหม่ก็เหมาะสมกับเอนจิ้น JavaScript รุ่นเก่าแล้ว + +โดยปกติแล้ว นักพัฒนาจะรัน transpiler บนคอมพิวเตอร์ของตัวเอง แล้วจากนั้นจึงนำโค้ดที่ผ่านการ transpile แล้วไปใช้บนเซิร์ฟเวอร์ -โดยทั่วไป นักพัฒนาจะรัน transpiler บนคอมพิวเตอร์ของตัวเอง จากนั้นนำโค้ดที่ผ่านการแปลงแล้วไปใช้บนเซิร์ฟเวอร์ +พูดถึงชื่อ [Babel](https://babeljs.io) ถือเป็นหนึ่งใน transpiler ที่โดดเด่นที่สุดในตอนนี้ -ตัวอย่าง transpiler ที่โดดเด่นคือ **Babel** (นึกถึงคำว่า "บาเบล" ที่แปลว่า "หอคอยแห่งการสื่อสาร") +ระบบสร้างโปรเจ็กต์สมัยใหม่ เช่น [webpack](https://webpack.js.org/) มีวิธีให้รัน transpiler อัตโนมัติทุกครั้งที่มีการเปลี่ยนแปลงโค้ด ทำให้ง่ายต่อการรวมเข้ากับกระบวนการพัฒนา -ระบบบิลด์โปรเจกต์สมัยใหม่ (Modern project build systems) เช่น **webpack** (นึกถึงคำว่า "แพ็คของ") รองรับการรัน transpiler โดยอัตโนมัติทุกครั้งที่มีการเปลี่ยนแปลงโค้ด ทำให้การทำงานกับ transpiler ง่ายดายมาก +## Polyfills -## Polyfills: ตัวอุดรอยรั่ว +คุณสมบัติใหม่ของภาษาอาจไม่ได้รวมเฉพาะโครงสร้างไวยากรณ์และตัวดำเนินการเท่านั้น แต่ยังรวมถึงฟังก์ชันที่มีในตัวด้วย -ฟีเจอร์ใหม่ของภาษาอาจไม่เพียงแค่ไวยากรณ์และตัวดำเนินการ แต่ยังรวมถึงฟังก์ชันในตัวอย่างเช่น `Math.trunc(n)` เป็นฟังก์ชันที่ "ตัดทอน" ส่วนทศนิยมของตัวเลข เช่น `Math.trunc(1.23)` จะส่งคืน `1` +ยกตัวอย่างเช่น `Math.trunc(n)` เป็นฟังก์ชันที่ "ตัดทอน" ส่วนทศนิยมของตัวเลข เช่น `Math.trunc(1.23)` จะคืนค่า `1` -ในเอนจิ้น JavaScript บางรุ่น (รุ่นเก่ามาก) ไม่มี `Math.trunc` ดังนั้นโค้ดดังกล่าวจะไม่ทำงาน +ในเอนจิ้น JavaScript บางตัวที่ล้าสมัยมาก อาจไม่มี `Math.trunc` ดังนั้นโค้ดดังกล่าวจะทำงานไม่ได้ -เนื่องจากเรากำลังพูดถึงฟังก์ชันใหม่ ไม่ใช่การเปลี่ยนแปลงไวยากรณ์ เราจึงไม่จำเป็นต้อง transpile อะไรเลย เราแค่ต้องประกาศฟังก์ชันที่หายไป +เนื่องจากเรากำลังพูดถึงฟังก์ชันใหม่ ไม่ใช่การเปลี่ยนแปลงไวยากรณ์ จึงไม่จำเป็นต้อง transpile อะไรตรงนี้ เพียงแค่ต้องประกาศฟังก์ชันที่ขาดหายไปเท่านั้น -สคริปต์ที่อัปเดต/เพิ่มฟังก์ชันใหม่เรียกว่า "polyfill" มัน "เติมเต็มช่องว่าง" และเพิ่มการใช้งานที่หายไป +สคริปต์ที่อัปเดตหรือเพิ่มฟังก์ชันใหม่ เรียกว่า "polyfill" มันจะ "เติมเต็ม" ช่องว่างและเพิ่มการนำไปใช้งานที่ขาดหายไป -สำหรับกรณีนี้ polyfill สำหรับ `Math.trunc` เป็นสคริปต์ที่นำไปใช้งาน ดังนี้: +สำหรับกรณีนี้โดยเฉพาะ polyfill สำหรับ `Math.trunc` คือสคริปต์ที่เพิ่มการนำไปใช้งานให้ ดังนี้: ```js if (!Math.trunc) { // ถ้าไม่มีฟังก์ชันดังกล่าว - // นำไปใช้งาน + // ให้นำไปใช้งาน Math.trunc = function(number) { - // Math.ceil และ Math.floor มีอยู่แม้กระทั่งในเอนจิ้น JavaScript รุ่นเก่า - // จะกล่าวถึงในบทเรียนต่อไป + // Math.ceil และ Math.floor มีอยู่แม้ในเอนจิ้น JavaScript โบราณ + // จะมีการอธิบายเพิ่มเติมในบทเรียนถัดไป return number < 0 ? Math.ceil(number) : Math.floor(number); }; } ``` -JavaScript เป็นภาษาที่มีความคล่องตัวสูง สคริปต์สามารถเพิ่ม/แก้ไขฟังก์ชันใดๆ ได้แม้กระทั่งฟังก์ชันในตัว - -ไลบรารี polyfill ที่น่าสนใจสองแห่ง: +JavaScript เป็นภาษาที่มีพลวัตสูงมาก สคริปต์สามารถเพิ่ม/แก้ไขฟังก์ชันใดๆ ก็ได้ แม้แต่ฟังก์ชันในตัว -- core js: [https://github.com/zloirock/core-js](https://github.com/zloirock/core-js) ที่รองรับหลายอย่าง อนุญาตให้รวมเฉพาะฟีเจอร์ที่ต้องการ -- polyfill.io: [https://polyfill.io/](https://polyfill.io/) บริการที่จัดหาสคริปต์ที่มี polyfills ขึ้นอยู่กับฟีเจอร์และเบราว์เซอร์ของผู้ใช้ +มีไลบรารี polyfill ที่น่าสนใจสองแห่งคือ: +- [core js](https://github.com/zloirock/core-js) ที่รองรับฟีเจอร์เป็นจำนวนมาก โดยสามารถเลือกใช้เฉพาะฟีเจอร์ที่ต้องการได้ +- บริการ [polyfill.io](https://polyfill.io/) ที่จัดเตรียมสคริปต์พร้อม polyfills ตามคุณสมบัติและเบราว์เซอร์ของผู้ใช้ ## สรุป -ในบทนี้ เราอยากกระตุ้นให้คุณศึกษาฟีเจอร์ภาษาใหม่ๆ แม้กระทั่งฟีเจอร์ที่ล้ำสมัย แม้ว่าเอนจิ้น JavaScript ยังไม่รองรับอย่างเต็มที่ +ในบทนี้เราต้องการจูงใจให้คุณศึกษาคุณสมบัติภาษาที่ทันสมัยและแม้กระทั่งที่อยู่ในระหว่างพัฒนา แม้ว่าตอนนี้เอนจิ้น JavaScript จะยังรองรับได้ไม่ดีนัก -เพียงแค่อย่าลืมใช้ transpiler (ถ้าใช้ไวยากรณ์หรือตัวดำเนินการสมัยใหม่) และ polyfills (เพื่อเพิ่มฟังก์ชันที่อาจหายไป) พวกมันจะทำให้โค้ดทำงานได้อย่างถูกต้อง +อย่าลืมใช้ transpiler (ถ้าใช้ไวยากรณ์หรือตัวดำเนินการใหม่) และ polyfills (เพื่อเพิ่มฟังก์ชันที่อาจขาดหายไป) พวกมันจะช่วยให้มั่นใจได้ว่าโค้ดจะทำงาน -ตัวอย่างเช่น ต่อมาเมื่อคุณคุ้นเคยกับ JavaScript คุณสามารถตั้งค่าระบบบิลด์โค้ดบนพื้นฐานของ webpack: [https://webpack.js.org/guides/getting-started/](https://webpack.js.org/guides/getting-started/) พร้อมกับปลั๊กอิน babel-loader: [https://github.com/babel/babel-loader](https://github.com/babel/babel-loader) +ตัวอย่างเช่น ในภายหลังเมื่อคุณคุ้นเคยกับ JavaScript แล้ว คุณสามารถตั้งค่าระบบการสร้างโค้ดที่อิงกับ [webpack](https://webpack.js.org/) ร่วมกับปลั๊กอิน [babel-loader](https://github.com/babel/babel-loader) -แหล่งข้อมูลที่ดีที่แสดงสถานะปัจจุบันของการรองรับฟีเจอร์ต่างๆ: -- [https://github.com/compat-table/compat-table](https://github.com/compat-table/compat-table) - สำหรับ JavaScript แบบเพียวๆ -- [https://caniuse.com/](https://caniuse.com/) - สำหรับฟังก์ชันที่เกี่ยวข้องกับเบราว์เซอร์ +แหล่งข้อมูลดีๆ ที่แสดงสถานะปัจจุบันของการรองรับคุณสมบัติต่างๆ ได้แก่: +- - สำหรับ JavaScript แท้ๆ +- - สำหรับฟังก์ชันที่เกี่ยวข้องกับเบราว์เซอร์ -ปล. Google Chrome มักจะเป็นเวอร์ชันล่าสุดพร้อมฟีเจอร์ภาษา ลองใช้ดูถ้าการสาธิตบทเรียนไม่ทำงาน อย่างไรก็ตาม บทเรียนส่วนใหญ่จะทำงานได้กับเบราว์เซอร์สมัยใหม่ทุกชนิด \ No newline at end of file +ป.ล. Google Chrome มักจะอัปเดตการรองรับคุณสมบัติภาษาใหม่ๆ ได้ทันสมัยที่สุด ลองใช้ Chrome ดูหากเดโมในบทเรียนไม่ทำงาน แต่โดยทั่วไปแล้วเดโมในบทเรียนส่วนใหญ่น่าจะทำงานได้กับเบราว์เซอร์สมัยใหม่ทุกตัว \ No newline at end of file