From 60e0d8d275464e2c966e486b7777aaa317bc5a5a Mon Sep 17 00:00:00 2001 From: Prasit Tongpradit Date: Sat, 13 Apr 2024 23:16:18 +0700 Subject: [PATCH 1/2] =?UTF-8?q?Polyfills=20=E0=B9=81=E0=B8=A5=E0=B8=B0=20T?= =?UTF-8?q?ranspilers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/03-code-quality/06-polyfills/article.md | 85 +++++--------------- 1 file changed, 20 insertions(+), 65 deletions(-) diff --git a/1-js/03-code-quality/06-polyfills/article.md b/1-js/03-code-quality/06-polyfills/article.md index 891d17d53..47d460621 100644 --- a/1-js/03-code-quality/06-polyfills/article.md +++ b/1-js/03-code-quality/06-polyfills/article.md @@ -1,89 +1,44 @@ +# 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 รุ่นเก่าแล้ว - -โดยทั่วไป นักพัฒนาจะรัน transpiler บนคอมพิวเตอร์ของตัวเอง จากนั้นนำโค้ดที่ผ่านการแปลงแล้วไปใช้บนเซิร์ฟเวอร์ - -ตัวอย่าง transpiler ที่โดดเด่นคือ **Babel** (นึกถึงคำว่า "บาเบล" ที่แปลว่า "หอคอยแห่งการสื่อสาร") - -ระบบบิลด์โปรเจกต์สมัยใหม่ (Modern project build systems) เช่น **webpack** (นึกถึงคำว่า "แพ็คของ") รองรับการรัน transpiler โดยอัตโนมัติทุกครั้งที่มีการเปลี่ยนแปลงโค้ด ทำให้การทำงานกับ transpiler ง่ายดายมาก - -## Polyfills: ตัวอุดรอยรั่ว - -ฟีเจอร์ใหม่ของภาษาอาจไม่เพียงแค่ไวยากรณ์และตัวดำเนินการ แต่ยังรวมถึงฟังก์ชันในตัวอย่างเช่น `Math.trunc(n)` เป็นฟังก์ชันที่ "ตัดทอน" ส่วนทศนิยมของตัวเลข เช่น `Math.trunc(1.23)` จะส่งคืน `1` - -ในเอนจิ้น JavaScript บางรุ่น (รุ่นเก่ามาก) ไม่มี `Math.trunc` ดังนั้นโค้ดดังกล่าวจะไม่ทำงาน - -เนื่องจากเรากำลังพูดถึงฟังก์ชันใหม่ ไม่ใช่การเปลี่ยนแปลงไวยากรณ์ เราจึงไม่จำเป็นต้อง transpile อะไรเลย เราแค่ต้องประกาศฟังก์ชันที่หายไป - -สคริปต์ที่อัปเดต/เพิ่มฟังก์ชันใหม่เรียกว่า "polyfill" มัน "เติมเต็มช่องว่าง" และเพิ่มการใช้งานที่หายไป - -สำหรับกรณีนี้ polyfill สำหรับ `Math.trunc` เป็นสคริปต์ที่นำไปใช้งาน ดังนี้: - -```js -if (!Math.trunc) { // ถ้าไม่มีฟังก์ชันดังกล่าว - // นำไปใช้งาน - Math.trunc = function(number) { - // Math.ceil และ Math.floor มีอยู่แม้กระทั่งในเอนจิ้น JavaScript รุ่นเก่า - // จะกล่าวถึงในบทเรียนต่อไป - return number < 0 ? Math.ceil(number) : Math.floor(number); - }; -} -``` - -JavaScript เป็นภาษาที่มีความคล่องตัวสูง สคริปต์สามารถเพิ่ม/แก้ไขฟังก์ชันใดๆ ได้แม้กระทั่งฟังก์ชันในตัว - -ไลบรารี polyfill ที่น่าสนใจสองแห่ง: - -- core js: [https://github.com/zloirock/core-js](https://github.com/zloirock/core-js) ที่รองรับหลายอย่าง อนุญาตให้รวมเฉพาะฟีเจอร์ที่ต้องการ -- polyfill.io: [https://polyfill.io/](https://polyfill.io/) บริการที่จัดหาสคริปต์ที่มี polyfills ขึ้นอยู่กับฟีเจอร์และเบราว์เซอร์ของผู้ใช้ - -## สรุป - -ในบทนี้ เราอยากกระตุ้นให้คุณศึกษาฟีเจอร์ภาษาใหม่ๆ แม้กระทั่งฟีเจอร์ที่ล้ำสมัย แม้ว่าเอนจิ้น JavaScript ยังไม่รองรับอย่างเต็มที่ - -เพียงแค่อย่าลืมใช้ transpiler (ถ้าใช้ไวยากรณ์หรือตัวดำเนินการสมัยใหม่) และ polyfills (เพื่อเพิ่มฟังก์ชันที่อาจหายไป) พวกมันจะทำให้โค้ดทำงานได้อย่างถูกต้อง +ตอนนี้โค้ดที่เขียนใหม่ก็เหมาะสมกับเอนจิ้น JavaScript รุ่นเก่าแล้ว -ตัวอย่างเช่น ต่อมาเมื่อคุณคุ้นเคยกับ 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) +โดยปกติแล้ว นักพัฒนาจะรัน transpiler บนคอมพิวเตอร์ของตัวเอง แล้วจากนั้นจึงนำโค้ดที่ผ่านการ transpile แล้วไปใช้บนเซิร์ฟเวอร์ -แหล่งข้อมูลที่ดีที่แสดงสถานะปัจจุบันของการรองรับฟีเจอร์ต่างๆ: -- [https://github.com/compat-table/compat-table](https://github.com/compat-table/compat-table) - สำหรับ JavaScript แบบเพียวๆ -- [https://caniuse.com/](https://caniuse.com/) - สำหรับฟังก์ชันที่เกี่ยวข้องกับเบราว์เซอร์ +พูดถึงชื่อ [Babel](https://babeljs.io) ถือเป็นหนึ่งใน transpiler ที่โดดเด่นที่สุดในตอนนี้ -ปล. Google Chrome มักจะเป็นเวอร์ชันล่าสุดพร้อมฟีเจอร์ภาษา ลองใช้ดูถ้าการสาธิตบทเรียนไม่ทำงาน อย่างไรก็ตาม บทเรียนส่วนใหญ่จะทำงานได้กับเบราว์เซอร์สมัยใหม่ทุกชนิด \ No newline at end of file +ระบบสร้างโปรเจ็กต์สมัยใหม่ เช่น [webpack](https://webpack.js.org/) มีวิธีให้รัน transpiler อัตโนมัติทุกครั้งที่มีการเปลี่ยนแปลงโค้ด ทำให้ง่ายต่อการรวมเข้ากับกระบวนการพัฒนา \ No newline at end of file From 4f0c0b6bac80d031905c2898466008dbfcebe419 Mon Sep 17 00:00:00 2001 From: Prasit Tongpradit Date: Sat, 13 Apr 2024 23:16:43 +0700 Subject: [PATCH 2/2] =?UTF-8?q?Polyfills=20=E0=B9=81=E0=B8=A5=E0=B8=B0=20?= =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B8=B8=E0=B8=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-js/03-code-quality/06-polyfills/article.md | 47 +++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) diff --git a/1-js/03-code-quality/06-polyfills/article.md b/1-js/03-code-quality/06-polyfills/article.md index 47d460621..fc2993ff0 100644 --- a/1-js/03-code-quality/06-polyfills/article.md +++ b/1-js/03-code-quality/06-polyfills/article.md @@ -41,4 +41,49 @@ height = (height !== undefined && height !== null) ? height : 100; พูดถึงชื่อ [Babel](https://babeljs.io) ถือเป็นหนึ่งใน transpiler ที่โดดเด่นที่สุดในตอนนี้ -ระบบสร้างโปรเจ็กต์สมัยใหม่ เช่น [webpack](https://webpack.js.org/) มีวิธีให้รัน transpiler อัตโนมัติทุกครั้งที่มีการเปลี่ยนแปลงโค้ด ทำให้ง่ายต่อการรวมเข้ากับกระบวนการพัฒนา \ No newline at end of file +ระบบสร้างโปรเจ็กต์สมัยใหม่ เช่น [webpack](https://webpack.js.org/) มีวิธีให้รัน transpiler อัตโนมัติทุกครั้งที่มีการเปลี่ยนแปลงโค้ด ทำให้ง่ายต่อการรวมเข้ากับกระบวนการพัฒนา + +## Polyfills + +คุณสมบัติใหม่ของภาษาอาจไม่ได้รวมเฉพาะโครงสร้างไวยากรณ์และตัวดำเนินการเท่านั้น แต่ยังรวมถึงฟังก์ชันที่มีในตัวด้วย + +ยกตัวอย่างเช่น `Math.trunc(n)` เป็นฟังก์ชันที่ "ตัดทอน" ส่วนทศนิยมของตัวเลข เช่น `Math.trunc(1.23)` จะคืนค่า `1` + +ในเอนจิ้น JavaScript บางตัวที่ล้าสมัยมาก อาจไม่มี `Math.trunc` ดังนั้นโค้ดดังกล่าวจะทำงานไม่ได้ + +เนื่องจากเรากำลังพูดถึงฟังก์ชันใหม่ ไม่ใช่การเปลี่ยนแปลงไวยากรณ์ จึงไม่จำเป็นต้อง transpile อะไรตรงนี้ เพียงแค่ต้องประกาศฟังก์ชันที่ขาดหายไปเท่านั้น + +สคริปต์ที่อัปเดตหรือเพิ่มฟังก์ชันใหม่ เรียกว่า "polyfill" มันจะ "เติมเต็ม" ช่องว่างและเพิ่มการนำไปใช้งานที่ขาดหายไป + +สำหรับกรณีนี้โดยเฉพาะ polyfill สำหรับ `Math.trunc` คือสคริปต์ที่เพิ่มการนำไปใช้งานให้ ดังนี้: + +```js +if (!Math.trunc) { // ถ้าไม่มีฟังก์ชันดังกล่าว + // ให้นำไปใช้งาน + Math.trunc = function(number) { + // Math.ceil และ Math.floor มีอยู่แม้ในเอนจิ้น JavaScript โบราณ + // จะมีการอธิบายเพิ่มเติมในบทเรียนถัดไป + return number < 0 ? Math.ceil(number) : Math.floor(number); + }; +} +``` + +JavaScript เป็นภาษาที่มีพลวัตสูงมาก สคริปต์สามารถเพิ่ม/แก้ไขฟังก์ชันใดๆ ก็ได้ แม้แต่ฟังก์ชันในตัว + +มีไลบรารี polyfill ที่น่าสนใจสองแห่งคือ: +- [core js](https://github.com/zloirock/core-js) ที่รองรับฟีเจอร์เป็นจำนวนมาก โดยสามารถเลือกใช้เฉพาะฟีเจอร์ที่ต้องการได้ +- บริการ [polyfill.io](https://polyfill.io/) ที่จัดเตรียมสคริปต์พร้อม polyfills ตามคุณสมบัติและเบราว์เซอร์ของผู้ใช้ + +## สรุป + +ในบทนี้เราต้องการจูงใจให้คุณศึกษาคุณสมบัติภาษาที่ทันสมัยและแม้กระทั่งที่อยู่ในระหว่างพัฒนา แม้ว่าตอนนี้เอนจิ้น JavaScript จะยังรองรับได้ไม่ดีนัก + +อย่าลืมใช้ transpiler (ถ้าใช้ไวยากรณ์หรือตัวดำเนินการใหม่) และ polyfills (เพื่อเพิ่มฟังก์ชันที่อาจขาดหายไป) พวกมันจะช่วยให้มั่นใจได้ว่าโค้ดจะทำงาน + +ตัวอย่างเช่น ในภายหลังเมื่อคุณคุ้นเคยกับ JavaScript แล้ว คุณสามารถตั้งค่าระบบการสร้างโค้ดที่อิงกับ [webpack](https://webpack.js.org/) ร่วมกับปลั๊กอิน [babel-loader](https://github.com/babel/babel-loader) + +แหล่งข้อมูลดีๆ ที่แสดงสถานะปัจจุบันของการรองรับคุณสมบัติต่างๆ ได้แก่: +- - สำหรับ JavaScript แท้ๆ +- - สำหรับฟังก์ชันที่เกี่ยวข้องกับเบราว์เซอร์ + +ป.ล. Google Chrome มักจะอัปเดตการรองรับคุณสมบัติภาษาใหม่ๆ ได้ทันสมัยที่สุด ลองใช้ Chrome ดูหากเดโมในบทเรียนไม่ทำงาน แต่โดยทั่วไปแล้วเดโมในบทเรียนส่วนใหญ่น่าจะทำงานได้กับเบราว์เซอร์สมัยใหม่ทุกตัว \ No newline at end of file