Web Components v1 - รุ่นใหม่

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

Taylor Savage
Taylor Savage

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

คอมโพเนนต์เว็บเป็นชุดฟีเจอร์ใหม่ของแพลตฟอร์มเว็บที่ช่วยให้คุณสร้างองค์ประกอบ HTML ของตัวเองได้ องค์ประกอบที่กำหนดเองใหม่แต่ละรายการสามารถมีแท็กที่กำหนดเอง เช่น <my-button> และมีประโยชน์ทั้งหมดขององค์ประกอบในตัว โดยองค์ประกอบที่กำหนดเองสามารถมีพร็อพเพอร์ตี้และเมธอด เริ่มทำงานและตอบสนองต่อเหตุการณ์ และยังมีรูปแบบที่ครอบด้วยและต้นไม้ DOM เพื่อให้มีรูปลักษณ์และความรู้สึกของตนเอง

ภาพเคลื่อนไหวขององค์ประกอบความคืบหน้าของกระดาษ

คอมโพเนนต์เว็บช่วยให้คุณสร้างและแชร์องค์ประกอบที่นำมาใช้ใหม่ได้สำหรับทุกสิ่ง ตั้งแต่ปุ่มพิเศษไปจนถึงมุมมองที่ซับซ้อนอย่างเครื่องมือเลือกวันที่ โดยให้บริการโมเดลคอมโพเนนต์ที่อิงตามแพลตฟอร์ม เนื่องจากคอมโพเนนต์ของเว็บสร้างขึ้นด้วย API ของแพลตฟอร์ม ซึ่งรวมถึงการห่อหุ้มข้อมูลพื้นฐานที่มีประสิทธิภาพ คุณจึงใช้คอมโพเนนต์เหล่านี้ในไลบรารีหรือเฟรมเวิร์ก JavaScript อื่นๆ ได้ราวกับว่าเป็นองค์ประกอบ DOM มาตรฐาน

คุณอาจเคยได้ยินเกี่ยวกับ Web Elements มาก่อน - ข้อกำหนดเฉพาะคอมโพเนนต์เว็บเวอร์ชันเริ่มแรก v0 จัดส่งใน Chrome 33 แล้ว

ปัจจุบัน ด้วยการทำงานร่วมกันอย่างกว้างขวางระหว่างผู้ให้บริการเบราว์เซอร์ ทำให้ Web Elements รุ่นถัดไปได้รับการสนับสนุนในวงกว้าง Chrome รองรับสเปคหลัก 2 ประการที่ประกอบกันเป็นคอมโพเนนต์ของเว็บ ได้แก่ Shadow DOM และองค์ประกอบที่กำหนดเอง ของ Chrome 53 และ Chrome 54 ตามลำดับ Safari จัดส่งการรองรับ Shadow DOM v1 ใน Safari 10 และได้ใช้งานองค์ประกอบที่กำหนดเอง v1 ใน WebKit เสร็จสมบูรณ์แล้ว ปัจจุบัน Firefox กำลังพัฒนา Shadow DOM และองค์ประกอบที่กำหนดเอง v1 โดยทั้ง Shadow DOM และ Custom Elements อยู่ในแผนกลยุทธ์สำหรับ Edge

หากต้องการกำหนดองค์ประกอบที่กำหนดเองใหม่โดยใช้การใช้งาน v1 ก็เพียงสร้างคลาสใหม่ที่ขยาย HTMLElement โดยใช้ไวยากรณ์ ES6 และลงทะเบียนกับเบราว์เซอร์ ดังนี้

class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);

ข้อมูลจำเพาะ v1 ใหม่มีประสิทธิภาพอย่างยิ่ง เราจึงได้รวบรวมบทแนะนำเกี่ยวกับการใช้ องค์ประกอบที่กำหนดเอง v1 และ Shadow DOM v1 เพื่อช่วยเริ่มต้นใช้งาน

webcomponents.org

นอกจากนี้ ชุมชน Web Element ยังเติบโตอย่างก้าวกระโดด เราตื่นเต้นที่จะได้เห็นการเปิดตัวเว็บไซต์ webcomponents.org เวอร์ชันอัปเดตที่เป็นหัวใจสำคัญของชุมชนคอมโพเนนต์เว็บ รวมถึงแคตตาล็อกที่ผสานรวมให้นักพัฒนาซอฟต์แวร์ได้แชร์องค์ประกอบของตัวเอง

webcomponents.org

เว็บไซต์ webcomponents.org มีข้อมูลเกี่ยวกับข้อกำหนดเกี่ยวกับคอมโพเนนต์ของเว็บ ข้อมูลอัปเดต และเนื้อหาจากชุมชนคอมโพเนนต์ของเว็บ รวมถึงแสดงเอกสารประกอบสำหรับองค์ประกอบโอเพนซอร์สและคอลเล็กชันองค์ประกอบที่นักพัฒนาซอฟต์แวร์รายอื่นๆ สร้างขึ้น

คุณเริ่มสร้างองค์ประกอบแรกโดยใช้ไลบรารีอย่าง Polymer ของ Google หรือจะใช้ Web Element API ระดับล่างโดยตรงก็ได้ จากนั้นเผยแพร่องค์ประกอบบน webcomponents.org

ขอให้สนุกกับการปรับแต่งภาพ