หมวดหมู่: Jquery

jQuery: 4.0.0 เกิดใหม่ แต่เหมือนแจ้งตายjQuery: 4.0.0 เกิดใหม่ แต่เหมือนแจ้งตาย

2006-04-122006-04-12| phunsanitphunsanit| 0 Comment | 07:00

เมื่อวันที่ 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) สำหรับโปรเจกต์เล็ก ๆ หรือการทดสอบ

    Plain Text

    <script type="module"> import $ from './path/to/jquery.module.js'; $ ('body') .append ('<h1>Hello jQuery 4.0.0 ESM!</h1>') ;
</script>
  • ทำงานร่วมกับ Modern Build Tools ได้สมบูรณ์
    • Vite
    • Webpack 5
    • Esbuild
    • Next.js / Nuxt.js
  • ผลลัพธ์ที่สำคัญ: “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 เหล่านี้

    Plain Text

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

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

    Plain Text

    var $elems = $ ('.my-items') ;
var newElem = document.getElementById ('new') ; // ใช้ Array.push มายืมมือทำงานให้
&#x5B;].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 มาตั้งแต่ทำงานเดือนแรกเลย

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

    Read MoreRead More