อย่างไรและเหตุใดจึงต้องใช้การมอบหมายกิจกรรม JavaScript

เรียนรู้ว่าอะไร เหตุใด และวิธีการใช้วิธีการมอบสิทธิ์เหตุการณ์ใน JavaScript

Javascript Event Delegation คืออะไร และเมื่อใดที่คุณควรใช้

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

คุณจะเห็นว่าทำไมสิ่งนี้ถึงทรงพลังในเวลานี้

สมมติว่าคุณมีรายการของรายการอยู่ภายในรายการ เมื่อผู้ใช้คลิกที่รายการใดรายการหนึ่ง คุณต้องการให้บางอย่างเกิดขึ้น

มาดูวิธีการที่แตกต่างกัน 2 วิธีกัน

แนบ Listener เหตุการณ์ไปยังแต่ละองค์ประกอบ

วิธีทั่วไปในการเข้าถึงองค์ประกอบแต่ละรายการในรายการคือการวนซ้ำ ด้วย for ห่วง แล้วแนบ Listener เหตุการณ์กับแต่ละองค์ประกอบ:

let allExerciseItems = document.querySelectorAll(".exercise-item")

for (let exerciseItem of allExerciseItems) {
 exerciseItem.addEventListener("click", function(event) {
  // Do something with target child element
  event.target.classList.toggle("exercise-complete")
 });
}

ตัวอย่าง

https://codepen.io/StrengthandFreedom/pen/KBZezV/

เข้าถึงรายการด้วยการมอบหมายกิจกรรม

การมอบหมายงานจะแตกต่างจากตัวอย่างลูป for ที่คุณเห็นด้านบนโดยสิ้นเชิง แทนที่จะวนซ้ำ (วนซ้ำ) ผ่านแต่ละองค์ประกอบที่เราต้องการเข้าถึง เราเพียงแค่กำหนดเป้าหมายองค์ประกอบหลักดังนี้:

// Get parent element, add a click event listener
document.querySelector(".exercise-list").addEventListener("click", function(event) {
  if(event.target.classList.contains('exercise-item')) {
  // Do something with target child element
  event.target.classList.toggle('exercise-complete')
  }
})

ตัวอย่าง CodePen หมายเหตุ:แทนที่จะเป็น classList.contains คุณสามารถใช้ element.matches API matches() หากคุณต้องการตัวเลือกที่ยืดหยุ่นมากขึ้น

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

เหตุใดคุณจึงควรใช้วิธีการมอบหมายเหตุการณ์แทนการจัดการเหตุการณ์ + สำหรับวิธีวนซ้ำ

มาพูดคุยกันต่อไป!

การมอบหมายงานและประสิทธิภาพ

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

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

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

ฉันไม่ค่อยรู้เรื่อง GC (Garbage Collection) มากนัก ฉันมีความหรูหราในการเขียน JavaScript เพียงอย่างเดียวไม่มากก็น้อย (ภาษาโปรแกรมระดับสูง) แต่สิ่งหนึ่งที่ฉันรู้คือ GC ในเบราว์เซอร์อาจคาดเดาไม่ได้เนื่องจากมีเบราว์เซอร์ของผู้จำหน่ายที่แตกต่างกันมากมาย (Chrome, FireFox เป็นต้น) และแน่นอน อุปกรณ์จำนวนนับไม่ถ้วน (สมาร์ทโฟน แล็ปท็อป ฯลฯ)

การเก็บขยะ

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

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

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