บทความ IT เจ๋งๆ
ตัวอย่างการ Refactor Code ของ JavaScript โดยใช้ Class
07-ก.ย.-18
คัมภีร์เทพ IT
การ Refactor Code น่าจะเป็นสิ่งที่ Programmer เคยเจอกันมาแทบทุกคน ซึ่งการ Refactor สามารถทำได้หลากหลายวิธี แต่สำหรับบทความนี้จะแสดงตัวอย่างการ Refactor Code ใน JavaScript ของ JavaScript โดยใช้ Class ที่ถ่ายทอดโดย Amber Wilkie เชื่อว่าน่าจะเป็นประโยชน์สำหรับคนไอทีในการนำไปประยุกต์ใช้ในการทำงาน
การ Refactor โดยทั่วไป
จากตัวอย่างการ Refactor คุณต้องการ Take Function ใน Component และ Move ไปยังตัว Helper อื่น:
From:
To:
And:
จากตัวอย่างดังกล่าว มันดูไม่เข้าท่าสักเท่าไหร่ แต่คุณจะเห็นขั้นตอนคร่าวๆ ดังนี้:
- ดึง function ของคุณออกไปไว้อีก file นึง
- ทำการ Import function นั้นและเรียกใช้งานมันเหมือนปกติ
เมื่อเริ่มเจอกับความซับซ้อนที่มากกว่านี้ เช่น การส่งค่า Parameters(Object, Function) ต่างๆ ไปยัง Function นั้นเพื่อให้ Function แก้ไข State ของ Object บางตัว เป็นต้น หรืออย่างตอนนี้เอง Amber กำลังเจอปัญหากับการดึง 3 Functions ออกจาก Component และ Function เหล่านั้นรับ Parameter ที่เหมือนกัน (resource และ function ในการ update resource)
การ Refactoring ด้วย Class
หากคุณต้องการดู Demo ของบทความนี้ สามารถดู Code ได้ใน Github การ Commit ในขั้นแรกจะแสดงให้เห็นถึงการทำงานทั้งหมดภายใน Component หลัก (App.js) และหลังจากนั้นจะ Commit การ Refactor Code โดยใช้ Class
คุณสามารถ Run หรือทำอะไรตามที่ต้องการได้ด้วยตัวคุณเอง แต่อย่าลืมติดตั้ง Yarn ด้วย
เราเริ่มต้นด้วย Component ที่ "Fetch" Object (เลียนแบบวิธีที่เราอาจทำสิ่งนี้จาก API) ด้วย Attribute บางอย่าง: Repeat (จำนวนกล่อง), Side (ความสูงและความกว้าง), Text, Color จากนั้นเราก็มีหลายวิธีที่จะจัดการมุมมอง เช่น การเปลี่ยนสี, อัปเดตข้อความ และอื่นๆ หลังจากการเปลี่ยนแปลงแต่ละครั้ง ก็จะแสดงข้อความออกมา
จากตัวอย่าง นี่คือ Method ที่ใช้เปลี่ยนแปลงความกว้างและความสูง:
เราอาจมี Method อื่นๆ ที่ต้องใช้การ Action ที่คล้ายคลึงกันหรือบางทีอาจแตกต่างกันไป อาจเริ่มคิดเกี่ยวกับการ Extract Code นี้ไปให้ Helper จากนั้นเราจะสร้าง Method ที่แตกต่างออกไปเพื่อเรียกใช้ setState action และเราต้องส่ง this.fetchObject ซึ่งเป็น Object ใน State และ side ที่เรากำลังรับเป็น Argument ให้กับ Method ถ้าเรามีหลาย Method ที่คล้ายๆ กัน นั่นอาจมี Parameter ที่ส่งผ่านมาจำนวนมากและอาจไม่ใช่สิ่งที่เป็นประโยชน์ (หรือสามารถอ่านได้ง่ายๆ)
แทนที่เราจะทำแบบนั้น เราสามารถใช้ Class ที่มี constructor ที่รับ parameter ที่ต้องรับส่งบ่อยๆ เหล่านั้นไว้บางส่วน เพื่อลดการรับส่ง parameter ลงและทำให้ code อ่านได้เข้าใจง่ายมากขึ้น ดังตัวอย่างด้านล่าง
วิธีนี้จะช่วยให้เราสามารถสร้าง Object ของ Function ซึ่งเราอาจจะเรียกใช้ใน Component หลักของเรา:
นี่เป็นการสร้าง Object Manipulator ในที่นี้คือ ObjectManipulator class เมื่อเราเรียก manipulator.changeSide(object, '800') มันจะ Run changeSide method ตามที่เรากำหนดไว้ข้างต้น ไม่จำเป็นต้องผ่านใน updateMessage หรือวิธีการอื่นใดเลย เราเลือกมันจาก Constructor เมื่อเราสร้าง Instance
คุณสามารถจินตนาการได้ว่า สิ่งนี้จะมีประโยชน์มาก ถ้าเรามี Method มากมายเหล่านี้ในการจัดการ อย่างในกรณี เราต้องการเรียกใช้ .then(res => myFunction(res) หลังจากที่พยายาม Extract การกำหนด myFunction บน class instance แทนที่จะผ่านมันไปในแต่ละ Function ซึ่งมันช่วยให้ชีวิตง่ายขึ้นมาก
ทำทุกอย่างให้เป็นระบบระเบียบ
วิธีการ Refactor Code โดยการใช้ Class จะทำให้สิ่งต่างๆ แลดูเป็นระบบระเบียบมากขึ้น เช่น เรามี Array ของ Color ที่เราจับคู่กับปุ่มของสีต่างๆ ตามที่เห็นในตัวอย่าง ด้วยการย้าย Constant ไปใน ObjectManipulator จะทำให้เราแน่ใจได้ว่า มันจะไม่ไปปะปนกับสีอื่นๆ ในส่วนที่เหลือของ App:
นอกจากนี้ยังสามารถใช้ manipulator.colors เพื่อเลือกสีที่เหมาะสมสำหรับ Page นี้ได้ ในขณะทียังมีสีอื่นๆ ที่ใช้สำหรับในกรณีอื่นด้วย
Reference
ที่มา: https://medium.freecodecamp.org/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความที่เกี่ยวข้อง