บทความ IT เจ๋งๆ
แนะนำ 5 Function Decorators สำหรับมือใหม่
25-ก.ค.-18
คัมภีร์เทพ IT
สำหรับมือใหม่ที่เพิ่งหัดใช้ JavaScript แล้ว การจะใช้งาน Function ต่างๆ อาจจะยังไม่ค่อยคล่องนัก วันนี้ทีมงานมีบทความที่แนะนำ 5 Function Decorator สำหรับผู้ที่ยังเป็นมือใหม่กันครับ แม้มือเก๋าแล้วก็ยังสามารถนำไปใช้กันได้นะครับ
Function Decorator ถือเป็น High-Order Function ซึ่งใช้ Function เป็น Argument และ Return เป็น Function อื่น รวมทั้ง Function ที่ถูก Return จะเป็น Variation ของ Argument Function งั้นเรามาดูกันว่า 5 Function Decorators ใน Libraries อย่าง underscore.js, lodash.js หรือ ramda.js มีอะไรบ้าง
1. Once()
once(fn) : เป็นการสร้าง Version ของ Function ที่ Execute เพียงครั้งเดียว มันใช้ประโยชน์สำหรับ Function เริ่มต้น ซึ่งเราต้องการให้แน่ใจว่ามัน run เพียงครั้งเดียว ไม่ว่าจะถูกเรียกใช้จากที่อื่นกี่ครั้งก็ตาม
once() เป็น Function ที่ Return Function อื่น โดย Function ที่ถูก Return อย่าง runOnce() ก็คือ Closure สิ่งสำคัญคือต้องทราบว่า Original Function ถูกเรียกใช้อย่างไร ในที่นี่คือส่งผ่านค่าปัจจุบันของ this และ arguments ทั้งหมด : fn.apply (this, arguments)
2. After()
after(count, fn) : เป็นการสร้าง Version ของ Function ที่ Execute เฉพาะหลังจากมีการเรียกใช้แล้วเท่านั้น อย่างเช่น เราจะใช้เมื่อตอนเราต้องการให้แน่ใจว่า Function จะ Run เฉพาะหลังจากที่ Asynchronous tasks ทั้งหมดเสร็จสิ้นแล้ว
หมายเหตุ: จากตัวอย่างด้านบน เราใช้ after() ในการสร้าง Function ใหม่อย่าง logResultAfter2Calls() ซึ่งจะ Execute ตัว Original Code ของ logResult() เฉพาะหลังจากมีการเรียกใช้ครั้งที่ 2 แล้ว
3. Throttle()
throttle(fn, wait) : เป็นการสร้าง Version ของ Function ที่ เมื่อมีการเรียกใช้งานซ้ำๆ จะเรียกใช้ Original Function 1 ครั้งต่อทุกๆ มิลลิวินาที มันใช้ประโยชน์สำหรับการจำกัด Event ที่เกิดขึ้นอย่างรวดเร็ว
ในตัวอย่างนี้ การเลื่อน Mouse จะสร้าง Event ของ mousemove เป็นจำนวนมาก แต่การเรียกของ Original Function Process() จะเกิดขึ้นเพียงครั้งเดียวต่อวินาที
4. Debounce()
debounce(fn, wait) : เป็นการสร้าง Version ของ Function ที่ เมื่อมีการเรียกใช้งานซ้ำๆ จะเรียกใช้ Original Function หลังจากรออยู่มิลลิวินาทีหลังจากการเรียกใช้ครั้งล่าสุด มันใช้ประโยชน์สำหรับการ Run Function หลังจากที่ Event บางอย่างได้หยุดไปแล้ว
Events โดยทั่วไปที่นำมาพิจารณา ในที่นี้มีทั้ง scroll , resize , mousemove หรือ keypress
Partial Application
Partial application หมายถึง กระบวนการกำหนดจำนวน Argument ของ Function มันเป็นวิธีที่ไปจาก Generalization สู่ Specialization
5. Partial()
ตอนนี้เรามา สร้าง partial() method ซึ่งจะพร้อมใช้งานสำหรับทุก Function ในที่นี้จะมีการใช้ ECMAScript 6 rest parameters syntax ...leftArguments แทนที่จะใช้ arguments object เพราะเราต้องการนำ Array มาต่อกันแต่ arguments ไม่ได้เป็น Array object
ข้อสังเกตคือ เราสร้าง Function logInfo () ที่ต้องการเพียง Parameter เดียว (message)
สรุป
การสร้าง Function Decorators เหล่านี้เพื่อใช้งานเอง จะช่วยทำให้เราเข้าใจวิธีการทำงานของ Decorator มากขึ้น โดย Function Decorators ถือเป็นเครื่องมือที่มีประสิทธิภาพมากในการสร้างรูปแบบของ Function ที่มีอยู่ โดยไม่ต้องไปแก้ไข Original Function
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความที่เกี่ยวข้อง