ภาษา JavaScript มีการพัฒนาอย่างต่อเนื่อง ข้อเสนอใหม่สำหรับภาษาปรากฏขึ้นเป็นประจำ มีการวิเคราะห์ และหากถือว่าคุ้มค่า จะถูกผนวกเข้ากับรายการที่ https://tc39.github.io/ecma262/ จากนั้นจึงดำเนินการตามข้อกำหนด
ทีมที่อยู่เบื้องหลังเอ็นจิ้น JavaScript มีแนวคิดของตนเองเกี่ยวกับสิ่งที่ควรนำไปใช้เป็นอันดับแรก พวกเขาอาจตัดสินใจที่จะดำเนินการตามข้อเสนอที่อยู่ในร่างและเลื่อนสิ่งที่อยู่ในข้อกำหนดอยู่แล้ว เนื่องจากมีความน่าสนใจน้อยกว่าหรือเพียงแต่ทำได้ยากกว่า
ดังนั้นจึงเป็นเรื่องปกติที่เครื่องยนต์จะใช้มาตรฐานเพียงบางส่วนเท่านั้น
หน้าที่ดีเพื่อดูสถานะการสนับสนุนฟีเจอร์ภาษาในปัจจุบันคือ https://compat-table.github.io/compat-table/es6/ (ใหญ่มาก เรายังต้องศึกษาอีกมาก)
ในฐานะโปรแกรมเมอร์ เราต้องการใช้คุณสมบัติล่าสุด ยิ่งมีสิ่งดีๆ – ยิ่งดี!
ในทางกลับกัน จะทำให้โค้ดสมัยใหม่ของเราทำงานกับเอ็นจิ้นรุ่นเก่าที่ยังไม่เข้าใจฟีเจอร์ล่าสุดได้อย่างไร
มีสองเครื่องมือสำหรับสิ่งนั้น:
ทรานสพิเลอร์.
โพลีฟิล
ในบทนี้ จุดประสงค์ของเราคือเพื่อให้เข้าใจถึงวิธีการทำงานและจุดยืนในการพัฒนาเว็บ
ทรานสไพเลอร์เป็นซอฟต์แวร์พิเศษที่แปลซอร์สโค้ดไปเป็นซอร์สโค้ดอื่น มันสามารถแยกวิเคราะห์ (“อ่านและทำความเข้าใจ”) โค้ดสมัยใหม่ และเขียนใหม่โดยใช้โครงสร้างไวยากรณ์แบบเก่า เพื่อให้ทำงานในเอ็นจิ้นที่ล้าสมัยได้เช่นกัน
เช่น JavaScript ก่อนปี 2020 ไม่มี "ตัวดำเนินการรวมศูนย์" ?? - ดังนั้นหากผู้เยี่ยมชมใช้เบราว์เซอร์ที่ล้าสมัยอาจไม่เข้าใจโค้ดเช่น height = height ?? 100 .
Transpiler จะวิเคราะห์โค้ดของเราและเขียน height ?? 100 เป็น (height !== undefined && height !== null) ? height : 100 .
// ก่อนที่จะรันทรานสไพเลอร์ ความสูง = ความสูง ?? 100; // หลังจากรัน transpiler แล้ว ความสูง = (ความสูง !== ไม่ได้กำหนด && ความสูง !== null) ? ส่วนสูง : 100;
ตอนนี้โค้ดที่เขียนใหม่เหมาะสำหรับเอ็นจิ้น JavaScript รุ่นเก่า
โดยปกติแล้ว นักพัฒนาจะเรียกใช้ transpiler บนคอมพิวเตอร์ของตนเอง จากนั้นจึงปรับใช้โค้ดที่ transpiled ไปยังเซิร์ฟเวอร์
เมื่อพูดถึงชื่อ Babel เป็นหนึ่งในผู้แปลที่โดดเด่นที่สุด
ระบบการสร้างโปรเจ็กต์สมัยใหม่ เช่น webpack มอบวิธีการรันทรานสไพเลอร์โดยอัตโนมัติทุกครั้งที่เปลี่ยนโค้ด ดังนั้นจึงง่ายมากที่จะรวมเข้ากับกระบวนการพัฒนา
คุณสมบัติภาษาใหม่อาจไม่เพียงแต่รวมถึงโครงสร้างไวยากรณ์และตัวดำเนินการเท่านั้น แต่ยังรวมถึงฟังก์ชันในตัวด้วย
ตัวอย่างเช่น Math.trunc(n) เป็นฟังก์ชันที่ "ตัด" ส่วนทศนิยมของตัวเลขออก เช่น Math.trunc(1.23) ส่งคืน 1
ในเอ็นจิ้น JavaScript บางตัว (ล้าสมัยมาก) ไม่มี Math.trunc ดังนั้นโค้ดดังกล่าวจะล้มเหลว
ขณะที่เรากำลังพูดถึงฟังก์ชันใหม่ ไม่ใช่การเปลี่ยนแปลงไวยากรณ์ ก็ไม่จำเป็นต้องแปลงอะไรที่นี่ เราแค่ต้องประกาศฟังก์ชันที่หายไป
สคริปต์ที่อัปเดต/เพิ่มฟังก์ชันใหม่เรียกว่า "polyfill" มัน "เติมเต็ม" ช่องว่างและเพิ่มการใช้งานที่ขาดหายไป
สำหรับกรณีเฉพาะนี้ polyfill สำหรับ Math.trunc จะเป็นสคริปต์ที่นำไปใช้ในลักษณะนี้:
if (!Math.trunc) { // หากไม่มีฟังก์ชันดังกล่าว
//นำไปปฏิบัติ
Math.trunc = ฟังก์ชั่น (ตัวเลข) {
// Math.ceil และ Math.floor มีอยู่ในเอ็นจิ้น JavaScript โบราณ
// จะกล่าวถึงในภายหลังในบทช่วยสอน
กลับหมายเลข < 0 ? Math.ceil(ตัวเลข) : Math.floor(ตัวเลข);
-
-JavaScript เป็นภาษาที่มีไดนามิกสูง สคริปต์อาจเพิ่ม/แก้ไขฟังก์ชันใดๆ แม้แต่ฟังก์ชันในตัว
ไลบรารี polyfill ที่น่าสนใจสองแห่งคือ:
core js ที่รองรับได้มาก อนุญาตให้รวมเฉพาะคุณสมบัติที่จำเป็นเท่านั้น
ในบทนี้ เราอยากจะกระตุ้นให้คุณศึกษาคุณลักษณะของภาษาสมัยใหม่และแม้แต่คุณลักษณะที่ "ล้ำหน้า" แม้ว่าจะยังไม่ได้รับการสนับสนุนอย่างดีจากกลไก JavaScript ก็ตาม
อย่าลืมใช้ทรานสไพเลอร์ (หากใช้ไวยากรณ์หรือโอเปอเรเตอร์สมัยใหม่) และโพลีฟิล (เพื่อเพิ่มฟังก์ชันที่อาจขาดหายไป) พวกเขาจะให้แน่ใจว่าโค้ดใช้งานได้
ตัวอย่างเช่น ในภายหลังเมื่อคุณคุ้นเคยกับ JavaScript แล้ว คุณสามารถตั้งค่าระบบสร้างโค้ดตาม webpack ด้วยปลั๊กอิน babel-loader
แหล่งข้อมูลที่ดีที่แสดงสถานะปัจจุบันของการสนับสนุนสำหรับคุณสมบัติต่างๆ:
https://compat-table.github.io/compat-table/es6/ – สำหรับ JavaScript ล้วนๆ
https://caniuse.com/ – สำหรับฟังก์ชันที่เกี่ยวข้องกับเบราว์เซอร์
PS Google Chrome มักจะเป็นคุณลักษณะด้านภาษาที่ทันสมัยที่สุด ลองใช้ดูหากการสาธิตการสอนล้มเหลว การสาธิตบทช่วยสอนส่วนใหญ่ใช้งานได้กับเบราว์เซอร์สมัยใหม่