แนวทางการแก้ปัญหาความขัดแย้ง (Conflict) ระหว่างปลั๊กอิน JS

ปัจจุบันมีปลั๊กอิน (Plug-in)  จาวาสคริปมากมาย ที่ช่วยให้การพัฒนาเว็บแอพพลิเคชั่นเป็นไปอย่างสะดวกรวดเร็วและง่ายดาย สามารถสร้างลูกเล่นและความสามารถต่างๆ โดยที่ไม่จำเป็นต้องลงแรงเขียนโค้ด ทำให้ประหยัดเวลาการทำงานได้อย่างมาก

เฟรมเวิร์ก (Framework) จาวาสคริปที่ได้รับความนิยมอันดับหนึ่งอย่าง Jquery ที่มีปลั๊กอินให้เลือกใช้อย่างมากมายที่เป็นนิยมกันมากและถูกใช้เฟรมเวิร์กพื้นฐานในการพัฒนาเว็บแอพพลิเคชั่นเป็นส่วนใหญ่ แต่หากเรามีความจำเป็นต้องใช้ร่วมกับเฟรมเวิร์กตัวอื่นๆ อาจทำให้เกิดปัญหาความขัดแย้งการทำงาน (Conflict) ระหว่างเฟรมเวิร์กหรือปลั๊กอินได้

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

หากมีความจำเป็นต้องใช้เฟรมเวิร์กหรือปลั๊กอินจากหลายๆ ค่ายอย่างหลีกเลี่ยงไม่ได้แล้วจริงๆ ผมก็ลองค้นหาวิธีการที่เป็นสูตรสำเร็จแล้วไม่พบว่ามีวิธีการที่ใช้ได้อย่างชัดเจน หากผู้อ่านท่านทราบวิธีการที่ดีกว่านี้ก็แลกเปลี่ยนกันได้ครับ ซึ่งจากประสบการณ์ที่ใช้อยู่ก็มีวิธีการเบื้องต้นที่ได้กล่าวไปแล้วและมีอีกวิธีการเลือกหนึ่งคือ การคัดกรองให้ใช้น้อยที่สุด (Customize) โดยก่อนที่จะดาวน์โหลดปลั๊กอินมาใช้ ซึ่งปลั๊กอินส่วนใหญ่จะมีเมนุที่ชื่อ JavaScript components ให้เลือก

เทคนิคก็คือเลือกเอาออกให้หมด แล้วคลิกเลือกเฉพาะเท่าที่จำเป็นต้องใช้เท่านั้น ซึ่งเราจะทราบได้โดยการนั่งไล่ชื่อ JavaScript components ระหว่างทั้งสองเฟรมเวิร์กโดยให้ยึดเฟรมเวิร์กตัวใดตัวหนึ่งไว้เป็นตัวทำงานหลัก ยกตัวอย่างที่ผมเคยใช้คือ Jquery Easy UI กับ  Bootstrap ผมจะยึด Jquery Easy UI เป็นตัวทำงานหลัก และปิดการทำงาน JavaScript components ของ Bootstrap  จากหน้าลิงค์นี้ (Customize and download) โดยเอาออกทุกตัวและเลือกกลับเข้าไปใหม่ที่คิดว่าจะทำไม่ให้เกิด Conflict (จุดสังเกตคือชื่อฟังก์ชัน)

หวังว่าเทคนิคเล็กๆ น้อยๆ จะช่วยแก้ไขปัญหาการ Conflict ให้กับเหล่า web dev ได้บ้างนะครับ

สวัสดี ^^