Novità di jQuery 3 - 10 Funzionalità più interessanti
jQuery 3.0, la nuova versione principale di jQuery è finalmente stata rilasciata. La community degli sviluppatori web ha atteso questo importante passo da ottobre 2014, quando il team di jQuery ha iniziato a lavorare sulla nuova versione principale fino ad ora, giugno 2016, quando la rilascio finale è fuori.
La nota di rilascio promette a più sottile e più veloce jQuery, con retrocompatibilità in mente. In questo post, daremo un'occhiata ad alcune delle nuove funzionalità di jQuery 3.0 per darti una panoramica su come cambia il panorama JavaScript.
Dove iniziare
Se vuoi scaricare jQuery 3.0 per sperimentare da solo, vai direttamente alla pagina di download. Vale anche la pena dare un'occhiata alla Guida all'aggiornamento o al codice sorgente.
Se vuoi verificare come funziona il tuo progetto esistente con jQuery 3.0, puoi provare il plugin jQuery Migrate che identifica i problemi di compatibilità nel tuo codice. Puoi anche dare uno sguardo ai traguardi futuri.
Questo articolo non copre tutti le nuove funzionalità di jQuery 3.0, solo le più interessanti: migliore qualità del codice, integrazione delle nuove funzionalità di ECMAScript 6, una nuova API per le animazioni, un nuovo metodo per l'escaping delle stringhe, maggiore supporto SVG, migliori callback asincroni, migliore compatibilità con i siti reattivi e maggiore sicurezza.
1. I vecchi metodi di rimozione di IE sono stati rimossi
Uno degli obiettivi principali della nuova major release era di farlo più veloce e più lucido, quindi i vecchi hack e soluzioni alternative correlate a IE9- è stato rimosso. Ciò significa che se si desidera o se è necessario supportare IE6-8, è necessario continuare a utilizzare l'ultima versione 1.12 rilascio, come anche il 2.x la serie non ha il pieno supporto per i vecchi Internet Explorer (IE9-). Consulta le note sul supporto del browser nei documenti.
Nota che ci sono anche molte funzionalità deprecate in jQuery 3. Un grosso difetto della Guida all'aggiornamento è che le funzionalità obsolete - a partire da giugno 2016 - non sono raggruppate, quindi se sei interessato a queste, dovrai cercarle con lo strumento di ricerca del tuo browser ( Ctrl + F).
2. jQuery 3.0 Esegue in modalità rigorosa
Poiché la maggior parte dei browser supportati da jQuery 3 supportano la modalità rigorosa, la nuova versione principale è stata creata tenendo presente questa direttiva.
Sebbene jQuery 3 sia stato scritto in modalità rigorosa, è importante saperlo il tuo codice non è richiesto per essere eseguito in modalità rigorosa, quindi tu non è necessario riscrivere il tuo codice jQuery esistente se desideri migrare a jQuery 3. Modalità JavaScript rigorosa e non rigida può tranquillamente coesistere.
C'è un'eccezione: alcune versioni di ASP.NET questo - a causa della modalità rigorosa - lo sono non compatibile con jQuery 3. Se sei coinvolto in ASP.NET, puoi dare un'occhiata ai dettagli qui nei documenti.
3. Per ... di Loops è Introdotto
jQuery 3 supporta il for ... di statement, un nuovo tipo di per loop, introdotto in ECMAScript 6. Offre un modo più diretto per loop su oggetti iterabili, come matrici, mappe e set.
In jQuery, il per ... di il ciclo può sostituire il precedente $ .each (...) sintassi e può rendere più semplice il loop degli elementi di una raccolta jQuery.
Si noti che il per ... di loop lo farà solo lavoro sia in un ambiente che supporta ECMAScript 6, o se tu usa un compilatore JavaScript come Babel.
4. Animazioni Hai una nuova API
jQuery 3 usa l'API requestAnimationFrame () per eseguire animazioni, realizzare animazioni correre più liscio e più veloce. La nuova API è utilizzata solo nei browser che la supportano; per i browser più vecchi (ad es. IE9) jQuery utilizza la sua API precedente come metodo di fallback per visualizzare le animazioni.
RequestAnimationFrame è uscito per un po ', se sei interessato a quello che sa o perché dovresti usarlo, CSS Tricks ha un buon post su di esso.
5. Nuovo metodo per sfuggire alle stringhe con significato speciale
Il nuovo jQuery.escapeSelector () metodo ti permette di sfuggire a stringhe o caratteri significa qualcos'altro in CSS per essere in grado di usalo in un jQuery-selector; senza sfuggire l'interprete JavaScript non può capirlo correttamente.
I documenti ci aiutano a capire meglio questo metodo con il seguente esempio:
“Ad esempio, se un elemento nella pagina ha un ID di “a B c D e F” non può essere selezionato con $ ("# abc.def") perché il selettore è analizzato come “un elemento con id 'Abc' questo ha anche una classe 'Def'. Tuttavia, può essere selezionato con $ ("#" + $ .escapeSelector ("abc.def")).”
Non sono sicuro di quanto spesso avvenga un caso simile, ma se ti imbatti in un problema come questo, ora hai un modo semplice per risolverlo rapidamente.
6. Metodi di manipolazione della classe Supporto SVG
Sfortunatamente, jQuery 3 ancora non supporta completamente SVG, ma i metodi jQuery che manipolano i nomi delle classi CSS, come .addClass () e .hasClass (), ora può essere usato per indirizzare i documenti SVG anche. Ciò significa che puoi modificare (aggiungere, rimuovere, attivare) o trovare le classi con jQuery in grafica vettoriale scalabile, quindi modellare le classi con i CSS.
7. Gli oggetti posticipati sono ora compatibili con JS Promises
Promesse JavaScript - oggetti usati per calcoli asincroni - sono stati standardizzati in ECMAScript 6; il loro comportamento e caratteristiche sono specificati negli standard Promises / A +.
In jQuery 3, Oggetti differiti sono stati resi compatibili con i nuovi standard Promises / A +. I differiti sono oggetti concatenabili ciò lo rende possibile creare code di richiamata.
La nuova funzionalità cambia come vengono eseguite le funzioni di callback asincrone; promesse consentire agli sviluppatori di scrivere codice asincrono più vicino nella logica al codice sincrono.
Vedi esempi di codice dalla Guida all'aggiornamento oppure dai un'occhiata a questo fantastico tutorial di Scotch.io sulle basi delle Promesse di JavaScript.
8. jQuery.when () Interpreta multi-argomenti diversamente
Il $ .Quando () metodo fornisce un modo per eseguire funzioni di callback. Fa parte di jQuery dalla versione 1.5. È un metodo flessibile; funziona anche con argomenti zero e può accettare uno o più oggetti come argomenti.
jQuery 3 cambia il modo in cui gli argomenti di $ .Quando () sono interpretati quando contengono il $ .Poi () metodo con cui è possibile passare ulteriori callback come argomenti al $ .Quando () metodo.
In jQuery 3, se si aggiunge un argomento di input con il poi() metodo a $ .Quando (), l'argomento sarà interpretato come un "percettibile" compatibile con Promessa.
Ciò significa che il $ .quando il metodo sarà in grado di accetta una gamma di input boarder, come il nativo ES6 Promises e Bluebird Promises, che rende possibile scrivere callback asincroni più sofisticati.
9. Nuovo Mostra / Nascondi logica
Al fine di aumentare compatibilità con design reattivo, il codice relativo a mostrando e nascondendo elementi è stato aggiornato in jQuery 3.
Da ora in poi, il .mostrare(), .nascondere(), e .ginocchiera () i metodi si concentreranno su stili in linea, invece di stili calcolati, in questo modo lo faranno meglio rispettare le modifiche del foglio di stile.
Il nuovo codice rispetta il display valori di fogli di stile ogni volta che è possibile, il che significa che le regole CSS possono cambia dinamicamente su eventi come riorientamento del dispositivo e ridimensionamento della finestra.
I documenti affermano che il risultato più importante sarà:
"Di conseguenza, gli elementi scollegati sono non è più considerato nascosto a meno che non siano in linea display: nessuno;, e quindi .ginocchiera () volontà non li differenzi più dagli elementi collegati a partire da jQuery 3.0. "
Se vuoi capire meglio il risultati della nuova logica show / hide, ecco una interessante discussione su Github a riguardo.
Gli sviluppatori di jQuery hanno anche pubblicato una tabella di Google Docs su come funzionerà il nuovo comportamento in diversi casi d'uso.
10. Protezione extra contro gli attacchi XSS
jQuery 3 aggiunto un ulteriore livello di sicurezza contro gli attacchi Cross-Site Scripting (XSS) richiedendo agli sviluppatori di specificare dataType: "script" nelle opzioni del $ .Ajax () e il $ .Get () metodi.
In altre parole, se vuoi eseguire richieste di script tra domini, tu deve dichiararlo nelle impostazioni di questi metodi.
Secondo i documenti, il nuovo requisito è utile quando un "sito remoto" fornisce contenuti non di script ma in seguito decide di farlo servire uno script che ha intenzioni malevole". Il cambiamento non influisce sul $ .GetScript () metodo, come imposta il dataType: "script" opzione esplicitamente.
