บทความ IT เจ๋งๆ

แม้ว่า Angular จะมีการปรับเปลี่ยนไปมาก แต่ Public API สำหรับการสร้าง Component ค่อนข้างมีความ Stable อยู่ และในบทความนี้จะอธิบายเกี่ยวกับวิธีการสร้าง Component ด้วย Version ใหม่ของ Angular โดยมีตัวอย่าง Code แสดงให้ดูด้วย เชื่อว่าจะเป็นประโยชน์สำหรับ Developer ที่ใช้งานหรือกำลังเรียนรู้ Angular อยู่

เริ่มต้นจากที่ไหนดี - Browser components

เริ่มต้นด้วยการดูว่า Browser Components ทำงานอย่างไร มาดูตัวอย่างของ Browser Native Component อย่าง select:

Component นี้ก็เหมือนกับ Browser Components ทั่วไปที่มี Properties ที่น่าสนใจ:

• เราไม่จำเป็นต้องเข้าใจถึง Internal Structure ของมัน เราเพียงแค่ต้องรู้ Public API ของมันเท่านั้น
• เราไม่จำเป็นต้องดูที่ส่วนอื่น ๆ ของ Application เพื่อให้รู้ว่า ส่วนนี้ทำอะไรและมันจะทำงานอย่างไร

Angular ช่วยให้เราสามารถสร้าง UI component ด้วยวิธีการแบบเดียวกับการสร้าง Component ของ Browser ซึ่งประกอบไปด้วยคุณสมบัติต่างๆ เหมือนกับ Component ของ Browser คือ Encapsulated, Reusable และ ง่ายแก่การทำความเข้าใจ

Component API ของ Angular โดยสรุป

นี่คือตัวอย่างของ Angular Component ซึ่งคือ Dropdown Component มันมีความคล้ายกับ select Component แต่ในตัวอย่างนี้ มีการ Support ใน Disabled Elements และ Features พิเศษอื่น ๆ :

และนี่คือสิ่งที่เกิดขึ้น:

• Component นี้มี Input Property คือ options ที่เราได้จัดเตรียมรายชื่อประเทศ (COUNTRIES) ไว้ให้ Properties เป็น Input ที่ Component ได้รับ และเราใช้มันเพื่อส่งผ่าน Input model ไปยัง Component และ View จะถูกสร้างขึ้นตาม model
• Component จะปล่อย Output Event ชื่อ selection ออกไป เมื่อมีการเลือก option ใหม่ Events ก็คือ Output ที่ Component สร้างขึ้น พวกมันรายงานให้ภายนอกทราบถึงการเปลี่ยนแปลงที่เกี่ยวข้องของสถานะภายในของ Component

โครงสร้างภายในของ Component

ทุก Component จะส่วนหลัก ๆ ภายในอยู่ 2 ส่วน:

• Internal Html/CSS Tree ที่ถูก Encapsulates ไว้ภายในตัว component ซึ่งบอกถึงส่วนประกอบและวิธีการสร้าง View
• Controller Class ซึ่งประสานการทำงานร่วมกันระหว่าง View และ Input Model

ด้วยสิ่งนี้ เราจะไปดูกันถึง 2 Concepts หลัก ๆ ของ Component (Properties และ Events) พร้อมทั้งตัวอย่างกัน

ทำความเข้าใจกับ Properties

มาเริ่มต้นกันที่ Properties ซึ่งจะมาแนะนำ color-me Component โดยจะสามารถใช้งานได้ดังตัวอย่างนี้:

และนี่ก็เป็นสิ่งที่มันแสดงออกมาให้เห็น:

เราจะเห็นได้ว่า color-me Component เป็น Input Box ที่เราสามารถพิมพ์ชื่อของสีลงไป และดูสีของมันดังในตัวอย่าง

วิธีการทำงานของ Properties

Component ดูมีความคล้ายคลึงกับ Browser Component แบบดั้งเดิม แต่ยกเว้นสัญลักษณ์ [sampleColor] ซึ่งหมายถึงคำว่า blue ถูกส่งผ่านเป็น Input Property ไปยัง Component

Input Property จะถูกผูกเข้ากับ Controller Property โดยอัตโนมัติ ดังนั้นเราสามารถใช้งานได้ภายใน Component

Component Controller

นี่คือวิธีการใช้งาน Controller ของ color-me Component:

เราจะเห็นว่า [sampleColor] ซึ่งเป็น Input Property ได้ถูกผูกไว้กับ Controller และถูกเปลี่ยนชื่อเป็น color โดยทั่วไป Property นี้มีอยู่ใน Controller ผ่านทางใช้ this.color มันใช้เป็นตัวอย่างในการเริ่มต้น View ด้วยสีในเบื้องต้น

Component View

นี่คือวิธีที่ Component View ถูกนำไปใช้ภายใน color-me.html :

และนี่คือสิ่งที่เกิดขึ้น:

• Local Variable Input จะถูกกำหนดขึ้นโดยใช้ #input
• Input Property value ของ Input Box ถูกกรอกด้วยชื่อสีผ่านการใช้ [value]="color"
• สี Background ของ CSS Property ถูกผูกเข้ากับ Value ของ Input Box ผ่านการใช้ [style.background] = "input.value"

เราจะเห็นได้ว่า Property ไม่เพียงแต่เป็นกลไกสำหรับการส่งผ่านข้อมูลภายใน Component เท่านั้น แต่ยังสามารถใช้เพื่อส่งค่าไปยัง Property ของ DOM Element อื่น ๆ ได้อีกด้วย ตัวอย่างเช่น Property input.value ซึ่งมี Input Text Field Value หรือ style.background ซึ่งประกอบด้วยสีของรูปสี่เหลี่ยมในตัวอย่าง

เมื่อใดที่สีจะถูกนำไปใช้

ในกรณีนี้ สีจะถูกนำไปใช้เมื่อ User พิมพ์ลงใน Input Box สิ่งนี้เกิดขึ้นเนื่องจากมี Event Listener ที่ผูกติดอยู่ภายใน Component บน keyup Event ซึ่งทำให้เกิดการตรวจจับการเปลี่ยนแปลงที่จะเกิดขึ้นเมื่อ User ทำการพิมพ์

ลองลบ (keyup) Listener ออกไป แล้วสีจะไม่ถูกนำไปใช้อีกต่อไป

เมื่อใดที่ไม่ควรใช้ Properties

Properties ก็เป็นเหมือนการส่งผ่าน Input Data ไปยัง Component ซึ่งอาจเปลี่ยนแปลงได้ตลอด เราควรหลีกเลี่ยงการใช้ Properties ในกรณีต่อไปนี้:

• เมื่อส่งผ่าน Constant String Values ไปยัง Component อย่างเช่นในตัวอย่างคือ [width]="100px" ซึ่งคุณสามารถใช้ Attribute annotation แทน
• เมื่อพยายามส่งผ่านคำสั่งไปยัง Component, การสั่งให้ Component ทำตามสิ่งที่กำหนดไว้ สิ่งนี้คุณจะต้องหลีกเลี่ยง เพราะมันจะสร้างการเชื่อมต่อที่แน่นหนาระหว่างตัวเรียกใช้ (Caller) คำสั่ง และ Component ของมันเอง ตามหลักการแล้ว Component ควรจะรับเฉพาะ Input Data และตอบสนองกลับเพียงเท่านั้น ผู้จัดเตรียมและส่ง Data ไปยัง Component ไม่ควรจะรู้ว่า Data ที่ถูกส่งไปนั้นจะถูกนำไปแสดงอย่างไร หรือไป Trigger Action อะไรบ้าง

Events

Concept หลัก ๆ ของ Component API ตัวถัดมา ก็คือ Events เริ่มต้นด้วยการมารู้จักกับ scroll-me Component:

และนี่คือสิ่งที่เกิดขึ้น:

Component นี้เป็นการเลื่อน (Scroll) List ขึ้นและลง เมื่อทำการคลิกปุ่ม (Button) ที่เกี่ยวข้องเท่านั้นเอง นี่คือ Template ของ Component และเราสามารถเห็น Click Event ที่ถูกผูกไว้บนปุ่มด้วย (click) = "expression" Syntax:

 

จากตัวอย่างนี้ เรากำลังเชื่อมโยงโดยตรงกับ DOM Property ผ่านการผูกกับ [scroll-top] การเชื่อมโยงนี้ช่วยให้เราสามารถเขียนไปยัง Javascript scrollTop Property ของ selection div ได้โดยตรง ซึ่งเป็นอีกตัวอย่างหนึ่งของวิธีที่ Angular สนับสนุนให้ใช้ DOM API โดยตรง

แต่คุณเห็นมันไหมว่า ที่ปุ่ม UP ไม่มีการเชื่อมโยงกับ (click) แต่ Component ยังคงใช้งานได้ ลองดูที่ Controller Code เพื่อดูว่าเกิดอะไรขึ้น:

เราจะเห็นได้ว่าใน Constructor ของ Component นั้น Event Listener ได้ถูกเพิ่มเข้าไปในปุ่ม UP แบบ Manual อันที่จริงก็ไม่มีอะไรพิเศษเกี่ยวกับ Code นั้น เป็นเพียง DOM API event subscription API ก็เท่านั้น

Angular Syntax สำหรับการเชื่อม Events ผ่าน (click) เป็นวิธีการสั้น ๆ ที่ทำเช่นเดียวกับใน Code นี้

Event จะถูกตรวจจับ (Detect) ได้อย่างไร

Event จะถูกตรวจจับ (Detect) ผ่านกลไกการตรวจจับการเปลี่ยนแปลงของ Angular ซึ่งจะ Run ในตอนท้ายของการเปิด Virtual Machine แต่ละครั้ง กลไกนี้มาจากพื้นฐานแนวคิดของ Zones หรือดู Video นี้ที่อธิบายถึงการทำงานของ Event และความสัมพันธ์ระหว่างพวกมันกับ Zones

สิ่งที่ควรทำและไม่ควรทำ (Do's & Dont's) สำหรับ Events

Event Mechanism นั้นง่ายต่อการนำไปใช้แบบผิด ๆ มากกว่า Properties Mechanism สำหรับ Properties เราต้องใช้ความพยายามทำบางอย่างเพิ่มเติมอีกนิดหน่อยเพื่อส่งผ่าน Command Object บางประเภทเพื่อ Trigger Action บางอย่างภายใน Object

สำหรับ Events แล้ว มันง่ายมากที่จะตกอยู่ในสถานการณ์ของการใช้ Events เพื่อ Trigger Action ใน Component ภายนอก สิ่งสำคัญที่ต้องคำนึงถึงเกี่ยวกับ Events คือเพื่อให้ Event Emitter แยกตัวออกจาก Subscriber, ตัว Emitter ควรรายงานเกี่ยวกับการเปลี่ยนแปลงสถานะภายในเท่านั้น: ตัวอย่างเช่น Selection จะเกิดขึ้นใน Dropdown Component

ด้วยวิธีนี้ การปล่อย Component ยังคงแยกออกจาก Event Subscribers และไม่มีข้อมูลใด ๆ เกี่ยวกับสิ่งที่ Event ถูกใช้เพื่อทำอะไร

สรุป

Angular API นั้นเรียนรู้ได้ง่ายกว่ามากและใช้งานได้อย่างถูกต้องมากกว่า Angular 1 API เนื่องจากมี Concept ที่น้อยกว่ามากและเข้าใจง่ายกว่า

Components ถูกแยกออกได้ดีกว่า และหากแนวคิดของ Properties และ Events สามารถนำไปใช้ได้เป็นอย่างดี มันง่ายกว่าที่จะเขียน Components ที่สามารถใช้งานได้อย่างแท้จริงซึ่งสามารถเข้าใจได้ง่ายเพียงแค่ดู HTML Template

ในการเริ่มต้นลองใช้ Angular component API คุณสามารถค้นหา Code ทั้งหมดได้จากที่นี่ หรือคัดลอก angular2-seed repository เพื่อเริ่มต้น Project ที่ Clean และพร้อมใช้งาน

ที่มา:  https://blog.angular-university.io/