Startpagina » Coding » Wat is nieuw in jQuery 3 - 10 coolste functies

    Wat is nieuw in jQuery 3 - 10 coolste functies

    jQuery 3.0, de nieuwe grote release van jQuery eindelijk vrijgegeven. De webontwikkelaarsgemeenschap wachtte op deze belangrijke stap sinds oktober 2014, toen het jQuery-team begon te werken aan de nieuwe hoofdversie tot juni 2016, toen de Laatste versie is uit.

    De release-opmerking belooft een slanker en sneller jQuery, met achterwaartse compatibiliteit in gedachten. In dit bericht bekijken we enkele van de nieuwe functies van jQuery 3.0 om u een overzicht te geven over hoe het JavaScript-landschap verandert.

    Waar te beginnen

    Als je jQuery 3.0 wilt downloaden om zelf te experimenteren, ga je naar de downloadpagina. Het is ook de moeite waard om de Upgrade-gids of de broncode te bekijken.

    Als u wilt testen hoe uw bestaande project met jQuery 3.0 werkt, kunt u een poging wagen om de plug-in jQuery Migrate te gebruiken die compatibiliteitsproblemen in uw code identificeert. U kunt ook een kijkje nemen in toekomstige mijlpalen.

    Dit artikel dekt niet allemaal de nieuwe functies van jQuery 3.0, alleen de interessantere: betere codekwaliteit, integratie van nieuwe ECMAScript 6-functies, een nieuwe API voor animaties, een nieuwe methode voor het ontsnappen van strings, verhoogde SVG-ondersteuning, verbeterde async callbacks, betere compatibiliteit met responsieve sites en verhoogde beveiliging.

    1. Oude IE-oplossingen zijn verwijderd

    Een van de hoofddoelen van de nieuwe belangrijke release was om het te maken sneller en slanker, daarom hadden de oude hacks en tijdelijke oplossingen betrekking op IE9- is verwijderd. Dit betekent dat als u IE6-8 wilt of nodig hebt, u het nieuwste moet blijven gebruiken 1.12 release, zoals zelfs de 2.x serie heeft geen volledige ondersteuning voor oudere Internet Explorer (IE9-). Bekijk de opmerkingen over browserondersteuning in de documenten.

    jQuery Docs: Browser-ondersteuning

    Merk op dat er ook zijn veel verouderde functies in jQuery 3. Een grote tekortkoming van de Upgradehandleiding is dat de verouderde functies - vanaf juni 2016 - niet gegroepeerd zijn, dus als u erin geïnteresseerd bent, moet u ze opzoeken met de zoekfunctie van uw browser ( Ctrl + F).

    jQuery-upgradehandleiding

    2. jQuery 3.0 werkt in de strikte modus

    Omdat de meeste browsers die door jQuery 3 worden ondersteund, de strikte modus ondersteunen, zijn de nieuwe belangrijke releases gebouwd met deze richtlijn in gedachten.

    Hoewel jQuery 3 in strikte modus is geschreven, is het belangrijk dat te weten uw code hoeft niet in de strikte modus te worden uitgevoerd, dus jij hoef niet te herschrijven uw bestaande jQuery-code als u wilt migreren naar jQuery 3. Strict & non-strict mode JavaScript kunnen gelukkig naast elkaar bestaan.

    Er is één uitzondering: sommige versies van ASP.NET die - vanwege de strenge modus - dat zijn niet compatibel met jQuery 3. Als u betrokken bent bij ASP.NET, kunt u de details hier in de documenten bekijken.

    3. Voor ... van Loops is geïntroduceerd

    jQuery 3 ondersteunt de voor ... of statement, een nieuw soort voor loop, geïntroduceerd in ECMAScript 6. Het geeft een meer directe manier om loop over iterabele objecten, zoals arrays, kaarten en sets.

    In jQuery, de voor ... van loop kan de eerste vervangen $ .each (...) syntaxis, en kan het gemakkelijker maken om door de elementen van een jQuery-verzameling te bladeren.

    Code Voorbeeld van de Upgradehandleiding

    Merk op dat de voor ... van loop zal alleen werk in een omgeving die ondersteunt ECMAScript 6, of als jij gebruik een JavaScript-compiler zoals Babel.

    4. Animaties Hebt u een nieuwe API?

    jQuery 3 gebruikt de requestAnimationFrame () API voor het uitvoeren van animaties, het maken van animaties vloeiender en sneller. De nieuwe API wordt alleen gebruikt in browsers die dit ondersteunen; voor oudere browsers (i.e. IE9) gebruikt jQuery zijn vorige API als een terugvalmethode om animaties weer te geven.

    RequestAnimationFrame is al een tijdje uit, als je geïnteresseerd bent in wat het weet of waarom je het zou moeten gebruiken, heeft CSS Tricks een goede post erover.

    www.caniuse.com

    5. Nieuwe methode voor het ontsnappen van strings met speciale betekenis

    De nieuwe jQuery.escapeSelector () methode kunt u aan tekenreeksen of tekens ontsnappen betekent iets anders in CSS om te kunnen gebruik het in een jQuery-selector; zonder te ontsnappen aan de JavaScript-interpreter kan het niet goed begrijpen.

    De documentatie helpt ons deze methode beter te begrijpen met het volgende voorbeeld:

    Bijvoorbeeld, als een element op de pagina een ID van heeft “abc.def” het kan niet geselecteerd worden met $ ("# abc.def") omdat de selector is geparseerd als “een element met id 'abc' dat heeft ook een klasse 'Def'. Het kan echter worden geselecteerd met $ ("#" + $ .escapeSelector ("abc.def")).”

    Ik weet niet zeker hoe vaak een dergelijk geval plaatsvindt, maar als je een probleem als dit tegenkomt, kun je dit nu op een eenvoudige manier oplossen.

    6. Klasse manipulatiemethoden Ondersteuning SVG

    Helaas is jQuery 3 nog steeds ondersteunt SVG niet volledig, maar de jQuery-methoden die CSS-klassenamen manipuleren, zoals .addClass () en .hasClass (), nu kan worden gebruikt om doel SVG-documenten ook. Dit betekent dat je wijzigingen kunt aanbrengen (toevoegen, verwijderen, schakelen) of klassen kunt vinden met jQuery in schaalbare vectorafbeeldingen, style dan de klassen met CSS.

    7. Uitgestelde objecten zijn nu compatibel met JS-beloften

    JavaScript-beloften - gebruikte objecten voor asynchrone berekeningen - zijn gestandaardiseerd in ECMAScript 6; hun gedrag en functies zijn gespecificeerd in de Promises / A + -standaarden.

    In jQuery 3, Uitgestelde objecten compatibel gemaakt met de nieuwe Promises / A + -standaarden. Uitstel is te koppelen objecten die het mogelijk maken om maak callback-wachtrijen aan.

    De nieuwe functie verandert hoe asynchrone callback-functies worden uitgevoerd; Promises ontwikkelaars toestaan ​​om asynchrone code te schrijven die dichter in de logica staat dan synchrone code.

    Zie codevoorbeelden van de Upgradehandleiding of bekijk deze geweldige Scotch.io-zelfstudie over de basisprincipes van JavaScript-beloften.

    8. jQuery.when () Interpreteert meerdere argumenten anders

    De $ .Wanneer () methode biedt een manier om voer callback-functies uit. Het is onderdeel van jQuery sinds versie 1.5. Het is een flexibele methode; het werkt ook met nul argumenten, en het kan ook een of meer objecten als argumenten accepteren.

    jQuery 3 verandert de manier waarop argumenten van $ .Wanneer () worden geïnterpreteerd wanneer ze de bevatten $ .Then () methode waarmee je extra callbacks als argumenten aan de. kunt doorgeven $ .Wanneer () methode.

    api.jquery.com

    In jQuery 3, als u een invoerargument toevoegt met de dan() methode om $ .Wanneer (), het argument zal zijn geïnterpreteerd als een Promise-compatibel "opneembaar".

    Dit betekent dat de $ .wanneer methode zal in staat zijn om accepteer een boarderbereik van ingangen, zoals native ES6 Promises en Bluebird Promises, die het mogelijk maken om meer geavanceerde asynchrone callbacks te schrijven.

    9. Nieuwe Logica tonen / verbergen

    Om het te laten toenemen compatibiliteit met responsief ontwerp, de code gerelateerd aan elementen tonen en verbergen is bijgewerkt in jQuery 3.

    Vanaf nu is het .laten zien(), .verbergen(), en .knevel () methoden zullen focussen op inline stijlen, in plaats van computergestuurde stijlen, op deze manier zullen ze beter respect voor veranderingen in stylesheets.

    De nieuwe code respecteert de tonen waarden van stylesheets wanneer het mogelijk is, wat betekent dat CSS-regels dat kunnen dynamisch veranderen bij gebeurtenissen zoals heroriëntatie van het apparaat en venstergrootte.

    De documentatie stelt dat het belangrijkste resultaat is:

    "Als gevolg hiervan zijn niet-verbonden elementen niet langer als verborgen beschouwd tenzij ze inline zijn Geen weergeven;, en daarom .knevel () zullen niet langer differentiëren van verbonden elementen vanaf jQuery 3.0. "

    Als u het beter wilt begrijpen resultaten van de nieuwe show / hide-logica, hier is een interessante Github-discussie over.

    jQuery-ontwikkelaars hebben ook een Google Docs-tabel gepubliceerd over hoe het nieuwe gedrag werkt in verschillende gebruikssituaties.

    10. Extra bescherming tegen XSS-aanvallen

    jQuery 3 toegevoegd een extra beveiligingslaag tegen Cross-Site Scripting (XSS) -aanvallen door ontwikkelaars te verplichten op te geven dataType: "script" in de opties van de $ .Ajax () en de $ .Get () methoden.

    Met andere woorden, als u cross-domein scriptverzoeken wilt uitvoeren, u moet dit verklaren in de instellingen van deze methoden.

    Slideshare door Andrew Kerr: Cross-site scripting (dia 17)

    Volgens de documenten is de nieuwe vereiste handig wanneer een "externe site levert inhoud zonder scripts maar beslist later om dien een script met kwaadaardige bedoelingen"De wijziging heeft geen invloed op de $ .GetScript () methode, omdat deze de dataType: "script" optie expliciet.