ในโลกของการพัฒนาเว็บที่เปลี่ยนแปลงอย่างรวดเร็ว ไลบรารีอย่าง jQuery เคยเป็นเสาหลักที่ช่วยให้นักพัฒนาสามารถจัดการกับ DOM และ Event ได้อย่างง่ายดาย อย่างไรก็ตาม เมื่อเวลาผ่านไป โครงสร้างของแอปพลิเคชันก็มีขนาดใหญ่ขึ้นและซับซ้อนขึ้น ทำให้การพึ่งพา jQuery ในโค้ดใหม่ๆ กลายเป็นภาระด้านประสิทธิภาพ (Performance Overhead) และขนาดของ Bundle (Bundle Size) ที่ใหญ่เกินความจำเป็น
การตัดสินใจย้ายระบบทั้งหมดในคราวเดียว (Big Bang Rewrite) จึงเป็นความเสี่ยงสูงและใช้เวลานานเกินไป บทความนี้จะนำเสนอแนวคิดและเทคนิคของ Senior Architect ในการทำ Refactoring อย่างเป็นระบบ โดยใช้หลักการที่เรียกว่า Strangler Fig Pattern เพื่อให้การย้ายระบบจาก jQuery สู่ Vanilla JavaScript หรือ Modern Framework (เช่น React, Vue) เป็นไปอย่างราบรื่นและลดความเสี่ยงที่สุด
💡 หลักการ Refactoring: Strangler Fig Pattern
แทนที่จะเขียนทิ้งทั้งหมด เราควรใช้หลักการ ‘Strangler Fig Pattern’ ซึ่งหมายถึงการสร้างฟังก์ชันการทำงานใหม่ด้วยเทคโนโลยีที่ทันสมัย (Vanilla JS หรือ Framework ใหม่) และค่อยๆ ‘ห่อหุ้ม’ (Wrap) หรือแทนที่ฟังก์ชันเดิมของ jQuery ทีละส่วน เมื่อส่วนใดส่วนหนึ่งทำงานได้สมบูรณ์แล้ว ก็ให้ตัดโค้ด jQuery ส่วนนั้นทิ้งไปอย่างถาวร นี่คือการย้ายระบบแบบค่อยเป็นค่อยไปที่ปลอดภัยที่สุด
🛠️ เทคนิคการแทนที่ฟังก์ชันหลัก (Core Function Replacement)
จุดที่ต้องให้ความสนใจเป็นพิเศษคือการแทนที่การจัดการ DOM และ Event Handling ซึ่งเป็นหัวใจหลักของ jQuery:
1. การจัดการ Event (Event Handling)
jQuery ใช้ `$(element).on(‘click’, handler)` ในขณะที่ Vanilla JS ใช้ `element.addEventListener(‘click’, handler)` การแทนที่ส่วนนี้เป็นจุดเริ่มต้นที่ดีที่สุดในการ Refactoring
JavaScript
// 🔴 jQuery (Old Code)
$('.my-button').on('click', function() {
console.log('Clicked via jQuery');
});
// 🟢 Vanilla JS (New Code)
const button = document.querySelector('.my-button');
if (button) {
button.addEventListener('click', () => {
console.log('Clicked via Vanilla JS');
});
}
2. การเข้าถึง DOM (DOM Selection)
แทนที่จะใช้ `$(‘.selector’)` ซึ่งเป็นการค้นหาที่ซับซ้อน ควรเปลี่ยนไปใช้ `document.querySelector()` หรือ `document.querySelectorAll()` เพื่อความแม่นยำและประสิทธิภาพที่สูงกว่า
🚀 ขั้นตอนการดำเนินการอย่างเป็นระบบ
- ระบุขอบเขต (Identify Scope): เลือกฟังก์ชันหรือโมดูลที่เล็กที่สุดและมีความเสี่ยงต่ำที่สุดในการย้ายก่อน (เช่น ส่วนแสดงผลข้อมูลที่ไม่ซับซ้อน)
- แยกส่วน (Isolate): แยกโค้ด jQuery ส่วนนั้นออกมาเป็น Module อิสระ
- เขียนใหม่ (Rewrite): เขียนโค้ดใหม่ด้วย Vanilla JS หรือ Framework ที่เลือกใช้
- ทดสอบ (Test): ทดสอบฟังก์ชันใหม่ด้วย Unit Test และ Integration Test เพื่อยืนยันว่าพฤติกรรม (Behavior) ไม่เปลี่ยนแปลง
- แทนที่ (Replace): เมื่อมั่นใจแล้ว ให้แทนที่การเรียกใช้ jQuery เดิมด้วยโค้ดใหม่
✅ บทสรุป
การย้ายจาก jQuery ไม่ใช่แค่การเปลี่ยน Syntax แต่คือการยกระดับสถาปัตยกรรมของแอปพลิเคชัน การใช้เทคนิค Refactoring แบบค่อยเป็นค่อยไป (Strangler Fig Pattern) จะช่วยให้ทีมพัฒนาสามารถลดหนี้ทางเทคนิค (Technical Debt) ได้อย่างมีแบบแผน โดยที่ผู้ใช้งานยังคงได้รับประสบการณ์ที่ดีอย่างต่อเนื่อง ทำให้ระบบโดยรวมมีความเร็ว ประสิทธิภาพ และความยืดหยุ่นสูง พร้อมรองรับการขยายตัวในอนาคตได้อย่างแท้จริง