Ce este nou în jQuery 3 - 10 Caracteristici superbe
jQuery 3.0, noua lansare majoră a jQuery a fost lansată în cele din urmă. Comunitatea dezvoltatorilor web a așteptat acest pas important din octombrie 2014, când echipa jQuery a început să lucreze la noua versiune majoră până în prezent, în iunie 2016, când Lansarea finală este afara.
Nota de lansare promite a mai subțire și mai rapidă jQuery, cu compatibilitate înapoi in minte. În acest post, ne uităm la unele dintre noile caracteristici ale jQuery 3.0 pentru a vă oferi o imagine de ansamblu asupra modului în care modifică peisajul JavaScript.
Unde să încep
Dacă doriți să descărcați jQuery 3.0 pentru a vă experimenta, mergeți direct la pagina de descărcare. De asemenea merită să aruncați o privire la Ghidul de upgrade sau la codul sursă.
Dacă doriți să testați cum funcționează proiectul dvs. existent cu jQuery 3.0, puteți încerca pluginul jQuery Migrate care identifică problemele de compatibilitate din codul dvs. Puteți, de asemenea, să vă uitați la reperele viitoare.
Acest articol nu acoperă toate noile caracteristici ale jQuery 3.0, doar cele mai interesante: o calitate mai bună a codului, integrarea noilor caracteristici ECMAScript 6, un nou API pentru animații, o nouă metodă de scăpare a șirurilor de caractere, suportul SVG crescut, apelurile asincronizate îmbunătățite, compatibilitatea mai bună cu site- , și o securitate sporită.
1. Soluțiile vechi de IE au fost eliminate
Unul dintre principalele obiective ale noului release major a fost acela de al face mai rapid și mai elegant, prin urmare, vechile hacks și soluții legate de IE9- a fost eliminat. Aceasta înseamnă că dacă doriți sau trebuie să sprijiniți IE6-8, va trebui să continuați să utilizați cele mai recente 1.12 eliberare, ca chiar și 2.x seria nu are suport complet pentru Internet Explorers mai vechi (IE9-). Consultați notele privind asistența browserului în docs.
Rețineți că există, de asemenea multe caracteristici depreciate în jQuery 3. Un neajuns major al Ghidului de Upgrade este că caracteristicile depreciate - din iunie 2016 - nu sunt grupate, deci dacă sunteți interesat de acestea, va trebui să le căutați cu ajutorul instrumentului de căutare al browserului dvs. Ctrl + F).
2. jQuery 3.0 rulează în modul Strict
Pe măsură ce majoritatea browserelor suportate de jQuery 3 suportă un mod strict, noua versiune majoră a fost construită cu această directivă în minte.
Deși jQuery 3 a fost scris în mod strict, este important să știți asta codul dvs. nu este obligat să ruleze în mod strict, deci tu nu trebuie să rescrieți codul dvs. jQuery existent dacă doriți să migrați la jQuery 3. JavaScript mod strict și non-strict pot coexista fericit.
Există o singură excepție: unele versiuni ale ASP.NET care - din cauza modului strict - sunt nu este compatibil cu jQuery 3. Dacă sunteți implicat în ASP.NET, puteți să consultați detaliile de aici în docs.
3. Pentru ... de Loops este introdus
jQuery 3 acceptă declarația ... pentru o declarație, un nou tip de pentru buclă introdusă în ECMAScript 6. Oferă un mod mai simplu de a face buclă peste obiecte iterabile, cum ar fi Arrays, Maps și Seturi.
În jQuery, pentru ... de buclă poate înlocui prima $ .eu (...) sintaxa și poate facilita accesarea elementelor dintr-o colecție jQuery.
Rețineți că pentru ... de buclă va numai lucru fie într-un mediu care sprijină ECMAScript 6, sau dacă tu utilizați un compilator JavaScript cum ar fi Babel.
4. Animațiile au un nou API
jQuery 3 utilizează API requestAnimationFrame () pentru a realiza animații, realizând animații rulați mai ușor și mai repede. Noul API este utilizat numai în browserele care îl acceptă; pentru browserele mai vechi (adică IE9) jQuery folosește API-ul anterior ca metodă de rezervă pentru afișarea animațiilor.
RequestAnimationFrame a fost afară pentru un timp, dacă sunteți interesat de ceea ce știe sau de ce ar trebui să-l utilizați, CSS Tricks are un post bun despre el.
5. Metodă nouă de scăpare a șirurilor cu semnificație specială
Noul jQuery.escapeSelector () vă permite să scăpați șiruri sau caractere inseamna altceva in CSS pentru a putea utilizați-l într-un selector jQuery; fără a scăpa de interpretorul JavaScript, nu o poate înțelege în mod corespunzător.
Documentele ne ajută să înțelegem mai bine această metodă cu următorul exemplu:
“De exemplu, dacă un element din pagină are un ID de “abc.def” nu se poate selecta cu $ ("# abc.def") deoarece selectorul este analizat ca “un element cu id 'Abc' care are și o clasă 'Def'. Cu toate acestea, acesta poate fi selectat cu $ ("#" + $ .escapeSelector ("abc.def")).”
Nu sunt sigur cât de frecvent se întâmplă un astfel de caz, dar dacă vă confruntați cu o problemă de genul asta, acum aveți o modalitate ușoară de a repara rapid.
6. Metode de manipulare a clasei Suport SVG
Din păcate, jQuery 3 încă nu suportă pe deplin SVG, dar metodele jQuery care manipulează nume de clase CSS, cum ar fi .addClass () și .hasClass (), acum poate fi folosit pentru a vizați documente SVG de asemenea. Aceasta înseamnă că puteți modifica (adăuga, elimina, comuta) sau găsi clase cu jQuery în Grafică Vector Scalabilă, apoi stilul cursurilor cu CSS.
7. Obiectele amânate sunt compatibile acum cu promisiunile JS
JavaScript Promises - obiecte folosite pentru calcule asincrone - au fost standardizate în ECMAScript 6; comportamentul și caracteristicile acestora sunt specificate în standardele Promises / A +.
În jQuery 3, Obiectele amânate au fost făcute compatibile cu noile standarde Promises / A +. Sunt amânate obiecte în mișcare care fac posibilă creează cozi de redirecționare.
Noua funcție se modifică cum sunt executate funcțiile de apel inversat asincron; promisiuni permite dezvoltatorilor să scrie cod asincron care este mai aproape de logică la codul sincron.
Vedeți exemple de coduri din Ghidul de actualizare sau, aruncați o privire la acest tutorial excelent despre Scotch.io despre elementele de bază ale promisiunilor JavaScript.
8. jQuery.when () Interpretează mai multe argumente în mod diferit
$ .La () metoda oferă o modalitate de a executați funcțiile de apel invers. Face parte din jQuery de la versiunea 1.5. Este o metodă flexibilă; funcționează și cu argumente zero și poate accepta unul sau mai multe obiecte ca și argumente.
jQuery 3 modifică modul în care argumentele $ .La () sunt interpretate când acestea conțin $ .Apoi () metodă cu care puteți transmite apeluri suplimentare ca argumente pentru $ .La () metodă.
În jQuery 3, dacă adăugați un argument de intrare cu atunci() metoda de a $ .La (), argumentul va fi interpretat ca o "susceptibilă".
Aceasta înseamnă că $ .La metoda va fi capabil să să accepte o gamă largă de intrări, cum ar fi promisiunile native ES6 și promisiunile Bluebird, care permit scrierea unor apeluri asincrone mai sofisticate.
9. Noua Show / Hide Logic
Pentru a crește compatibilitate cu designul receptiv, codul aferent afișarea și ascunderea elementelor a fost actualizat în jQuery 3.
De acum încolo, .spectacol(), .ascunde(), și .comutare() metodele se vor concentra pe inline stiluri, în loc de stiluri computerizate, așa vor face ei să se respecte mai bine schimbările stilului.
Noul cod respectă afişa valorile foilor de stil ori de câte ori este posibil, ceea ce înseamnă că regulile CSS pot schimbarea dinamică la evenimente precum reorientarea dispozitivului și redimensionarea ferestrei.
Documentele afirmă că cel mai important rezultat va fi:
"Ca rezultat, elementele deconectate sunt nu mai este considerat ascuns cu excepția cazului în care au în linie afișare: niciuna;, prin urmare .comutare() voi nu le mai diferențiați de la elemente conectate ca de la jQuery 3.0. "
Dacă vrei să înțelegi mai bine rezultatele noii logouri de afișare / ascundere, aici este o discuție interesantă despre Github.
Dezvoltatorii jQuery au publicat, de asemenea, un tabel Google Docs despre cum va funcționa noul comportament în cazuri diferite de utilizare.
10. Protecție suplimentară împotriva atacurilor XSS
jQuery 3 adăugat un strat suplimentar de securitate împotriva atacurilor de tip "Cross-Site Scripting" (XSS), cerând dezvoltatorilor să specifice dateType: "script" în opțiunile $ .Ajax () si $ .Get () metode.
Cu alte cuvinte, dacă doriți să executați solicitări de script în mai multe domenii, dvs. trebuie să declare acest lucru în setările acestor metode.
Potrivit docs, noua cerință este utilă atunci când un "site de la distanță oferă conținut non-script dar mai târziu decide să să servească un script care are intenții rău intenționate"Schimbarea nu afectează $ .GetScript () metoda, pe măsură ce fixează dateType: "script" opțiune în mod explicit.
