กลยุทธ์การตรวจจับการเปลี่ยนแปลงเชิงมุม: OnPush & กลยุทธ์เริ่มต้น

การตรวจจับการเปลี่ยนแปลงเรียกว่ากลไกที่ตรวจสอบกับสถานะปัจจุบันกับสถานะใหม่ ความแตกต่างระหว่างสองสถานะบ่งชี้ว่ามีการเปลี่ยนแปลงที่จำเป็นต้องได้รับการอัปเดต หมายความว่าต้องอัปเดตข้อมูลพร็อพเพอร์ตี้ด้วยการเปลี่ยนแปลงข้อมูล

การเปลี่ยนแปลงใดๆ ที่เกิดขึ้นในส่วนประกอบระหว่างการเปลี่ยนแปลงในแอปจะถูกตรวจพบผ่าน Angular 2+ เมื่อใดก็ตามที่มีการเปลี่ยนแปลงแบบจำลอง การเปลี่ยนแปลงที่เกี่ยวข้องจะถูกตรวจพบโดยเชิงมุมและมุมมองจะได้รับการอัปเดตทันที การเปลี่ยนแปลงนี้เรียกว่าการตรวจจับการเปลี่ยนแปลงในเชิงมุม

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

การเปลี่ยนแปลงในแบบจำลองเชิงมุมอาจเกิดจากสาเหตุใดๆ ต่อไปนี้:

• เหตุการณ์ DOM (คลิก วางเมาส์เหนือ ฯลฯ)
• คำขอ AJAX
• ตัวจับเวลา (setTimer(), setInterval())

ข้อกำหนดเบื้องต้น

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

เปลี่ยนการตรวจจับในเชิงมุม

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

ดังนั้น สองขั้นตอนคือ:

• อัปเดตรูปแบบแอปพลิเคชัน (ผู้พัฒนา);
• สะท้อนสถานะของโมเดลในมุมมอง (Angular)

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

เปลี่ยนกลยุทธ์การตรวจจับ

มีกลยุทธ์ การตรวจจับการเปลี่ยนแปลงเชิงมุม สอง แบบคือกลยุทธ์เริ่มต้นและ onPush

กลยุทธ์เริ่มต้น

• การเปลี่ยนแปลงในแบบจำลองจะถูกตรวจสอบโดยเชิงมุมเพื่อให้แน่ใจว่าการเปลี่ยนแปลงทั้งหมดในแบบจำลองนั้นได้รับการบันทึก ความแตกต่างระหว่างสถานะใหม่และสถานะก่อนหน้านั้นตรวจสอบด้วยมุม
• สำหรับข้อมูลพร็อพเพอร์ตี้ที่จะอัปเดต angular ควรมีสิทธิ์เข้าถึงค่าใหม่ จากนั้นจึงนำไปเปรียบเทียบกับค่าเดิม ตามนี้ การตัดสินใจจะทำการปรับปรุงมุมมองหรือไม่
• ดังนั้น ในกลยุทธ์เริ่มต้น มุมจะหมุนรอบคำถามที่ว่ามีการเปลี่ยนแปลงในค่าหรือไม่
• ไม่มีการสันนิษฐานว่าส่วนประกอบขึ้นอยู่กับที่ใด เป็นกลยุทธ์อนุรักษ์นิยมที่จะตรวจสอบทุกครั้งที่มีการเปลี่ยนแปลงที่เกี่ยวข้อง การตรวจสอบจะดำเนินการกับเหตุการณ์ เวลา คำสัญญา และ XHR ของเบราว์เซอร์
• กลยุทธ์นี้อาจเป็นปัญหาเมื่อต้องพิจารณาแอปพลิเคชันขนาดใหญ่ด้วยองค์ประกอบหลายอย่าง
• โดยค่าเริ่มต้น จะใช้ กลยุทธ์ ChangeDetectionStrategy.Default

แทนที่กลไกเริ่มต้นของเบราว์เซอร์

• API ระดับต่ำจำนวนมากจะถูกแพตช์โดยเชิงมุมในเวลาเริ่มต้น API เหล่านี้อาจเป็น addEventListener ฟังก์ชัน เบราว์เซอร์ที่ใช้สำหรับลงทะเบียนกิจกรรมการท่องเว็บ
• addEventListener จะถูกแทนที่ด้วย angular ด้วยเวอร์ชันที่ใหม่กว่า ซึ่ง ทำงานเหมือนกับเวอร์ชันก่อนหน้า
• เพิ่มฟังก์ชันการทำงานเพิ่มเติมให้กับตัวจัดการเหตุการณ์โดย addEventListener เวอร์ชัน ใหม่ UI ได้รับการอัปเดตหลังจากเรียกใช้การตรวจสอบประสิทธิภาพด้วยมุม

การทำงาน

ไลบรารีที่มาพร้อมกับ Zone.js จะทำการแพตช์ API ของเบราว์เซอร์ในระดับต่ำ

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

1. เหตุการณ์ของเบราว์เซอร์ เช่น การคลิก เป็นต้น
2. setInterval() และ setTimeout()
3. คำขอของ Ajax HTTP

• เพื่อทริกเกอร์การตรวจจับการเปลี่ยนแปลงในเชิงมุม Zone.js ใช้เพื่อแก้ไข API หลายตัวของเบราว์เซอร์อื่นเช่น Websockets
• ข้อจำกัดของวิธีนี้คือ: หาก Zone.js ไม่รองรับ API ของเบราว์เซอร์ ก็จะไม่มีการทริกเกอร์ระหว่างการตรวจจับการเปลี่ยนแปลง

การ ตรวจจับการเปลี่ยนแปลงเชิงมุม ทำงาน อย่างไร เมื่อมีการทริกเกอร์การตรวจจับการเปลี่ยนแปลง

การเปลี่ยนแปลงที่ทริกเกอร์จะถูกตรวจจับผ่านตัวตรวจจับการเปลี่ยนแปลง ตัวตรวจจับการเปลี่ยนแปลงนี้สร้างขึ้นในช่วงเวลาเริ่มต้นของแอปพลิเคชัน ตัวอย่างของ องค์ประกอบ TodoItem สามารถพิจารณาได้ เหตุการณ์จะถูกปล่อยออกมาเมื่อได้รับ Todo ของอ็อบเจ็กต์โดยคอมโพเนนต์ หากสถานะของ Todo ถูกสลับ เรียนรู้เพิ่มเติมเกี่ยวกับวิธีการรันโปรเจ็กต์เชิงมุม

การทำงานของกลไกตรวจจับการเปลี่ยนแปลงเริ่มต้น

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

• การมีความแตกต่างในมูลค่าของคุณสมบัติจะตั้งค่าเป็นจริง ของ กลยุทธ์ OnPush
• ในการใช้ กลยุทธ์ onPush เชิงมุมไม่จำเป็นต้องคาดเดาว่าจะต้องดำเนินการตรวจสอบเมื่อใด
• ขึ้นอยู่กับการเปลี่ยนแปลงในการอ้างอิงอินพุตหรือเหตุการณ์ที่เกิดจากส่วนประกอบเอง angular จะทำการตรวจสอบการเปลี่ยนแปลง
• นอกจากนี้ยังสามารถขอให้เชิงมุมทำการตรวจสอบการเปลี่ยนแปลงได้อย่างชัดเจน ทำได้โดยใช้วิธีการ componentRef.markForCheck()
• ส่วนประกอบระหว่างกลยุทธ์นี้จะขึ้นอยู่กับปัจจัยนำเข้าเท่านั้น กลยุทธ์การตรวจจับการเปลี่ยนแปลงจะดำเนินการก็ต่อเมื่อ:
• มีการเปลี่ยนแปลงในการอ้างอิงอินพุต
• มีการเปลี่ยนแปลงที่เกี่ยวข้องในส่วนประกอบของแบบจำลองหรือส่วนย่อยใดๆ
• เมื่อต้องทำการตรวจจับการเปลี่ยนแปลงอย่างชัดแจ้ง
• เมื่อใช้ไพพ์ async ในมุมมอง
• เมื่อเทียบกับกลยุทธ์เริ่มต้น กลยุทธ์ onpush ส่วนใหญ่หมุนรอบคำถามสองข้อ ได้แก่ :
• มีการเปลี่ยนแปลงประเภทการอ้างอิงหรือไม่?
• หากมีการเปลี่ยนแปลงในการอ้างอิงของประเภทการอ้างอิง มีค่าของหน่วยความจำฮีปเปลี่ยนแปลงหรือไม่
• ป้องกันการตรวจสอบส่วนประกอบและส่วนประกอบย่อยโดยไม่จำเป็น

การใช้กลยุทธ์ onPush สำหรับส่วนประกอบ

เฉพาะเมื่อมีการส่งการอ้างอิงใหม่เป็น ค่า @Input() จะทริกเกอร์การตรวจจับการเปลี่ยนแปลง ค่าอาจเป็นชนิดพื้นฐาน เช่น ตัวเลข บูลีน สตริง และค่าว่าง สามารถใช้อาร์เรย์และวัตถุได้ ไม่สามารถใช้อ็อบเจ็กต์หรืออาร์เรย์ที่ดัดแปลงเพื่อทริกเกอร์การตรวจจับการเปลี่ยนแปลงบนองค์ประกอบ onPush c เนื่องจากไม่ได้สร้างการอ้างอิงใหม่ ดังนั้น วัตถุใหม่หรือการอ้างอิงอาร์เรย์จะถูกส่งต่อเพื่อทริกเกอร์ตัวตรวจจับที่ตรวจพบการเปลี่ยนแปลง



เพื่อหลีกเลี่ยงจุดบกพร่องในวิธีการตรวจจับการเปลี่ยนแปลง แอปพลิเคชันสามารถสร้างขึ้นโดยใช้ การตรวจจับการเปลี่ยนแปลง onPush ได้ทุกที่ผ่านการใช้วัตถุและรายการที่ไม่เปลี่ยนรูป การปรับเปลี่ยนวัตถุที่ไม่เปลี่ยนรูปสามารถทำได้โดยการสร้างการอ้างอิงวัตถุใหม่ และด้วยเหตุนี้:

• สำหรับการเปลี่ยนแปลงทุกครั้ง การ ตรวจหาการเปลี่ยนแปลง onPush จะถูกทริกเกอร์
• การอ้างอิงวัตถุใหม่จะถูกสร้างขึ้นเสมอซึ่งป้องกันสาเหตุของจุดบกพร่อง

ในกรณีเช่นนี้ คุณสามารถใช้ Immutable.js ได้เนื่องจากมีโครงสร้างข้อมูลที่ไม่เปลี่ยนรูปแบบสำหรับอ็อบเจกต์ (แผนที่) และรายการ (รายการ)

• การเพิ่ม พารามิเตอร์ changeDetection ในคำอธิบายประกอบของคอมโพเนนต์จะเป็นการนำกลยุทธ์ onPush ไปใช้ แทนที่จะส่งการอ้างอิงใหม่ทุกครั้ง ChangeDetectorRef สามารถใช้สำหรับการควบคุมทั้งหมดได้

ChangeDetectorRef.detectการเปลี่ยนแปลง()

• วิธีการตรวจหาการเปลี่ยนแปลงสามารถแนบหรือถอดออกได้ด้วยตนเองโดยใช้วิธีการ ถอด และ ต่อใหม่อีกครั้ง ใน changeDetectorRef

ChangeDetectorRef.detach() และ ไม่เปลี่ยนรูป.js

เมื่อใช้กลยุทธ์ onPush สำหรับการตรวจจับการเปลี่ยนแปลง จะ เป็นความคิดที่ดีเสมอหากมีการบังคับใช้ความไม่เปลี่ยนรูป ในกรณีเช่นนี้ จะใช้ Immutable.js

immutable.js เป็นไลบรารีที่สร้างขึ้นเพื่อรวมเอาความไม่เปลี่ยนรูปใน JavaScript เข้ากับโครงสร้างข้อมูลที่ไม่เปลี่ยนรูป เช่น List, Stack และ Map

ในการเพิ่ม Immutable.js ในโปรเจ็กต์ ต้องใช้คำสั่งต่อไปนี้ในเทอร์มินัล เรียนรู้เพิ่มเติมเกี่ยวกับโครงการเชิงมุม

$ npm ติดตั้งไม่เปลี่ยนรูป – บันทึก

ในการนำเข้าโครงสร้างข้อมูลจาก Immutable.js ต้องใช้คำสั่งต่อไปนี้ คำสั่งแสดงการนำเข้าเฉพาะโครงสร้างข้อมูลรายการและแมปในกรณีนี้

นำเข้า {Map, List} จาก 'ไม่เปลี่ยนรูป' สามารถใช้อาร์เรย์ได้

นอกจากนี้ หากใช้ Immutable.js จะมีข้อเสียบางประการที่เกี่ยวข้อง

• การใช้ API นั้นค่อนข้างยุ่งยาก
• ไม่สามารถใช้อินเทอร์เฟซกับโมเดลข้อมูลได้ เนื่องจากไลบรารี Imutable.js ไม่รองรับอินเทอร์เฟซใดๆ

เรียนรู้ หลักสูตรซอฟต์แวร์ออนไลน์ จากมหาวิทยาลัยชั้นนำของโลก รับโปรแกรม PG สำหรับผู้บริหาร โปรแกรมประกาศนียบัตรขั้นสูง หรือโปรแกรมปริญญาโท เพื่อติดตามอาชีพของคุณอย่างรวดเร็ว

สรุป

บทความนี้แนะนำคุณเกี่ยวกับกลไกการตรวจจับการเปลี่ยนแปลงและกลยุทธ์ Angular จะทำการตรวจจับการเปลี่ยนแปลงในส่วนประกอบทั้งหมดโดยค่าเริ่มต้น นอกจากนี้ยังสามารถใช้ ChangeDetectorRef เพื่อตรวจจับการเปลี่ยนแปลงในข้อมูลอ้างอิงใหม่เมื่อข้อมูลถูกกลายพันธุ์ ความต้องการพัฒนาเชิงมุมเพิ่มขึ้นเรื่อยๆ ซึ่งส่งผลให้เงินเดือนนักพัฒนาเชิงมุมในอินเดียเพิ่มขึ้น

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเทคโนโลยีซอฟต์แวร์ การพัฒนา และกลไกเบื้องหลัง คุณสามารถตรวจสอบหลักสูตร Executive PG Program in Software Development – ​​Specialization in Full Stack Development ที่นำเสนอโดย upGrad หลักสูตรเฉพาะทางเป็นโปรแกรมออนไลน์ 23 สัปดาห์ซึ่งมีกรณีศึกษามากกว่า 300 รายการเพื่อเพิ่มพูนความรู้และเครื่องมือที่มีอยู่และภาษาการเขียนโปรแกรมเพื่อพัฒนาทักษะการปฏิบัติของคุณ หากคุณมีคำถามเพิ่มเติมเกี่ยวกับหลักสูตร ส่งข้อความหาเรา ทีมงานของเราจะติดต่อกลับหาคุณ

กลยุทธ์การตรวจจับการเปลี่ยนแปลงที่แตกต่างกันใน Angular มีอะไรบ้าง

Angular นำเสนอกลยุทธ์การตรวจจับการเปลี่ยนแปลงหลายอย่างเพื่อปรับประสิทธิภาพของการตรวจจับการเปลี่ยนแปลงให้เหมาะสมที่สุด อย่างไรก็ตาม กลยุทธ์เริ่มต้นมีชื่อว่า การตรวจหา ในระหว่างกระบวนการนี้ Angular จะเดินต้นไม้ของส่วนประกอบทั้งหมดจากรากไปยังส่วนประกอบย่อย ทุกครั้งที่ต้นไม้เปลี่ยนแปลง Angular จะแจ้งส่วนประกอบด้วยการเรียกเมธอด _detectChanges สำหรับส่วนประกอบที่ใช้กลยุทธ์การตรวจจับการเปลี่ยนแปลง OnPush Angular จะไม่เดินสำรวจต้นไม้ทั้งหมดในแต่ละครั้ง แต่จะเปรียบเทียบค่าปัจจุบันและค่าก่อนหน้าของคุณสมบัติข้อมูล และเรียกใช้เมธอด _detectChanges เมื่อมีการเปลี่ยนแปลงเท่านั้น โดยค่าเริ่มต้น Angular จะใช้กลยุทธ์ที่เดินทั้งต้นไม้

คำสั่งในเชิงมุมคืออะไร?

Directives ใน Angular เป็นส่วนประกอบที่ใช้ซ้ำได้ คำสั่งอนุญาตให้ขยายคำศัพท์ HTML และทำให้เป็นไดนามิกมากขึ้น เป็นแนวคิดใหม่ที่นำมาใช้ใน Angular เพื่อขยายส่วนต่อประสานผู้ใช้ คำสั่งเป็นส่วนประกอบชนิดพิเศษ ซึ่งสามารถใช้เป็นแอตทริบิวต์ องค์ประกอบ หรือคลาสได้ หากส่วนประกอบถูกใช้เป็นองค์ประกอบ จะเรียกว่าคำสั่งองค์ประกอบ หากใช้เป็นแอตทริบิวต์ จะเรียกว่าคำสั่งแอตทริบิวต์ และหากใช้เป็นคลาส ก็จะเรียกว่าคำสั่งระดับ มีคำสั่งในตัวประมาณ 11 คำสั่งที่จัดทำโดย Angular เช่น ng-repeat, ng-show, ng-controller เป็นต้น Angular ยังจัดเตรียมสิ่งอำนวยความสะดวกในการสร้างคำสั่งที่กำหนดเอง

ตัวกรองใน Angularjs คืออะไร?

AngularJS มีตัวกรองหลายตัวนอกเหนือจากตัวกรองที่เบราว์เซอร์จัดเตรียมให้ ตัวกรองถูกใช้อย่างเข้มงวดในการจัดรูปแบบข้อมูลก่อนที่จะแสดงให้ผู้ใช้เห็น ขอแนะนำให้กรองข้อมูลโดยใช้ตัวกรองเสมอ เพื่อให้ผู้ใช้เห็นข้อมูลเดียวกันทุกครั้ง ตัวกรองยังสามารถใช้เพื่อทำให้การตรวจสอบข้อมูลมีประสิทธิภาพมากขึ้น ตัวกรอง Angular.js อนุญาตให้คุณนำ HTML บางส่วนและจัดการมันตามที่คุณต้องการ เช่น ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก ฯลฯ ตัวกรองช่วยให้คุณใช้อาร์เรย์ของค่าและสร้างรายการของอ็อบเจ็กต์ตามค่าต่างๆ