jQuery 4.0.0 är här: vad som faktiskt ändras (och vad du behöver göra)

Den 14 januari 2006 presenterade John Resig jQuery på BarCamp i New York. Nu, 20 år senare, har jQuery-teamet släppt den slutgiltiga versionen av jQuery 4.0.0 efter en lång utvecklingscykel med flera pre-releases. Det här är den första nya majorversionen på nästan 10 år – och ja, det finns breaking changes. Samtidigt är förväntningen att de flesta projekt ska kunna uppgradera med ganska små kodjusteringar, särskilt om du redan legat nära 3.7.x och undvikit gamla, utfasade API:er.

Många av brytningarna är sådant teamet velat göra i åratal, men som inte varit rimligt i patch- eller minorreleaser: man har skalat bort legacy-kod, rensat bort redan deprecierade API:er, tagit bort interna parametrar som råkat vara åtkomliga via publika funktioner (utan att vara dokumenterade), och stängt några “magiska” beteenden som gjort koden onödigt svår att underhålla.

För migreringen finns både en officiell upgrade guide och en ny release av jQuery Migrate plugin (ett kompatibilitetslager som hjälper dig hitta och hantera legacy-anrop). Om du springer på problem vill teamet att du rapporterar dem via GitHub-issues: https://github.com/jquery/jquery/issues.

Så distribueras 4.0.0 (CDN, npm och slim build)

Som vanligt finns 4.0.0 både via jQuery:s CDN och via npm. Tredjeparts-CDN:er brukar få in versionen efter ett tag, men jQuery-teamet styr inte deras scheman.

Direktlänkar (main build)

https://code.jquery.com/jquery-4.0.0.js
https://code.jquery.com/jquery-4.0.0.min.js

Installera via npm

npm install jquery@4.0.0

npm install jquery@4.0.0

Slim build (utan ajax, Deferreds och Callbacks)

jQuery 4.0.0 fortsätter med en separat “slim”-variant för dig som inte behöver ajax-modulerna, föredrar fristående bibliotek för HTTP, och som ofta låter CSS + klassmanipulation sköta animationer. I 4.0.0 har slim build blivit ännu mindre eftersom Deferreds och Callbacks nu plockats bort (ungefär 19,5 kB gzippat). Slim är samtidigt runt 8 kB gzippat mindre än den fulla versionen.

Deferreds har länge följt Promises A+, så i de flesta fall kan du migrera till native Promise. Native Promises finns i alla webbläsare som jQuery 4.0 stödjer – förutom IE11. Om du måste stödja IE11 är rekommendationen att använda main build eller lägga till en Promise-polyfill.

https://code.jquery.com/jquery-4.0.0.slim.js
https://code.jquery.com/jquery-4.0.0.slim.min.js

Allmän info om alla distributionssätt (inkl. CDN, npm och Bower) finns här: https://jquery.com/download/.

Breaking change: stöd för IE<11 är borttaget (och fler gamla browsers ryker)

Den mest förväntade, men ändå viktiga, brytningen: jQuery 4.0 slutar stödja IE 10 och äldre. Det kan väcka frågan varför IE11 inte rök samtidigt. Planen är enligt teamet att göra det stegvis, och nästa steg – alltså att även ta bort IE11-stöd – är tänkt att landa i jQuery 5.0 (se PR-referens: https://github.com/jquery/jquery/pull/5077). I 4.0 börjar man med att rensa ut kod som specifikt behövts för IE-versioner äldre än 11.

Utöver detta försvinner stöd för fler riktigt gamla miljöer: Edge Legacy, iOS-versioner äldre än de senaste 3, Firefox-versioner äldre än de senaste 2 (med undantag för Firefox ESR) samt Android Browser. För de flesta ska det här inte kräva kodändringar, men om din produkt måste stödja någon av dessa webbläsare bör du stanna på jQuery 3.x.

Trusted Types och CSP: mindre friktion med modern säkerhetspolicy

jQuery 4.0 lägger till stöd för Trusted Types (se referenslänk: https://twitter.com/kkotowicz/status/1445713282128515074). Poängen är att HTML som är inpackad i TrustedHTML (MDN: https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML) ska kunna skickas in till jQuery:s DOM-manipulationsmetoder utan att bryta mot CSP-direktivet require-trusted-types-for.

Parallellt har teamet ändrat hur asynkrona script-requests hanteras ur CSP-perspektiv. Tidigare använde vissa AJAX-flöden redan <script>-taggar för att bevara attribut som crossdomain. Nu har man bytt så att de flesta asynkrona script-requests går via <script>-taggar (PR: https://github.com/jquery/jquery/pull/4763) för att undvika CSP-fel som kan uppstå när inline scripts används.

Det finns fortfarande några situationer där XHR används för asynkrona script-requests – ett exempel är när du skickar in alternativet "headers". I de fallen uppmanar teamet att du i stället använder scriptAttrs. Grundprincipen i 4.0 är: använd <script> när det går, och fall tillbaka till XHR endast när det behövs.

Kodbasen har migrerats från AMD till ES modules (och byggs med Rollup)

En av de största moderniseringarna är att jQuery-källkoden på main-branchen har migrerats från AMD (bakgrunden finns här: https://requirejs.org/docs/whyamd.html) till ES modules (PR: https://github.com/jquery/jquery/pull/4541). Källkoden har visserligen alltid publicerats med releaser på npm och GitHub, men historiskt har den inte gått att importera som moduler utan RequireJS (https://requirejs.org/), eftersom RequireJS också var jQuery:s föredragna byggverktyg.

I och med 4.0 har man gått över till Rollup för paketeringen (https://rollupjs.org/introduction/) och man kör testsviten även mot ES modules separat. Resultatet är att jQuery blir mer kompatibelt med moderna build tools och workflows – och även mer direkt användbart i browsers via <script type=module>.

Deprecierade API:er är borttagna (byt till native där det går)

I en majorrelease passar man på att faktiskt städa. Ett antal funktioner har varit deprecierade i flera versioner och tas nu bort helt. Motiveringen är att de antingen alltid varit tänkta som interna, eller att de numera har bra native-motsvarigheter i alla webbläsare som jQuery 4.0 stödjer.

De borttagna funktionerna är:

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

Rekommendationen är att använda native-alternativ som Array.isArray(), JSON.parse(), String.prototype.trim() och Date.now().

Kombinationen av att rensa ut de här deprecierade API:erna och att kapa gammal IE-kod gör att paketet enligt releasen blir över 3 kB mindre (gzippat).

Interna Array-metoder är borttagna från jQuery-prototypen

jQuery-prototypen har länge innehållit Array-metoder som aldrig betett sig som “vanliga” jQuery-metoder och som varit avsedda för internt bruk: push, sort och splice. I 4.0 tas de bort från prototypen.

Om du (eller ett plugin) råkat använda dem direkt på en jQuery-collection finns en rak ersättning. Exemplet i releasen:

// Förr (om du råkat göra så här):
// $elems.push( elem )

// Nu:
[].push.call( $elems, elem );

// Förr (om du råkat göra så här):
// $elems.push( elem )

// Nu:
[].push.call( $elems, elem );

Fokus/blur-event: ordningen följer nu W3C-spec (breaking change)

En subtil men potentiellt jobbig brytning: ordningen på fokus-relaterade events. Under lång tid har browsers inte varit överens om eventordningen för focusin, focusout, focus och blur. Nu har de senaste versionerna av alla browsers som jQuery 4.0 stödjer konvergerat till en gemensam ordning.

Problemet är att den ordningen skiljer sig från den konsekventa ordning som jQuery valde för flera år sedan. Det blir därför en breaking change för kod som implicit förlitar sig på jQuerys tidigare beteende.

Från och med jQuery 4.0 slutar man att override:a native-beteende. Det innebär att alla browsers utom IE följer nuvarande W3C-specifikation med följande ordning:

blur
focusout
focus
focusin

I tidigare jQuery-versioner var ordningen:

focusout
blur
focusin
focus

En ironisk detalj som nämns i releasen: den enda browsern som någonsin följde den gamla W3C-specen (innan den uppdaterades 2023) var Internet Explorer.

Övriga highlights som är bra att känna till (utan att läsa hela diffen)

Även om det här inlägget fokuserar på de största förändringarna finns det en hel del detaljer i changeloggen. Några punkter som ofta dyker upp i verkliga kodbaser:

Ajax: beteenden kring scripts, JSONP och binär data har skruvats

Array-data ska inte behandlas som binärt.
processData: true tillåts även för binär data.
Binär data stöds (inklusive FormData).
headers stöds för script transport även cross-domain (issue #5142).
null accepteras som success callback i jQuery.get (issue #4989).
Scripts auto-exekveras inte om du inte anger dataType (issue #4822).
responseJSON fungerar för felaktiga same-domain JSONP-requests.
JSONP error script responses exekveras (issue #4771).
CSP-fel i script transport för async requests undviks (issue #3969).
Auto-promotion från json till jsonp tas bort (issues #1799, #3376).
contentType skrivs över av response header content-type om den finns (issue #4119).
AJAX event aliases deprecieras (alias/inline till deprecated).
Scripts körs inte vid misslyckade HTTP-svar (issue #4250).
jQuery.ajaxSettings.xhr förenklas (issue #1967).

Attributes/CSS: flera kantfall och signaturer har städats

.attr( name, false ) tar bort attributet för alla icke-ARIA-attribut (issue #5388).
Attributvärden strängifieras inte i setter (issue #4948).
Signaturen toggleClass(boolean|undefined) tas bort (issue #3388).
val() refaktoreras: strippar inte carriage return och isolerar IE-workarounds.
type-attr hook sätts inte utanför IE.
Fixar dimensioner för table <col> (issue #5628).
Cache i finalPropName tas bort.
Tester uppdateras och körbara under CSS Zoom (issue #5489).
Stödtest för reliableTrDimensions fixas för initialt dolda iframes.
Selektor: align med 3.x, tar bort yttre selector.js wrapper.
Stödtest för reliableTrDimensions funkar med Bootstrap CSS (issue #5270).
offsetHeight( true ) m.fl. inkluderar negativa marginaler (issue #3982).
Whitespace-only CSS-variabler returnerar undefined (#5120).
Whitespace trimmas inte för undefined custom property (issue #5105).
addClass( array ) skippar falsy values, komprimerad kod (issue #4998).
Whitespace runt CSS Custom Properties trimmas (issue #4926).
show, hide och toggle ingår i slim build.
Opacity CSS hook tas bort.
Workaround för buggy getComputedStyle på table rows i IE/Edge (issue #4490).
jQuery slutar auto-appenda “px” till properties, med några undantag (issue #2795).

Core/Selector/Event: flera interna förenklingar och nya/ändrade ytor

$.parseHTML byter från document.implementation till DOMParser.
Exports-setup fixas så bundlers funkar med ESM & CommonJS (issue #5416).
Mer info om named exports läggs till.
Factory flyttas till separata exports.
Named exports används i src/ (issue #5262).
Regression fixas i jQuery.text() på HTMLDocument (issue #5264).
jQuery.contains flyttas från selector till core-modulen.
Root-parametern i jQuery.fn.init tas bort.
Kod ska inte förlita sig på att splice finns på input.
Grundläggande TrustedHTML-stöd i manipulation (issue #4409).
Browser-fel rapporteras i parseXML (issue #4784).
jQuery.isXMLDoc accepterar falsy input (issue #4782).
Edge Legacy-stöd tas bort (issue #4568).
Iframe-script exekveras i sin kontext; doc-param i globalEval (issue #4518).
Array.prototype.flat används där det stöds (issue #4320).
Privata kopior av push/sort/splice tas bort från prototypen.
.even() och .odd() implementeras som ersättning för POS :even och :odd.
IE-specifika support tests tas bort; document.documentMode används.
Event: event.which-shim tas bort (issue #3235).
jQuery.event.global tas bort.
Stoppar shimming av focusin & focusout (issue #4300).
Selector: workaround för :has tas bort; testas på iPhone & iPad.
jQuery.expr[ ":" ] / jQuery.expr.filters deprecieras korrekt.
jQuery.find.{tokenize,select,compile,setDocument} exponeras igen (issue #5259).
uniqueSort blir chainable-metod (issue #5166).
selector-native.js återintroduceras.
Sizzle inlines i selector-modulen och Sizzle-tester portas till jQuery.

Uppgraderingsstrategi i praktiken

Eftersom 4.0.0 är en major är det värt att göra uppgraderingen lite mer kontrollerat än “bumpa version och hoppas”. Den officiella vägen är att:

Läsa upgrade guide och jämföra mot din kodbas (särskilt om du har plugins/legacy).
Köra med jQuery Migrate plugin under test för att hitta de vanligaste legacy-mönstren.
Se över browser support-krav: behöver du IE10/Edge Legacy/Android Browser eller gammal iOS/Firefox, stanna på jQuery 3.x.
Om du har CSP hårt låst: verifiera script-loader-flöden och att du inte förlitar dig på inline-script-beteenden.
Testa fokus/blur-flöden (formulär, modaler, custom widgets) eftersom eventordningen ändrats.
Om du kör slim build: dubbelkolla att du inte behöver Deferreds/Callbacks eller ajax – annars byt till main build eller använd native Promises (med ev. polyfill för IE11).

20 år jQuery – och en release mitt i en återträff

I releasen nämns också att många ur communityt träffades för en återförening i Dallas, och att John Resig deltog via Zoom. 4.0.0-inlägget publicerades medan gruppen var samlad.

Gruppfoto från jQuery-återträff (20-årsjubileum) — *Forrás: blog.jquery.com / The jQuery Foundation*

Full changelog och jämförelse

Vill du gräva i varenda commit finns en komplett jämförelse mellan 3.7.1 och 4.0.0 här: 4.0.0.

Tacklistan (contributors)

Releasen tackar alla som bidragit med patchar, buggrapporter och testning, inklusive: Alex, Ahmed S. El-Afifi, fecore1, Dallas Fraser, Richard Gibson, Michał Gołębiowski-Owczarek, Pierre Grimaud, Gabriela Gutierrez, Jonathan, Necmettin Karakaya, Anders Kaseorg, Wonseop Kim, Simon Legner, Shashanka Nataraj, Pat O’Callaghan, Christian Oliff, Dimitri Papadopoulos Orfanos, Wonhyoung Park, Bruno PIERRE, Baoshuo Ren, Beatriz Rezener, Sean Robinson, Ed Sanders, Timo Tijhof, Tom, Christian Wenz, ygj6 samt hela jQuery-teamet.