JavaScript este una dintre cele mai populare limbi de pe web. Chiar dacă a fost inițial dezvoltat doar pentru pagini web, a cunoscut o creștere exponențială în ultimele două decenii.

Acum, JavaScript este capabil să facă aproape orice și funcționează pe mai multe platforme și dispozitive, inclusiv IoT. Și odată cu lansarea recentă a SpaceX Dragon, JavaScript este chiar în spațiu.

Unul dintre motivele popularității sale este disponibilitatea unui număr mare de cadre și biblioteci. Fac dezvoltarea mult mai ușoară în comparație cu dezvoltarea tradițională Vanilla JS.

Există biblioteci pentru aproape orice și mai multe ies aproape în fiecare zi. Dar cu atât de multe biblioteci dintre care puteți alege, devine dificil să țineți evidența fiecăruia și cum ar putea fi adaptate în mod specific nevoilor dvs.

În acest articol, vom discuta 10 dintre cele mai populare biblioteci JS pe care le puteți utiliza pentru a vă construi următorul proiect.

Pliant

10 biblioteci JavaScript minunate pe care ar trebui sa le
Pliant

Cred că Leaflet este cea mai bună bibliotecă open source pentru adăugarea de hărți interactive pentru aplicații mobile.

Dimensiunea sa mică (39kB) îl face o alternativă excelentă de luat în considerare în comparație cu alte biblioteci de hărți. Cu o eficiență multiplatăformă și un API bine documentat, are tot ce aveți nevoie pentru a vă îndrăgosti.

Iată câteva exemple de cod care creează o hartă pliant:

var map = new L.Map("map", {
    center: new L.LatLng(40.7401, -73.9891),
    zoom: 12,
    layers: new L.TileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png")
});

În Broșură, trebuie să oferim un strat de țiglă, deoarece nu există unul în mod implicit. Dar asta înseamnă, de asemenea, că puteți alege dintr-o gamă largă de straturi, atât gratuite, cât și premium. Puteți explora diferite straturi gratuite de plăci Aici.

Citeste Documente sau urmați Tutoriale pentru a afla mai multe.

fullPage.js

10 biblioteci JavaScript minunate pe care ar trebui sa le

Această bibliotecă open-source vă ajută să creați site-uri web cu ecran complet, așa cum puteți vedea în GIF-ul de mai sus. Este ușor de utilizat și are multe opțiuni de personalizat, așa că nu este de mirare că este folosit de mii de dezvoltatori și are peste 30.000 de stele pe GitHub.

Iată un demo Codepen cu care te poți juca:

Îl puteți folosi chiar și cu cadre populare precum:

Am dat peste această bibliotecă acum aproximativ un an și de atunci a devenit una dintre preferatele mele. Aceasta este una dintre puținele biblioteci pe care le puteți utiliza în aproape fiecare proiect. Dacă nu ați început deja să-l utilizați, încercați-l, nu veți fi dezamăgiți.

anime.js

1611908827 805 10 biblioteci JavaScript minunate pe care ar trebui sa le
anime.js

Una dintre cele mai bune biblioteci de animație de acolo, Anime.js este flexibilă și ușor de utilizat. Este instrumentul perfect pentru a vă ajuta să adăugați niște animații foarte interesante proiectului dvs.

Anime.js funcționează bine cu proprietățile CSS, SVG, atributele DOM și obiectele JavaScript și poate fi ușor integrat în aplicațiile dvs.

Ca dezvoltator, este important să aveți un portofoliu bun. Prima impresie pe care o au oamenii despre portofoliul dvs. vă ajută să decideți dacă vă vor angaja sau nu. Și ce instrument mai bun decât această bibliotecă pentru a da viață portofoliului dvs. Nu numai că vă va îmbunătăți site-ul, ci vă va ajuta să prezentați abilitățile reale.

Consultați acest Codepen pentru a afla mai multe:

De asemenea, puteți arunca o privire la toate celelalte proiecte interesante de pe Codepen sau Citiți documentele aici.

Screenfull.js

1611908827 229 10 biblioteci JavaScript minunate pe care ar trebui sa le
screenfull.js

Am dat peste această bibliotecă în timp ce căutam o modalitate de a implementa o funcție pe ecran complet în proiectul meu.

Dacă doriți, de asemenea, să aveți o funcție cu ecran complet, vă recomand să utilizați această bibliotecă în loc de API pe ecran complet datorită eficienței sale cross-browser (deși este construită pe deasupra).

Este atât de mic încât nici măcar nu-l vei observa – doar aproximativ 0,7 KB gzip.

Incearca Demo sau citiți Documente pentru a afla mai multe.

Moment.js

1611908827 214 10 biblioteci JavaScript minunate pe care ar trebui sa le
Moment.js

Lucrul cu data și ora poate fi o durere uriașă, în special cu apelurile API, diferite fusuri orare, limbi locale și așa mai departe. Moment.js vă poate ajuta să rezolvați toate aceste probleme, indiferent dacă este vorba de manipulare, validare, analiză sau formatare a datelor sau a orei.

Există atât de multe metode interesante care sunt cu adevărat utile pentru proiectele dvs. De exemplu, am folosit .fromNow() într-unul din proiectele mele de blog pentru a arăta momentul publicării articolului.

const moment = require('moment'); 

relativeTimeOfPost = moment([2019, 07, 13]).fromNow(); 
// a year ago

Deși nu îl folosesc foarte des, sunt un fan al sprijinului său pentru internaționalizare. De exemplu, putem personaliza rezultatul de mai sus folosind .locale() metodă.

// French
moment.locale('fr');
relativeTimeOfPostInFrench = moment([2019, 07, 13]).fromNow(); 
//il y a un an

// Spanish
moment.locale('es');
relativeTimeOfPostInSpanish = moment([2019, 07, 13]).fromNow(); 
//hace un año

1611908827 491 10 biblioteci JavaScript minunate pe care ar trebui sa le
Pagina principală Moment.js

Citeste Documente aici.

Actualizare septembrie 2020: Moment.js a intrat în modul de întreținere. Citiți mai multe despre asta Aici. Poate doriți să explorați alternative precum Day.js sau data-fns.

Hammer.js

1611908827 835 10 biblioteci JavaScript minunate pe care ar trebui sa le

Hammer.js este o bibliotecă JavaScript ușoară, care vă permite să adăugați gesturi multi-touch aplicațiilor dvs. web.

Aș recomanda această bibliotecă pentru a adăuga ceva distracție componentelor dvs. Iată un exemplu cu care să te joci. Pur și simplu rulați stiloul și atingeți sau faceți clic pe divul gri.

Poate recunoaște gesturile făcute prin atingere, mouse și pointerEvents. Pentru utilizatorii jQuery aș recomanda utilizarea plugin jQuery.

$(element).hammer(options).bind("pan", myPanHandler);

Citeste Documente aici.

Zidărie

1611908827 655 10 biblioteci JavaScript minunate pe care ar trebui sa le
Zidărie

Masonry este o bibliotecă de aspect de grilă JavaScript. Este super minunat și îl folosesc pentru multe dintre proiectele mele. Poate lua elementele simple ale rețelei și le poate așeza pe baza spațiului vertical disponibil, cum ar fi modul în care antreprenorii încap pietre sau blocuri într-un perete.

Puteți utiliza această bibliotecă pentru a vă arăta proiectele într-o altă lumină. Folosiți-l cu carduri, imagini, modale și așa mai departe.

Iată un exemplu simplu pentru a vă arăta magia în acțiune. Ei bine, nu magia exact, ci modul în care aspectul se schimbă atunci când a mari pe pagina web.

1611908827 39 10 biblioteci JavaScript minunate pe care ar trebui sa le

Și iată codul pentru cele de mai sus:

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  itemSelector: '.grid-item',
  columnWidth: 400
});

var msnry = new Masonry( '.grid');

Iată un demo interesant pe Codepen:

Consultați aceste proiecte

D3.js

1611908827 734 10 biblioteci JavaScript minunate pe care ar trebui sa le

Dacă sunteți un dezvoltator obsedat de date, atunci această bibliotecă este pentru dvs. Încă nu am găsit o bibliotecă care să manipuleze datele la fel de eficient și frumos ca D3. Cu peste 92 de stele pe GitHub, D3 este biblioteca preferată de vizualizare a datelor pentru mulți dezvoltatori.

Recent am folosit D3 pentru a vizualiza datele COVID-19 cu React și Johns Hopkins CSSE Data Repository pe GitHub. Am fost un proiect cu adevărat interesant și, dacă vă gândiți să faceți ceva similar, aș sugera să încercați D3.js.

Citiți mai multe despre asta Aici.

slick

1611908827 118 10 biblioteci JavaScript minunate pe care ar trebui sa le
slick

Slick este complet receptiv, activat pentru glisare, looping infinit și multe altele. După cum sa menționat pe pagina de pornire, este cu adevărat ultimul carusel de care veți avea nevoie vreodată.

Folosesc această bibliotecă de ceva timp și mi-a economisit atât de mult timp. Cu doar câteva linii de cod, puteți adăuga atât de multe funcții la caruselul dvs.

$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});
1611908827 403 10 biblioteci JavaScript minunate pe care ar trebui sa le
Redare automata

Consultați demonstrațiile Aici.

Popper.js

1611908827 931 10 biblioteci JavaScript minunate pe care ar trebui sa le
Popper.js

Popper.js este o bibliotecă JavaScript ușoară de ~ 3 kB, cu zero dependențe, care oferă un motor de poziționare fiabil și extensibil pe care îl puteți utiliza pentru a vă asigura că toate elementele dvs. popper sunt poziționate în locul potrivit.

S-ar putea să nu pară important să petreceți timp configurând elemente popper, dar aceste lucruri mici vă fac să vă distingeți ca dezvoltator. Și cu o dimensiune atât de mică, nu ocupă mult spațiu.

Citeste Documente aici.

Concluzie

Ca dezvoltator, este important să ai și să folosești bibliotecile JavaScript potrivite. Vă va face mai productiv și va face dezvoltarea mult mai ușoară și mai rapidă. În cele din urmă, depinde de dvs. ce bibliotecă să preferați în funcție de nevoile dvs.

Acestea sunt 10 biblioteci JavaScript pe care le puteți încerca și începe să le utilizați astăzi în proiectele dvs. Ce alte biblioteci JavaScript interesante folosești? Doriți un alt articol ca acesta? Tweet și dă-mi de veste.