Twintig jaar nadat John Resig jQuery in 2006 op BarCamp NYC introduceerde, is jQuery 4.0.0 nu officieel uit. Dit is de eerste grote versie-sprong in bijna tien jaar en hij komt met een duidelijke boodschap: minder legacy, meer moderne browser- en security-realiteit. Dat betekent ook dat er breaking changes in zitten-maar volgens het jQuery-team kunnen de meeste projecten met minimale aanpassingen over.<\/p>\n\n\n\n
Belangrijk voor je upgrade-pad: er is een offici\u00eble upgrade guide<\/a> en er staat een verse jQuery Migrate plugin release<\/a> klaar om incompatibiliteiten te detecteren en (waar mogelijk) te overbruggen. Issues kun je melden via de jQuery issue tracker<\/a>.<\/p>\n\n\n\n De grote lijn: het team heeft eindelijk opruimwerk kunnen doen dat in patch- en minor-releases niet wenselijk is. Concreet gaat het om het wegknippen van legacy-code, het verwijderen van eerder gedepricieerde API\u2019s, het schrappen van interne parameters die ooit per ongeluk \u201cpubliek\u201d werden, en het stoppen met bepaalde \u201cmagic\u201d gedragingen die te complex of te moeilijk te onderhouden waren.<\/p>\n\n\n\n Een leuke bijvangst: door het combineren van (1) het verwijderen van oude IE-ondersteuning en (2) het weghalen van deprecated API\u2019s is de library meer dan 3k bytes kleiner (gzipped)<\/strong>.<\/p>\n\n\n\n jQuery 4.0 laat ondersteuning voor IE 10 en ouder<\/strong> vallen. Waarom niet meteen IE 11? Dat gebeurt gefaseerd: de volgende stap-het weghalen van IE 11-ondersteuning-staat gepland voor jQuery 5.0<\/strong> (volgens de verwijzing in de release notes: pull request #5077<\/a>). Voor nu is de winst vooral dat alle speciale paden voor IE<11 uit de code kunnen.<\/p>\n\n\n\n Daarnaast verdwijnen ook een paar andere \u201cheel oude\u201d browserdoelen uit de support matrix:<\/p>\n\n\n\n Volgens het jQuery-team hoef je hier meestal niets voor te doen. Maar als jouw product w\u00e9l nog op deze browsers moet draaien, dan is het advies simpel: blijf op jQuery 3.x<\/strong>.<\/p>\n\n\n\n jQuery 4.0 voegt ondersteuning toe voor Trusted Types<\/strong>. Trusted Types is een browsermechanisme dat helpt om DOM XSS te voorkomen door te eisen dat \u201cgevaarlijke\u201d sinks (zoals Daarnaast is er een praktische CSP-verbetering rondom script-loads via AJAX. Waar jQuery al in sommige gevallen Er blijven uitzonderingen waar alsnog XHR wordt gebruikt voor async script requests. De release noemt expliciet het geval waarin je de Een fundamentele modernisering is de migratie van de jQuery-broncode op de In jQuery 4.0 is de packaging verschoven naar Rollup<\/strong> en worden de ES modules ook apart getest. Dat maakt jQuery beter compatibel met moderne bundlers en workflows, en ook direct bruikbaar in browsers via In een major release hoort opruimen-en dat is precies wat er gebeurd is. Een reeks functies die al meerdere versies als deprecated gemarkeerd waren, is nu echt verwijderd. Dit waren ofwel interne helpers die ooit per ongeluk \u201cpubliek\u201d werden, of helpers die inmiddels native equivalents hebben in alle ondersteunde browsers.<\/p>\n\n\n\n Dit zijn de verwijderde functies (zoals in de release opgesomd): Vervang ze door native varianten waar dat kan, bijvoorbeeld:<\/p>\n\n\n\n De jQuery prototype had al lang een paar Array-methodes hangen die nooit echt jQuery-achtig aanvoelden en bedoeld waren voor intern gebruik: Als je ze toch gebruikte (bewust of onbewust), dan moet je overstappen op de echte Array-varianten. Het team geeft dit voorbeeld:<\/p>\n\n\n\nWat is de insteek van jQuery 4.0.0?<\/h2>\n\n\n\n
Breaking change #1: IE < 11 is niet meer ondersteund<\/h2>\n\n\n\n
\n\n
Security: Trusted Types en beter gedrag onder CSP<\/h2>\n\n\n\n
innerHTML<\/code>) alleen waarden accepteren die expliciet als veilig zijn aangemerkt-bijvoorbeeld via TrustedHTML<\/code>. In jQuery 4.0 kun je HTML die verpakt is in TrustedHTML<\/code><\/a> gebruiken als input voor jQuery-manipulatiemethodes, zonder dat je botst met de require-trusted-types-for<\/code> directive in je Content Security Policy (CSP). Meer context: de release verwijst ook naar Trusted Types<\/a>.<\/p>\n\n\n\n<script><\/code>-tags gebruikte (om attributes zoals crossdomain<\/code> te behouden), is dit nu breder doorgevoerd: de meeste asynchrone script requests gebruiken nu <script><\/code> tags<\/strong> om CSP-problemen door inline scripts te vermijden (zie PR #4763<\/a>).<\/p>\n\n\n\n"headers"<\/code> optie meegeeft; in die situatie kun je beter scriptAttrs<\/code> gebruiken in plaats van headers<\/code>. In alle andere gevallen probeert jQuery nu \u201cwaar mogelijk\u201d een <script><\/code>-tag te gebruiken.<\/p>\n\n\n\nDe broncode is gemigreerd naar ES modules (en dat merk je in moderne tooling)<\/h2>\n\n\n\n
main<\/code> branch van AMD<\/strong> naar ES modules<\/strong>. Historisch werd de source wel gepubliceerd (npm en GitHub), maar je kon die niet rechtstreeks importeren als modules zonder RequireJS<\/strong>, dat lang de build tool van keuze was.<\/p>\n\n\n\n<script type=module><\/code>.<\/p>\n\n\n\nDeprecated API\u2019s zijn verwijderd (vervang ze door native alternatieven)<\/h2>\n\n\n\n
jQuery.isArray<\/code>, jQuery.parseJSON<\/code>, jQuery.trim<\/code>, jQuery.type<\/code>, jQuery.now<\/code>, jQuery.isNumeric<\/code>, jQuery.isFunction<\/code>, jQuery.isWindow<\/code>, jQuery.camelCase<\/code>, jQuery.nodeName<\/code>, jQuery.cssNumber<\/code>, jQuery.cssProps<\/code> en jQuery.fx.interval<\/code>.<\/p>\n\n\n\n\n\n
Array.isArray()<\/code> i.p.v. jQuery.isArray<\/code><\/li>\n\n\nJSON.parse()<\/code> i.p.v. jQuery.parseJSON<\/code><\/li>\n\n\nString.prototype.trim()<\/code> i.p.v. jQuery.trim<\/code><\/li>\n\n\nDate.now()<\/code> i.p.v. jQuery.now<\/code><\/li>\n\n<\/ul>\n\n\n\nBreaking change #2: interne Array-methodes zijn uit de jQuery prototype gehaald<\/h2>\n\n\n\n
push<\/code>, sort<\/code> en splice<\/code>. In jQuery 4.0 zijn deze methodes verwijderd<\/strong> van de prototype.<\/p>\n\n\n\n