jQuery 4 เปิดตัวอย่างเป็นทางการ

 (blog.jquery.com)
14 คะแนน โดย GN⁺ 2026-01-19 | 3 ความคิดเห็น | แชร์ทาง WhatsApp
  • นี่คือการอัปเดตเป็น เมเจอร์เวอร์ชัน ครั้งใหญ่ในรอบประมาณ 10 ปี โดย jQuery 4.0.0 ถูกเผยแพร่อย่างเป็นทางการแล้ว
  • ยุติการรองรับ IE 10 ลงไปและเบราว์เซอร์รุ่นเก่า, ทำให้โค้ดเบาลงและสอดคล้องกับมาตรฐานสมัยใหม่มากขึ้น โดยผู้ใช้ส่วนใหญ่สามารถอัปเกรดได้โดยแทบไม่ต้องแก้โค้ด
  • เปลี่ยนไปใช้ โครงสร้างบน ES modules พร้อมนำ Rollup มาใช้ในการบิลด์ เพื่อให้เข้ากับสภาพแวดล้อมการพัฒนาสมัยใหม่
  • เพิ่มการรองรับ Trusted Types และ CSP เพื่อลดการชนกับนโยบายความปลอดภัย
  • ลบ API ที่ deprecated และย่อ slim build ลง เพื่อปรับปรุงประสิทธิภาพและการดูแลรักษา

ภาพรวมสำคัญของ jQuery 4.0.0

  • jQuery 4.0.0 คือ การออกเมเจอร์รีลีสครั้งใหญ่ ในรอบประมาณ 10 ปี ซึ่งผ่านรอบการพัฒนายาวนานและหลาย pre-release ก่อนจะเสร็จสมบูรณ์
    • ผู้ใช้ส่วนใหญ่สามารถอัปเกรดได้โดยไม่ต้องเปลี่ยนโค้ด
    • ลบ โค้ด legacy และพารามิเตอร์ภายในที่ไม่เปิดเผย ที่สะสมมาจากเวอร์ชันก่อนหน้า
  • มีทั้ง คู่มืออัปเกรด และ ปลั๊กอิน jQuery Migrate เพื่อช่วยรองรับการย้ายจากเวอร์ชันเก่า
  • แจกจ่ายผ่าน CDN ทางการและ npm ได้แล้ว ส่วน CDN อื่น ๆ จะทยอยอัปเดตตามมา

การเปลี่ยนแปลงด้านการรองรับเบราว์เซอร์

  • ยุติการรองรับ IE 10 ลงไป, โดย IE 11 จะถูกถอดออกแบบค่อยเป็นค่อยไปใน jQuery 5.0
  • Edge Legacy, iOS เวอร์ชันเก่า (เก่ากว่า 3 เวอร์ชันล่าสุด), Firefox เวอร์ชันเก่า (เก่ากว่า 2 เวอร์ชันล่าสุด), Android Browser ไม่ได้รับการรองรับอีกต่อไป
  • หากจำเป็นต้องรองรับเบราว์เซอร์รุ่นเก่า แนะนำให้ คง jQuery 3.x ต่อไป

ความเข้ากันได้กับ Trusted Types และ CSP

  • เพิ่มการรองรับ Trusted Types เพื่อจัดการ อ็อบเจ็กต์ TrustedHTML อย่างปลอดภัย
  • เปลี่ยนคำขอโหลดสคริปต์แบบอะซิงก์ส่วนใหญ่ให้เป็น แบบอิงแท็ก `` เพื่อป้องกันข้อผิดพลาดจาก CSP
    • เมื่อใช้ตัวเลือก "headers" ยังสามารถใช้ XHR ได้ แต่แนะนำให้ใช้ scriptAttrs

การเปลี่ยนไปใช้ ES modules

  • ซอร์สของ jQuery ถูก ย้ายจาก AMD ไปเป็น ES modules ทั้งหมด
    • เลือกใช้ Rollup เป็นเครื่องมือบิลด์แทน RequireJS เดิม
    • มีการทดสอบแยกต่างหากบนพื้นฐาน ES modules
  • ผ่าน `` ทำให้ รองรับเบราว์เซอร์และเครื่องมือบิลด์สมัยใหม่

การลบ Deprecated API

  • ลบ API ที่ถูกระบุว่าไม่ควรใช้งานมานานออกทั้งหมด
    • ฟังก์ชันที่ถูกลบ: jQuery.isArray, jQuery.parseJSON, jQuery.trim, jQuery.type, jQuery.now, jQuery.isNumeric, jQuery.isFunction, jQuery.isWindow, jQuery.camelCase, jQuery.nodeName, jQuery.cssNumber, jQuery.cssProps, jQuery.fx.interval
    • สิ่งที่ใช้แทน: เมธอดเนทีฟอย่าง Array.isArray(), JSON.parse(), String.prototype.trim(), Date.now() เป็นต้น
  • เมื่อถอดโค้ดที่เกี่ยวข้องกับ IE ออก ขนาดลดลงประมาณ 3KB ในแบบ gzip

การลบเมธอดภายในเท่านั้น

  • ลบเมธอด push, sort, splice ที่เคยใช้ภายในบน prototype ของ jQuery ออก
    • สามารถแทน $elems.push(elem) ได้ด้วยรูปแบบ [].push.call($elems, elem)

การเปลี่ยนลำดับของ focus event

  • ปรับให้เป็น ลำดับของ focus/blur event ตามสเปก W3C
    • ลำดับใหม่: blur → focusout → focus → focusin
    • แตกต่างจากลำดับเดิมของ jQuery จึง ต้องระวังเรื่องความเข้ากันได้
    • ทุกเบราว์เซอร์ยกเว้น IE ทำงานตามลำดับเดียวกันนี้

การปรับปรุง Slim build

  • ตัด Deferreds และ Callbacks ออก ทำให้ขนาดไฟล์ลดเหลือประมาณ 19.5KB (gzip)
    • เบราว์เซอร์ส่วนใหญ่รองรับ Promise แบบเนทีฟ แล้ว จึงใช้แทนได้
    • หากยังต้องรองรับ IE11 แนะนำให้ใช้ main build หรือ Promise polyfill
  • Slim build ตัดโมดูล Ajax และแอนิเมชันออก ทำให้ เล็กลงอีกราว 8KB

การดาวน์โหลดและการแจกจ่าย

ผู้มีส่วนร่วมและการฉลองครบรอบ 20 ปี

  • มี ผู้มีส่วนร่วมโอเพนซอร์ส จำนวนมากช่วยเรื่องแพตช์ รายงานบั๊ก และการทดสอบ
  • ในโอกาสครบรอบ 20 ปีของ jQuery มี การกลับมาพบกันของทีมที่ Dallas โดยผู้ก่อตั้ง John Resig ก็เข้าร่วมผ่าน Zoom

สรุปการเปลี่ยนแปลงโค้ดหลัก (Changelog)

  • Ajax: ปรับปรุงการจัดการข้อมูลไบนารี, ป้องกันข้อผิดพลาดจาก CSP, เพิ่มความเข้มแข็งของการจัดการข้อผิดพลาด JSONP
  • CSS: แก้การคำนวณขนาดขององค์ประกอบ ``, ปรับปรุงการจัดการช่องว่างใน CSS variables, ลบ opacity hook
  • Core: เปลี่ยนจาก AMD → ES modules, ใช้ DOMParser, ลบโค้ดรองรับเบราว์เซอร์รุ่นเก่า
  • Event: จัดการ focus/blur event แบบเนทีฟ, ลบ shim ของ event.which
  • Selector: รวม Sizzle, ปรับปรุง :has และ :even/:odd, เพิ่มการ chain uniqueSort
  • Docs: อัปเดตลิงก์ HTTPS, ปรับปรุงเอกสาร README และ CONTRIBUTING
  • Release: ทำให้กระบวนการบิลด์และแจกจ่ายเป็นอัตโนมัติ, ย้ายไปใช้ release-it

สรุป

  • jQuery 4.0.0 คือ เวอร์ชันที่ปรับโครงสร้างครั้งใหญ่ให้สอดคล้องกับมาตรฐานเว็บสมัยใหม่และนโยบายด้านความปลอดภัย
  • การลบโค้ด legacy, การเปลี่ยนเป็น ES modules, การเสริมความปลอดภัย, และการทำให้เบาลง ช่วยวางรากฐานสำหรับการดูแลรักษาระยะยาว
  • นับเป็น รีลีสเชิงสัญลักษณ์เพื่อฉลอง 20 ปีของระบบนิเวศ jQuery

บทความที่เกี่ยวข้อง

3 ความคิดเห็น

 
tsboard 2026-01-21

ครบรอบ 20 ปีที่น่าประทับใจ ตอนนี้แทบไม่มีโอกาสได้ใช้แล้วก็จริง แต่ก็หวังว่าจะยังคงได้รับความรักต่อไปในฐานะเครื่องมือที่ยังมีประโยชน์ในภาคสนามเสมอ
 
shakespeares 2026-01-19

เหนียวแน่นมากจริง ๆ.. 555
 
GN⁺ 2026-01-19
ความเห็นจาก Hacker News

  • มีบทความที่เกี่ยวข้องซึ่งสรุปวิธีใช้ jQuery แบบ reactive ได้ดี เมื่อไม่สามารถใช้เฟรมเวิร์กสมัยใหม่กับ legacy codebase ได้
    Reactive jQuery for Spaghetti-fied Legacy Codebases

    • เมื่อก่อน BackboneJS มักถูกใช้กับงานลักษณะนี้บ่อยมาก และทุกวันนี้ก็ยังมีการดูแลรักษาอยู่
      ถ้าจำเป็นต้องใช้ jQuery ด้วยเหตุผลด้าน legacy, Backbone อาจเป็นขั้นกลางที่ดี ก่อนย้ายไปเฟรมเวิร์กสมัยใหม่
      เว็บไซต์ทางการของ BackboneJS, รายการแท็กบน GitHub
    • อ่านบทความนี้แล้วทำให้นึกถึงยุคของ jQuery spaghetti code ขึ้นมา
      จริง ๆ แล้วบางครั้งโค้ด React ที่ออกแบบเกินจำเป็นก็แย่กว่าโค้ด jQuery ที่จัดระเบียบมาดี
      React ยกระดับมาตรฐานคุณภาพก็จริง แต่บางทีก็มีประสิทธิภาพกว่าถ้าใช้เครื่องมือที่คุ้นเคยให้เหมาะสม
    • ฉันก็เคยใช้แนวทางนี้เหมือนกัน และมันดีกว่าความวุ่นวายแบบ jQuery ยุค 2010 มาก
      มันเหมาะมากโดยเฉพาะกับงานอย่าง Userscript ที่ขอบเขตปัญหาเล็กและขั้นตอน build น่ารำคาญ
      ที่จริงต่อให้ไม่มี jQuery ก็ทำได้เพียงพอด้วย querySelector, addEventListener, innerHTML
    • แอป jQuery ขนาดใหญ่ตัวล่าสุดที่ฉันทำก็ใช้ reactive pattern แบบนี้เหมือนกัน
      ตอนนั้นต้องยัด custom search frontend เข้าไปใน Joomla CMS แบบฝืน ๆ แต่มันก็ทำงานได้ดีทีเดียว
    • เป็นแพตเทิร์นที่ดีมาก ถ้าเพิ่ม signals เข้าไปด้วย ฟังก์ชันอัปเดตจะถูกเรียกอัตโนมัติ
      นี่คือแนวทางที่เราใช้ใน Reactive Mastro พอดี

  • jQuery ยังเป็นหนึ่งในไลบรารีที่ฉันชอบที่สุดเสมอ
    มันเป็นเครื่องมือที่สร้างเส้นทางอาชีพของฉันขึ้นมา เลยผูกพันกับมันมาก

    • เด็กสมัยนี้ไล่ตามแต่เฟรมเวิร์กใหม่ ๆ แต่ jQuery กับ .NET Framework ทำให้ฉันมีงานทำตลอด
    • ฉันใช้ jQuery มา 15 ปีแล้ว และมันก็ยังเป็น ตัวเลือกพื้นฐาน ของฉัน
    • อยากให้มีใครเอา Virtual DOM มาต่อกับ jQuery
      ถ้าเป็น jQuery + jQuery UI + plugin + AI น่าจะมีศักยภาพมหาศาล

  • ทุกครั้งที่มีคนพูดถึง HTMX ฉันมักคิดว่า “นั่นมันทำด้วย jQuery แค่สามบรรทัดไม่ใช่เหรอ?”
    ยังไงก็ตาม jQuery ก็แก้ปัญหาให้ได้เสมอ และนั่นแหละคือสิ่งสำคัญ

    • ใช่เลย HTMX พัฒนาต่อมาจาก intercooler.js ซึ่งเดิมได้แรงบันดาลใจจากเมธอด .load() ของ jQuery
      ดู เอกสาร jQuery.load() ได้
      ฉันไปเจอมันตอนทำงานด้าน performance แล้วก็ยิ่งนับถือ jQuery มากจริง ๆ
    • ปัญหาของ jQuery คือมันเป็น imperative code พอเริ่มต้องจัดการหลายสถานะ ความซับซ้อนก็จะเพิ่มขึ้น
    • ทุกวันนี้ฉันใช้ native JS แต่ความ สง่างาม ของอินเทอร์เฟซ selector แบบ $() ยังยอดเยี่ยมอยู่เสมอ
      เรื่องต่างของประสิทธิภาพอาจชดเชยได้ด้วยการคำนวณล่วงหน้า
    • เวลาใช้ Django ฉันแก้ปัญหาส่วนใหญ่ด้วยการจับคู่ HTMX กับ vanilla JS
      มันเรียบง่ายแต่ก็ให้ความรู้สึกคล้าย SPA ได้

  • Good ol’ jQuery, เป็นสิ่งที่น่าขอบคุณจริง ๆ

  • ดีใจที่เห็นว่า jQuery ยังได้รับการดูแลและอัปเดตอยู่
    แต่พอนึกแบบนี้ก็แอบเศร้านิด ๆ ว่า React อาจยังอยู่ไปถึงปี 2060 เหมือนกัน

    • ต้องยอมรับว่า React ทำให้การพัฒนาแอปดีขึ้นมาก
      ถ้านึกถึง callback hell ในอดีต ตอนนี้ก็เหมือนความฝัน
    • พอถึงราวปี 2060 React Native อาจเพิ่งอยู่แถว ๆ v0.93 ก็ได้
    • ตอนนี้จริง ๆ ก็เหมือนมี React อยู่สองแบบแล้ว พอถึงปี 2060 อาจจะมีสักห้าแบบ

  • ในช่วงปี 2000~2010 ที่เฟรมเวิร์ก SPA ยังไม่แพร่หลาย ฉันเองก็เรียนทำเว็บด้วย jQuery
    ของที่ฉันทำไว้ตอนนั้นจำนวนไม่น้อยน่าจะยังรันอยู่จนถึงทุกวันนี้
    ขอส่ง คำขอบคุณ ไปยังทีม jQuery

  • ขอแสดงความยินดีกับทุกคนที่มีส่วนร่วมใน การออก jQuery 4.0
    ถ้าต้องการแนวทางที่มีโครงสร้างมากขึ้น ก็มี ระบบเทมเพลตแบบ reactive ชื่อ JsViews
    มันเก่าและเสถียร แต่ไม่ได้รับความสนใจเท่ากับเฟรมเวิร์กสมัยใหม่

    • ฉันเพิ่งเคยได้ยินชื่อ JsViews แต่ก็น่าสนใจดี
      ส่วนตัวฉันชอบสไตล์ jQuery แบบสมัยใหม่อย่าง cheerio และ alpine.js
      cheerio.js.org, alpinejs.dev
    • ฉันเองคงไม่ได้ใช้ jQuery เร็ว ๆ นี้ แต่ซอร์สของ JsViews ก็น่าศึกษา
      เพียงแต่ดีไซน์เว็บไซต์ดูเก่าเกินไป เลยน่าจะทำให้อัตราการนำไปใช้งานต่ำ
      ถึงอย่างนั้นก็โหลดเร็ว และความ น้ำหนักเบา ของมันก็น่าประทับใจ
      jsrender.min.js มีขนาดแค่ 12.82kB เท่านั้น

  • ไม่น่าเชื่อว่า jQuery 4.0 ยัง รองรับ IE11 อยู่
    โดยมีแผนจะถอดออกจริง ๆ ใน jQuery 5.0

    • ดูเหมือนว่าจะคงการรองรับ IE11 ไว้เพื่อไม่ให้การออก 4.0 ล่าช้า
      ดู PR ที่เกี่ยวข้อง, issue
      พอนึกว่า 3.0 ออกมาตั้งแต่ 10 ปีก่อนก็ถือว่าน่าทึ่งทีเดียว
    • มันก็เพื่อ backward compatibility นั่นแหละ ยังมีสภาพแวดล้อมที่จำเป็นต้องใช้ IE11 อยู่
      เลยรู้สึกขอบคุณที่ยังมีคนช่วยรองรับผู้ใช้และผลิตภัณฑ์เหล่านั้น
    • Microsoft มีแผนจะ รองรับ IE11 ไปจนถึงปี 2032 ผ่าน Windows 10 LTSC และ Edge IE mode บน Windows 11
    • ไม่ใช่ทุกคนบนโลกจะเข้าถึงฮาร์ดแวร์และซอฟต์แวร์รุ่นใหม่ล่าสุดได้
      ยังมี ห้องคอมพิวเตอร์ของโรงเรียน จำนวนมากที่ใช้ระบบเก่าอยู่

  • งานที่ใส่ลงไปใน เครื่องมืออัปเกรด ของ jQuery นั้นน่าทึ่งจริง ๆ

  • ฉันยังรัก ไวยากรณ์แบบ chaining ของ jQuery อยู่เสมอ
    เมื่อ 15 ปีก่อนฉันเคยเขียนบทสอน jQuery เป็นภาษาฝรั่งเศส และมันมีคนเข้ามาอ่านเยอะมาก
    หวังว่าฉันคงมีส่วนช่วยให้ jQuery แพร่หลายขึ้นมาบ้าง