ข้อดีและข้อเสียของ Method Chaining ใน JavaScript
แม้ว่าการเขียนแบบ Chaining จะช่วยทำให้โค้ดสั้นลง
แต่ในกรณีส่วนใหญ่ การนำตัวแปรมาใช้งาน
กลับสะดวกกว่า ลองเปรียบเทียบสองตัวอย่างนี้ -
ตอนนี้ฉันได้เพิ่มตัวแปร elem และสามารถ
กำหนดแอตทริบิวต์ได้มากเท่าที่ต้องการ โดยที่
querySelector ถูกเรียกเพียง
ครั้งเดียว:
let elem = document.querySelector('#elem');
elem.value = 'www';
elem.type = 'submit';
แต่ในตัวอย่างนี้ ฉันไม่ได้เพิ่มตัวแปรใหม่ ดังนั้น
จึงต้องเรียก querySelector
ถึงสองครั้ง:
document.querySelector('#elem').value = 'www';
document.querySelector('#elem').type = 'submit';
ในความคิดของฉัน โค้ดนี้ดูซับซ้อนขึ้น แม้ว่า
จะใช้บรรทัดน้อยกว่ากันหนึ่งบรรทัด นอกจากนี้
หากฉันต้องการเปลี่ยนค่า id
จาก 'elem' เป็นค่าอื่น ฉันจะต้อง
แก้ไขในหลายตำแหน่ง ซึ่งไม่สะดวกเท่าไหร่
ยังมีปัญหาอีกอย่างหนึ่งคือ โหลดของเบราว์เซอร์
การค้นหาอิลิเมนต์ในหน้าเว็บที่ทำโดย
เมธอด querySelector นั้นเป็น
การทำงานที่ค่อนข้างช้า (และการทำงานใดๆ
กับอิลิเมนต์ของหน้าเว็บก็เป็นการทำงานที่ช้าทั้งสิ้น
- โปรดจำเรื่องนี้ไว้)
ในกรณีของเรา หากเราใช้
querySelector ทุกครั้ง เบราว์เซอร์จะ
ประมวลผล HTML หน้าเว็บและค้นหา
อิลิเมนต์ด้วย id ที่กำหนดหลายครั้ง
(ไม่สำคัญว่า id จะเหมือนกันหรือไม่ - เบราว์เซอร์
จะดำเนินการทั้งหมดหลายครั้ง) ทำให้เกิด
การทำงานที่เปล่าประโยชน์ซึ่งอาจทำให้
การทำงานของเบราว์เซอร์ช้าลงได้
แต่หากเราใช้ตัวแปร elem
- จะไม่เกิดการค้นหาในหน้าเว็บใดๆ
(อิลิเมนต์ถูกค้นหาแล้วและลิงก์ไปยังมันถูกเก็บไว้
ในตัวแปร)
โค้ดต่อไปนี้ถูกกำหนดให้:
<img id="image" src="avatar.png" width="300" height="500">
console.log(document.querySelector('#image').src);
console.log(document.querySelector('#image').width);
console.log(document.querySelector('#image').height);
ระบุข้อเสียของโค้ดนี้ และแก้ไขข้อเสียเหล่านั้น
