Tag Archive Vite

เมื่อวันที่ 17 มกราคม 2026 ที่ผ่านมา ทาง jQuery ได้ประกาศเปิดตัว jQuery 4.0.0 เวอร์ชันเต็ม (Final Release) อย่างเป็นทางการแล้ว ซึ่งถือเป็นการฉลองครบรอบ 20 ปีของ Library นี้พอดี (นับจากที่เปิดตัวครั้งแรกในปี 2006) แต่ version ก่อนหน้าคือ jQuery 3.7.1 28 สิงหาคม 2023 นับดู ๆ ก็ 3 ปีเลยในการพัฒนาจาก version 3 เป็น 4 แต่ผลที่ได้คือ

บอกลาการรองรับ Browser รุ่นเก่า (The Great Cleanup) ที่เจ้าอื่นทิ้งไปนานแล้ว ซักที

jQuery 4.0.0 ได้ทำการตัด Code ที่ใช้สนับสนุน Browser โบราณออกไปอย่างถาวร เพื่อให้ Library มีขนาดเล็กลงและทำงานเร็วขึ้น โดยเลิกสนับสนุน

• Internet Explorer 10 และต่ำกว่า
• Edge Legacy (เวอร์ชันก่อนโครเมียม)
• Firefox เวอร์ชันที่ต่ำกว่า 65
• iOS 10 และต่ำกว่า

Trusted Types (การจัดการ HTML ที่ปลอดภัย)

ปกติเวลาเราใช้คำสั่งอย่าง $(container).html(userInput) ถ้าข้อมูลที่รับมามี Script อันตรายแฝงอยู่ (XSS) เบราว์เซอร์อาจจะโดนเจาะระบบได้

• ปัญหา: ในเบราว์เซอร์สมัยใหม่จะมีนโยบายความปลอดภัยที่เรียกว่า Content Security Policy (CSP) ซึ่งถ้าเราตั้งค่าแบบเข้มงวด (require-trusted-types-for 'script') เบราว์เซอร์จะ “สั่งแบน” การส่ง String ธรรมดาเข้าไปใน DOM ทันที
• สิ่งที่ jQuery 4.0 ทำ: ตอนนี้ jQuery รองรับการรับค่าที่เป็น TrustedHTML (Object ที่ผ่านการตรวจสอบความปลอดภัยมาแล้ว) เข้าไปใน Method ต่างๆ เช่น .html(), .append(), หรือ .prepend() ได้โดยไม่ทำให้ระบบ CSP ของเบราว์เซอร์ Error ครับ

การเปลี่ยนมาใช้ <script> Tag สำหรับ AJAX

ในเวอร์ชันก่อนๆ เวลาเราสั่งโหลด Script ผ่าน AJAX (เช่น $.getScript()) jQuery มักจะใช้ XHR (XMLHttpRequest) ไปดึงโค้ดมาเป็น String แล้วค่อยจับยัดลงหน้าเว็บ

• ปัญหา: การทำแบบนั้นทำให้เกิดปัญหาเรื่อง CSP (Inline Script Error) เพราะเบราว์เซอร์มองว่าการเอา String มาประมวลผลเป็น Script นั้นไม่ปลอดภัย
• สิ่งที่ jQuery 4.0 ทำ: เปลี่ยนมาใช้การสร้างแท็บ <script src="..."> จริงๆ แปะลงไปในหน้าเว็บแทน (เกือบทุกกรณี)
  • ข้อดี: ไม่ละเมิดกฎ CSP และทำให้เบราว์เซอร์จัดการเรื่องการแคช (Caching) และการ Debug ได้ดีขึ้น
  • จุดที่ต้องระวัง: ถ้าคุณเคยส่ง Custom Headers ไปพร้อมกับการขอ Script (เช่น Token) การใช้ <script> tag จะทำไม่ได้ (เพราะมันตั้ง Header ไม่ได้เหมือน XHR)
  • ทางแก้: ทีมพัฒนาแนะนำให้ใช้ scriptAttrs แทนเพื่อใส่ Attribute ลงไปในแท็กแทนการใช้ Header ครับ

ย้ายระบบ Source Code ไปเป็น ES Modules

เปลี่ยนจากระบบ AMD เดิมมาเป็น ES Modules (ESM) อย่างเต็มตัว และใช้ Rollup ในการ Build ทำให้ Library ทันสมัยและเข้ากับ Build tools ใหม่ๆ ในปัจจุบันได้ดีขึ้นมาก

1. จาก AMD สู่ ES Modules (ESM)
   • อดีต (AMD): เดิมที Source Code ของ jQuery เขียนโดยใช้รูปแบบ AMD (Asynchronous Module Definition) ซึ่งต้องพึ่งพาเครื่องมืออย่าง RequireJS ในการจัดการลำดับการโหลดไฟล์ต่างๆ ภายใน
   • ปัจจุบัน (ESM): ตอนนี้เปลี่ยนมาใช้ ES Modules (import/export) ซึ่งเป็นมาตรฐานสากลของ JavaScript ยุคใหม่แล้ว
2. เลิกใช้เครื่องมือเก่า เปลี่ยนมาใช้ Rollup
   • เดิมที jQuery มี Build tool ของตัวเองที่ซับซ้อน แต่ตอนนี้เปลี่ยนมาใช้ Rollup ซึ่งเป็นเครื่องมือมาตรฐานที่วงการ JavaScript ยอมรับในการแพ็ค Library
   • การเปลี่ยนครั้งนี้ทำให้การจัดการโค้ดภายในสะอาดขึ้น และลดความซับซ้อนในการดูแลรักษา (Maintenance)
3. รองรับการใช้งานผ่าน <script type="module">
   ด้วยการที่ Source เป็น ESM แล้ว คุณสามารถใช้งาน jQuery ในเบราว์เซอร์ได้โดยตรง (ไม่ต้องผ่านขั้นตอน Compile/Bundle) สำหรับโปรเจกต์เล็กๆ หรือการทดสอบ

   <script type="module">
     import $ from './path/to/jquery.module.js';
     $('body').append('<h1>Hello jQuery 4.0.0 ESM!</h1>');
   </script>
   

4. ทำงานร่วมกับ Modern Build Tools ได้สมบูรณ์
   • Vite
   • Webpack 5
   • Esbuild
   • Next.js / Nuxt.js
5. ผลลัพธ์ที่สำคัญ: “Tree Shaking” (ในอนาคต)
   แม้ว่าปัจจุบัน jQuery จะยังต้อง import ไปเกือบทั้งก้อนเพื่อให้ทำงานได้สมบูรณ์ แต่การเปลี่ยนโครงสร้างเป็น ESM คือก้าวแรกที่สำคัญมากที่จะช่วยให้ในอนาคต เครื่องมืออย่าง Vite หรือ Webpack สามารถทำ Tree Shaking (การตัดโค้ดส่วนที่ไม่ได้ใช้ออก) ได้อย่างมีประสิทธิภาพมากขึ้น ซึ่งจะส่งผลให้ขนาดไฟล์ที่ผู้ใช้โหลดเล็กลงไปอีกครับ

การยกเลิก Method ที่ล้าสมัย (Deprecated APIs)

Method หลายตัวที่เคยถูกประกาศว่า “ไม่แนะนำให้ใช้” (Deprecated) มานาน จะถูกถอดออกในเวอร์ชันนี้

• Array-like methods: jQuery.parseJSON() (ให้ใช้ JSON.parse() แทน)
• jQuery.isArray, jQuery.parseJSON, jQuery.trim, jQuery.type, jQuery.now, jQuery.isNumeric, jQuery.isFunction, jQuery.isWindow, jQuery.camelCase, jQuery.nodeName, jQuery.cssNumber, jQuery.cssProps, and jQuery.fx.interval ให้ใช้ Array.isArray(), JSON.parse(), String.prototype.trim(), and Date.now()
• Internal logic: มีการปรับปรุงวิธีจัดการ Event และการเข้าถึง DOM ให้ไปเรียกใช้ Native API ของเบราว์เซอร์โดยตรงมากขึ้น

Internal-only methods removed from jQuery prototype

1. ปัญหาของ push, sort, และ splice ในอดีต
   ตามปกติแล้ว Object ของ jQuery จะมีลักษณะคล้าย Array (Array-like object) เพื่อให้เราวนลูปหรือเข้าถึง Element ผ่าน index ได้ แต่ในเวอร์ชันก่อนๆ ทีมพัฒนาได้แอบใส่ Method ของ Array แท้ๆ เข้ามาใน Prototype ของ jQuery ด้วย ได้แก่ .push(), .sort(), .splice() เพราะ Method เหล่านี้ทำงานไม่เหมือน Method อื่นของ jQuery (เช่น .css() หรือ .hide()) เพราะมันทำการแก้ไขตัวแปรเดิมโดยตรง (Mutation) และ ไม่สามารถทำ Chaining ต่อได้ (เช่นเขียน $(el).push(newEl).hide() ไม่ได้) ซึ่งขัดกับหัวใจหลักของ jQuery ที่เน้นการ Chain คำสั่งต่อกันไปเรื่อยๆ
2. วิธีแก้ไขถ้าคุณเคยใช้ Method เหล่านี้

var $elems = $('.my-items');
var newElem = document.getElementById('new');
$elems.push(newElem); // Error: $elems.push is not a function

แบบใหม่ (ใช้ได้ทุกเวอร์ชัน)

var $elems = $('.my-items');
var newElem = document.getElementById('new');

// ใช้ Array.push มายืมมือทำงานให้
[].push.call($elems, newElem);

การเปลี่ยนลำดับ Focus Event ให้ตรงตามมาตรฐาน W3C

นี่เป็นหนึ่งใน Breaking Change ที่สำคัญ คือการปรับลำดับของ event: blur, focusout, focus, และ in ให้ตรงกับมาตรฐานโลก ซึ่งจะแตกต่างจากลำดับที่ jQuery เคยใช้ในเวอร์ชันก่อน ๆ

สรุปการอัปเกรด

ถ้าคุณมีโปรเจกต์เดิมที่ใช้ jQuery 3.x อยู่ ทางทีมงานได้เตรียม jQuery Migrate plugin และ Upgrade Guide ไว้ให้แล้ว เพื่อให้การย้ายไป 4.0.0 เป็นไปอย่างราบรื่นที่สุดครับ

ทำไม่คิดว่าตาย

เป็นเพราะว่า จุดเด่นของ jQuery คือ jQuery selectors และ AJAX แต่มันสามารทำได้ตรง ๆ แล้วใน JavaScript ใหม่ ๆ ที่ติดมากับ browser และการที่มันออก version 4 ออกมาช้ามากจนคนเปลี่ยนไปใช้ตัวอื่น ๆ แล้ว ทั้ง ๆ อย่างผมก็ใช้ jQuery มาตั้งแต่ทำงานเดือนแรกเลย

อ่านเพิ่มเติม

• jQuery Core 4.0 Upgrade Guide
• jQuery: import $ ให้เป็น global scope ?
• DataTables: ต้อนรับ jQuery 4.0
• DataTables