jQuery 4.0.0 je tu: kaj se je spremenilo, kaj se lomi in kako varno nadgraditi

14. januarja 2006 je John Resig na BarCampu v New Yorku prvič predstavil jQuery. Dvajset let kasneje je ekipa objavila končno izdajo jQuery 4.0.0, ki prihaja po dolgem razvojnem ciklu in več predizdajah. Gre za prvo večjo (major) izdajo po skoraj 10 letih – in to pomeni tudi nekaj breaking changes. Dobra novica: po napovedi ekipe bi morala večina projektov nadgraditi z minimalnimi popravki, če se nadgradnje lotiš sistematično.

Glavni cilj 4.0.0 je bil že dolgo na seznamu: počistiti dediščino, odstraniti prej zastarele API-je, odrezati interno kodo, ki je v javnih funkcijah obstajala kot nedokumentirana “notranja” možnost, in se odpovedati nekaterim “magic” vedenjem, ki so bila kompleksna za vzdrževanje.

Za prehod sta pripravljena upgrade guide in nova izdaja jQuery Migrate (plugin, ki pomaga zaznati in ublažiti nezdružljivosti). Če med nadgradnjo naletiš na težave, ekipa prosi, da jih prijaviš v issue trackerju na GitHubu.

Kje dobiš jQuery 4.0.0 (CDN, npm, slim build)

Izdaja je objavljena na uradnem jQuery CDN in kot npm paket. Tretji CDNi jo bodo praviloma prevzeli z zamikom (njihovih urnikov jQuery ne kontrolira), zato je za hiter začetek najvarneje uporabiti uradni CDN.

• CDN (ne-minificirano): https://code.jquery.com/jquery-4.0.0.js
• CDN (minificirano): https://code.jquery.com/jquery-4.0.0.min.js
• npm: npm install jquery@4.0.0

Slim build (še manjši paket)

Poleg “polne” izdaje obstaja tudi slim različica. Ideja ostaja ista kot v preteklosti: včasih ne potrebuješ AJAX-a, za animacije raje uporabiš CSS in razrede, in v sodobnih brskalnikih (razen IE11) imaš native Promises, zato dodatni moduli pogosto niso nujni.

V jQuery 4.0.0 je slim build še manjši, ker so iz njega odstranili Deferreds in Callbacks – zdaj je velik približno 19.5k bytes gzipped. Deferredi so že dolgo skladni s standardom Promises A+, zato se večina uporabe lahko preseli na native Promise metode. Deferredi sicer nudijo nekaj dodatnih zmožnosti, ki jih native Promises nimajo, ampak v tipičnih aplikacijah jih je mogoče zamenjati.

• CDN (slim, ne-minificirano): https://code.jquery.com/jquery-4.0.0.slim.js
• CDN (slim, minificirano): https://code.jquery.com/jquery-4.0.0.slim.min.js

Najpomembnejše prelomne spremembe v jQuery 4.0.0

1) Podpora za IE<11 je odstranjena (IE10 in starejši)

jQuery 4.0 ukine podporo za IE10 in starejše. Pogosto vprašanje je, zakaj ne tudi IE11. Razlog je načrtovan prehod po fazah: naslednji korak (odstranitev podpore za IE11) je predviden za jQuery 5.0 (glej PR: https://github.com/jquery/jquery/pull/5077). Trenutno je fokus na odstranitvi kode, ki je specifično podpirala verzije starejše od IE11.

Poleg tega je padla podpora še za druge zelo stare brskalnike: Edge Legacy, iOS verzije starejše od zadnjih 3, Firefox verzije starejše od zadnjih 2 (izjema je Firefox ESR) in Android Browser. Po napovedi naj na tvoji strani ne bi bilo potrebno nič spreminjati – razen če moraš katerega od teh brskalnikov še vedno podpirati. V tem primeru ostani na jQuery 3.x.

2) Trusted Types in Content Security Policy (CSP)

jQuery 4.0 doda podporo za Trusted Types – mehanizem, ki pomaga zmanjšati XSS napade tako, da brskalnik zahteva, da “nevarni” stringi (npr. HTML) prihajajo iz preverjenih virov. Konkretno: HTML, zavit v TrustedHTML (MDN: https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML), je mogoče uporabiti kot vhod v jQuery metode za manipulacijo DOM-a na način, ki ne krši CSP direktive require-trusted-types-for.

Poleg tega so pri async nalaganju skriptov naredili pomembno spremembo zaradi CSP. Del AJAX zahtevkov je že prej uporabljal <script> tage, da ohrani atribute, kot je crossdomain. Zdaj so večino asinhronih zahtevkov za skripte preklopili na uporabo <script> tagov (PR: https://github.com/jquery/jquery/pull/4763), da se izognejo CSP napakam, ki se lahko pojavijo pri inline scriptih.

Še vedno obstaja nekaj primerov, kjer se za asinhrone script requeste uporabi XHR – npr. ko je podana opcija "headers" (ekipa izrecno svetuje: uporabi scriptAttrs namesto tega). Kadar je mogoče, jQuery zdaj uporablja <script> tag.

3) Izvorna koda jQuery je migrirala na ES modules

Velik premik za build pipeline: koda na veji main je prešla z AMD (Why AMD: https://requirejs.org/docs/whyamd.html) na ES modules (PR: https://github.com/jquery/jquery/pull/4541). jQuery je sicer že prej objavljal source na npm in GitHubu, ampak ga ni bilo mogoče neposredno uvažati kot module brez RequireJS (https://requirejs.org/), ker je bil to dolga leta jQueryjev build tool.

Pakiranje je zdaj na Rollup (https://rollupjs.org/introduction/), test suite pa se poganja tudi posebej nad ES modules. Rezultat: jQuery se bolje vklopi v sodobne build toole, workflowe in brskalnike, tudi prek <script type=module>.

4) Odstranjeni zastareli (deprecated) API-ji

jQuery 4.0.0 odstrani funkcije, ki so bile označene kot deprecated že več verzij. Del njih je bil vedno mišljen kot interni, del pa je postal nepotreben, ker imajo vsi podprti brskalniki že dolgo native ekvivalente. Odstranjeno je:

• 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

Namesto tega uporabi native alternative, kot so Array.isArray(), JSON.parse(), String.prototype.trim() in Date.now().

Kombinacija odstranitve teh API-jev in odstranitve IE-legacy podpore je po navedbah ekipe prinesla zmanjšanje velikosti za več kot 3k bytes gzipped.

5) Iz jQuery prototipa so izginile interne Array metode (push, sort, splice)

jQuery prototip je dolgo časa vseboval Array metode, ki se niso obnašale kot ostale jQuery metode in so bile v praksi namenjene le internim potrebam. To so: push, sort in splice. V 4.0 so te metode odstranjene iz prototipa.

Če si jih slučajno uporabljal nad jQuery kolekcijo, predlagana zamenjava izgleda takole: namesto $elems.push( elem ) uporabi [].push.call( $elems, elem ).

6) Zaporedje focus/blur dogodkov je zdaj po W3C specifikaciji

Dolga leta brskalniki niso bili usklajeni glede vrstnega reda dogodkov focus/blur (vključno z focusin, focusout, focus, blur). V zadnjih verzijah brskalnikov, ki jih jQuery 4.0 podpira, se je vrstni red končno poenotil – žal pa je drugačen od vrstnega reda, ki ga je jQuery že leta dosledno zagotavljal. To je zato prelomna sprememba.

Od jQuery 4.0 naprej jQuery ne prepisuje več native vedenja. Vsi brskalniki razen IE bodo sledili trenutni W3C specifikaciji, in sicer:

1. blur
2. focusout
3. focus
4. focusin

V prejšnjih verzijah je bil jQuery vrstni red: focusout, blur, focusin, focus. Zanimiv zgodovinski detajl, ki ga omenja ekipa: edini brskalnik, ki je kdaj sledil stari W3C specifikaciji (pred posodobitvijo leta 2023), je bil Internet Explorer.

Praktičen plan za nadgradnjo (jQuery 3.x → 4.0.0)

Ker so breaking changes realni, se splača nadgradnje lotiti kot mini-migracije in ne kot “zamenjaj datoteko na CDN-ju in upaj”. To so konkretni koraki, ki se lepo ujemajo z orodji, ki jih je ekipa pripravila.

1. Preveri, ali tvoj product še vedno potrebuje podporo za IE10/Edge Legacy/Android Browser ali stare iOS/Firefox verzije. Če ja, ostani na jQuery 3.x.
2. Preberi uradni upgrade guide: https://jquery.com/upgrade-guide/4.0/ (to je tvoja “checklista” za breaking changes).
3. Vključi jQuery Migrate: https://github.com/jquery/jquery-migrate/ in najprej odpravi opozorila/napake, ki jih pokaže na obstoječi kodi.
4. Posebej testiraj: (a) manipulacijo HTML in CSP/Trusted Types, (b) focus/blur event flow na kritičnih UI komponentah, (c) kodo, ki je uporabljala odstranjene API-je ali prototipne Array metode.
5. Ko nadgradiš na 4.0.0, ponovno preveri kritične tokove in če naletiš na bug, ga prijavi v jQuery repo: https://github.com/jquery/jquery/issues.

Kaj je novega še “pod pokrovom” (iz changeloga)

Uradni objavi je priložen obsežen changelog. Spodaj je povzetek po področjih – brez “marketinškega” filtra, bolj v smislu: kje so se stvari dejansko premaknile in kaj to pomeni za integracije.

Ajax

• Ne obravnava več array data kot binarne podatke (Don’t treat array data as binary).
• Dovoli processData: true tudi za binarne podatke (Allow processData: true even for binary data).
• Podpora za binarne podatke (vključno s FormData) (Support binary data (including FormData)).
• Podpora headers pri script transportu tudi kadar je cross-domain (Support headers for script transport even when cross-domain) – issue #5142.
• Podpora null kot success funkcija v jQuery.get (Support null as success functions in jQuery.get) – issue #4989.
• Scriptov ne izvede samodejno, če dataType ni podan (Don’t auto-execute scripts unless dataType provided) – issue #4822.
• responseJSON deluje tudi pri napačnih same-domain JSONP requestih (Make responseJSON work for erroneous same-domain JSONP requests).
• Izvede JSONP error script responses (Execute JSONP error script responses) – issue #4771.
• Preprečevanje CSP napak v script transportu za async requeste (Avoid CSP errors in the script transport for async requests) – issue #3969.
• Odstranjena je logika samodejne promocije json → jsonp (Drop the json to jsonp auto-promotion logic) – issues #1799 in #3376.
• Če je prisoten content-type header, prepiše s.contentType (Overwrite s.contentType with content-type header value, if any) – issue #4119.
• AJAX event aliases so deprecated; inline event/alias v deprecated (Deprecate AJAX event aliases, inline event/alias into deprecated).
• Ne izvaja scriptov pri neuspešnih HTTP responseih (Do not execute scripts for unsuccessful HTTP responses) – issue #4250.
• Poenostavljen jQuery.ajaxSettings.xhr (Simplify jQuery.ajaxSettings.xhr) – issue #1967.

Attributes

• .attr( name, false ) zdaj odstrani atribut za vse non-ARIA atribute (Make .attr( name, false ) remove for all non-ARIA attrs) – issue #5388.
• Dodatno zmanjšanje velikosti (Shave off a couple of bytes).
• Setter ne spreminja atributov v string (Don’t stringify attributes in the setter) – issue #4948.
• Odstranjena signatura toggleClass(boolean|undefined) (Drop the toggleClass(boolean|undefined) signature) – issue #3388.
• Refaktor val(): ne odstranjuje carriage return, IE workaroundi izolirani (Refactor val(): don’t strip carriage return, isolate IE workarounds).
• Ne nastavlja type attr hook izven IE (Don’t set the type attr hook at all outside of IE).

CSS

• Popravljene dimenzije za <col> elemente v tabelah (Fix dimensions of table <col> elements) – issue #5628.
• Odstranjen cache v finalPropName (Drop the cache in finalPropName).
• Testi: popravki in podpora testom pod CSS Zoom (Fix tests & support tests under CSS Zoom) – issue #5489.
• Popravljen reliableTrDimensions test za začetno skrite iframe (Fix reliableTrDimensions support test for initially hidden iframes).
• Selector: poravnava s 3.x, odstranjen zunanji selector.js wrapper (Align with 3.x, remove the outer selector.js wrapper).
• reliableTrDimensions test deluje z Bootstrap CSS (Make the reliableTrDimensions support test work with Bootstrap CSS) – issue #5270.
• offsetHeight( true ) ipd. vključuje negativne margine (Make offsetHeight( true ), etc. include negative margins) – issue #3982.
• Za CSS variable value, ki je samo whitespace, vrne undefined (Return undefined for whitespace-only CSS variable values) – #5120.
• Ne trimma whitespace pri undefined custom property (Don’t trim whitespace of undefined custom property) – issue #5105.
• V addClass( array ) preskoči falsy vrednosti; kompresija kode (Skip falsy values in addClass( array ), compress code) – issue #4998.
• Utemeljitev uporabe rtrim na CSS vrednostih (Justify use of rtrim on CSS property values).
• Trim whitespace okoli CSS Custom Properties vrednosti (Trim whitespace surrounding CSS Custom Properties values) – issue #4926.
• Metode show, hide in toggle so vključene tudi v slim build (Include show, hide & toggle methods in the jQuery slim build).
• Odstranjen opacity CSS hook (Remove the opacity CSS hook).
• Workaround za buggy getComputedStyle na table rows v IE/Edge (Workaround buggy getComputedStyle on table rows in IE/Edge) – issue #4490.
• Ne dodaja več samodejno px večini lastnosti (z nekaj izjemami) (Don’t automatically add “px” to properties with a few exceptions) – issue #2795.

Core

• Odstranjeni zastareli workaroundi, posodobljeni support komentarji (Remove obsolete workarounds, update support comments).
• $.parseHTML preklopljen z document.implementation na DOMParser (Switch $.parseHTML from document.implementation to DOMParser).
• Popravljena export nastavitev za bundlerje z ESM & CommonJS (Fix the exports setup to make bundlers work with ESM & CommonJS) – issue #5416.
• Več informacij o named exports (Add more info about named exports).
• Poenostavitve po zmanjšanju browser supporta (Simplify code post browser support reduction).
• Factory prestavljen v ločen exports (Move the factory to separate exports).
• Named exports uporabljeni v src/ (Use named exports in src/) – issue #5262.
• Popravljen regression v jQuery.text() na HTMLDocument objektih (Fix regression in jQuery.text() on HTMLDocument objects) – issue #5264.
• Selector: jQuery.contains prestavljen iz selector modula v core (Move jQuery.contains from the selector to the core module).
• Odstranjen root parameter v jQuery.fn.init (Drop the root parameter of jQuery.fn.init).
• Ne zanaša se na prisotnost splice na inputu (Don’t rely on splice being present on input).
• Manipulation: osnovna TrustedHTML podpora (Add basic TrustedHTML support) – issue #4409.
• parseXML poroča browser napake (Report browser errors in parseXML) – issue #4784.
• jQuery.isXMLDoc sprejme tudi falsy input (Make jQuery.isXMLDoc accept falsy input) – issue #4782.
• Odstranjena podpora za Edge Legacy (Drop support for Edge Legacy) – issue #4568.
• Iframe script se izvede v svojem kontekstu; doc param v globalEval (Fire iframe script in its context, add doc param in globalEval) – issue #4518.
• Slim build: izločena tudi callbacks & deferred modula (Exclude callbacks & deferred modules in the slim build as well).
• Migracija z AMD na ES modules (Migrate from AMD to ES modules).
• Uporabi Array.prototype.flat kjer je podprto (Use Array.prototype.flat where supported) – issue #4320.
• Odstranjene privatne kopije push/sort/splice iz prototipa (Remove private copies of push, sort & splice from the jQuery prototype).
• Dodani .even() in .odd() kot zamenjava za psevdoselektorja :even in :odd (Implement .even() & .odd() to replace POS :even & :odd).
• Deprecate jQuery.trim – issue #4363, nato odstranitev deprecated API-jev – issue #4056.
• IE support testi odstranjeni; zanaša se na document.documentMode (Remove IE-specific support tests, rely on document.documentMode) – issue #4386.
• Drop support: IE <11, iOS <11, Firefox <65, Android Browser & PhantomJS (Drop support for IE <11, iOS <11, Firefox <65, Android Browser & PhantomJS) – issues #3950 in #4299.

Data

• Refaktor za zmanjšanje velikosti (Refactor to reduce size).
• Event/Manipulation: preprečene kolizije z Object.prototype (Prevent collisions with Object.prototype) – issue #3256.
• Ločeni camelCase implementaciji za data in css/effects (Separate data & css/effects camelCase implementations) – issue #3355.

Deferred

• getStackHook preimenovan v getErrorHook – issue #5201.
• Upoštevanje source mapov v jQuery.Deferred.exceptionHook – issue #3179.
• Rename master → primary.

Deprecated

• .hover() je definiran z ne-deprecated metodami (Define .hover() using non-deprecated methods).
• Odstranjen jQuery.trim (Remove jQuery.trim).
• Popravljen AMD parameter order (Fix AMD parameter order).

Dimensions

• Dodana offset prop fallback logika za Firefox pri unreliable TR dimensions (Add offset prop fallback to FF for unreliable TR dimensions) – issue #4529.

Effect / Effects

• Effect: popravljena nepotrebna pogojna izjava v .stop() – issue #4374.
• Effects: odstranjen jQuery.fx.interval (Remove jQuery.fx.interval).

Event

• Uporabi .preventDefault() v beforeunload (Use .preventDefault() in beforeunload).
• Bolj robustno obnašanje inner native eventa v leverageNative – issue #5459.
• Izognitev kolizijam med jQuery.event.special in Object.prototype (Avoid collisions between jQuery.event.special & Object.prototype).
• Poenostavljen check za saved data v leverageNative (Simplify the check for saved data in leverageNative).
• trigger(focus/blur/click) deluje z native handlerji – issue #5015.
• Simulacija focus/blur v IE prek focusin/focusout – issues #4856, #4859, #4950.
• Popravek: focus triggering se ne zlomi po .on(focus).off(focus) – issue #4867.
• Focus re-trigger ne fokusira originalnega elementa nazaj – issue #4382.
• Ne sesuje se, če je element odstranjen ob blur – issue #4417.
• Odstranjen event.which shim – issue #3235.
• Odstranjen jQuery.event.global (remove jQuery.event.global).
• Eventi se pripnejo samo na objekte, ki res sprejemajo data – issue #4397.
• Ne shima več focusin/focusout dogodkov (Stop shimming focusin & focusout events) – issue #4300.
• Prepreči dvojno registracijo dummy handlerjev v leverageNative (Prevent leverageNative from registering duplicate dummy handlers).
• Popravek obravnave več async focus eventov – issue #4350.

Manipulation

• jQuery.cleanData med cleanupom ne preskakuje elementov – issue #5214.
• Splošnejši test za podporo IE (Generalize a test to support IE).
• Podpora $el.html(selfRemovingScript) – issues #5377 in #5378.
• domManip izločen v ločeno datoteko (Extract domManip to a separate file).
• Ne odstranjuje HTML komentarjev iz scriptov – issue #4904.
• Upošteva script crossorigin atribut pri DOM manipulaciji – issue #4542.
• buildFragment se izogne konkatenaciji stringov (Avoid concatenating strings in buildFragment).
• jQuery.htmlPrefilter je identity funkcija (Make jQuery.htmlPrefilter an identity function).
• Selector: uporaba nodeName util kjer je mogoče (Use the nodeName util where possible to save size).

Offset

• Povečana globina iskanja pri določanju “pravega” offset parenta (Increase search depth when finding the ‘real’ offset parent).

Selector

• Odstranjen workaround za :has; testi na iPhone in iPad (Remove the workaround for :has; test both on iPhone & iPad).
• Pravilno deprecated jQuery.expr[ ":" ]/jQuery.expr.filters (Properly deprecate jQuery.expr[ ":" ]/jQuery.expr.filters).
• selector.js je odvisen od attributes/attr.js – issue #5379.
• Odstranjene selector.js odvisnosti iz različnih modulov (Eliminate selector.js depenencies from various modules).
• Ponovno izpostavljen jQuery.find.{tokenize,select,compile,setDocument} – issue #5259.
• Ne zanaša se več na CSS.supports( "selector(...)" ) – issue #5194.
• Backport selection context logike v selector-native – issue #5185.
• Selector listi spet delujejo z qSA – issue #5177.
• Dodana chainable metoda uniqueSort – issue #5166.
• Ponovna uvedba selector-native.js (Re-introduce selector-native.js).
• Manipulation: popravek DOM manip znotraj template contents – issue #5147.
• Odstranjena podpora za legacy pseudos; test custom pseudos (Drop support for legacy pseudos, test custom pseudos).
• Uporabi jQuery :has, če je CSS.supports(selector(...)) nekompatibilen – issue #5098.
• Odstranjen workaround za a:enabled na Chrome <=77 (Remove the "a:enabled" workaround for Chrome <=77).
• Empty attribute selectorji spet delujejo v IE – issue #4435.
• Shallow document comparisons v uniqueSort – issue #4441.
• Test: throw na post-comma invalid selectorjih (Add a test for throwing on post-comma invalid selectors).
• Selectorji z leading combinators spet uporabljajo qSA (Make selectors with leading combinators use qSA again).
• Shallow document comparisons za izogib IE/Edge crashom – issue #4441.
• Zmanjšanje velikosti in poenostavitev setDocument (reduce size, simplify setDocument).
• Uporaba pseudo-class :scope kjer je mogoče – issue #4453.
• Vrnjen querySelectorAll shortcut usage (Bring back querySelectorAll shortcut usage).
• Inline Sizzle v selector modul (Inline Sizzle into the selector module).
• Port Sizzle testov v jQuery (Port Sizzle tests to jQuery).

Support

• Support div ima zagotovljen display: block (ensure display is set to block for the support div) – issue #4832.

Traversing

• Popravek contents() na <object> z otroki v IE (Fix contents() on <object>s with children in IE).
• Popravek contents() na <object> z otroki (Fix contents() on <object>s with children) – issue #4384.

20 let jQuery: reunion fotografija

Ob 20. obletnici se je del ekipe in sodelavcev srečal v Dallasu, John Resig pa se jim je pridružil prek Zooma. Objava 4.0.0 je nastala v času tega srečanja.

Povezave, ki jih je smiselno imeti pri roki

• Upgrade guide 4.0: https://jquery.com/upgrade-guide/4.0/
• jQuery Migrate: https://github.com/jquery/jquery-migrate/
• Prijava težav (issues): https://github.com/jquery/jquery/issues
• Full changelog (compare 3.7.1…4.0.0): https://github.com/jquery/jquery/compare/3.7.1…4.0.0
• Download informacije: https://jquery.com/download/