10 nuostabių „JavaScript“ bibliotekų, kurias turėtumėte išbandyti 2020 m

„JavaScript“ yra viena iš populiariausių kalbų internete. Nors iš pradžių jis buvo sukurtas tik tinklalapiams, per pastaruosius du dešimtmečius jis sparčiai augo.

Dabar „JavaScript“ gali atlikti beveik viską ir veikia keliose platformose ir įrenginiuose, įskaitant „IoT“. Neseniai paleidus „SpaceX Dragon“, „JavaScript“ yra net kosmose.

Viena iš jo populiarumo priežasčių yra galimybė naudotis daugybe sistemų ir bibliotekų. Jie palengvina kūrimą, palyginti su tradiciniu „Vanilla JS“ kūrimu.

Bibliotekų yra beveik viskam, ir daugiau jų atsiranda kiekvieną dieną. Tačiau turint tiek daug bibliotekų, iš kurių sunku rinktis, sekti kiekvieną iš jų ir kaip ji gali būti pritaikyta būtent jūsų poreikiams.

Šiame straipsnyje aptarsime 10 populiariausių JS bibliotekų, kurias galite naudoti kurdami savo kitą projektą.

Lankstinukas

Manau, kad „Leaflet“ yra geriausia atvirojo kodo biblioteka, skirta prie programos pridėti mobiliesiems pritaikytus interaktyvius žemėlapius.

Mažas jo dydis (39 kB) yra puiki alternatyva apsvarstyti kitas žemėlapių bibliotekas. Turėdamas įvairių platformų efektyvumą ir gerai dokumentuotą API, jis turi viską, ko reikia, kad įsimylėtum.

Štai keletas kodo pavyzdžių, sukuriančių lankstinukų žemėlapį:

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

Lankstinuke turime pateikti plytelių sluoksnį, nes pagal numatytuosius nustatymus jų nėra. Bet tai taip pat reiškia, kad galima rinktis iš daugybės nemokamų ir aukščiausios kokybės sluoksnių. Čia galite ištirti įvairius nemokamus plytelių sluoksnius.

Perskaitykite dokumentus arba vadovaukitės mokomosiomis medžiagomis, kad sužinotumėte daugiau.

fullPage.js

Ši atviro kodo biblioteka padeda jums sukurti viso ekrano slenkančias svetaines, kaip matote anksčiau pateiktame GIF. Tai lengva naudoti ir turi daug galimybių pritaikyti, todėl nenuostabu, kad ją naudoja tūkstančiai kūrėjų ir „GitHub“ turi daugiau nei 30 tūkst.

Čia yra „Codepen“ demonstracinė versija, su kuria galite žaisti:

Jūs netgi galite jį naudoti su populiariomis sistemomis, tokiomis kaip:

  • reaguoti-visas puslapis
  • „vue-fullpage“
  • kampinis-pilnas puslapis

Su šia biblioteka susidūriau maždaug prieš metus ir nuo tada ji tapo viena mėgstamiausių. Tai viena iš nedaugelio bibliotekų, kurią galite naudoti beveik kiekviename projekte. Jei dar nepradėjote jo naudoti, tiesiog pabandykite, nenusivilsite.

anime.js

Viena iš geriausių animacijos bibliotekų, Anime.js yra lanksti ir paprasta naudoti. Tai puikus įrankis, kuris padės jums pridėti labai šaunią animaciją prie savo projekto.

Anime.js gerai veikia su CSS ypatybėmis, SVG, DOM atributais ir „JavaScript“ objektais ir gali būti lengvai integruojamas į jūsų programas.

Kaip kūrėjui svarbu turėti gerą portfelį. Pirmasis žmonių įspūdis apie jūsų portfelį padeda nuspręsti, ar jie jus samdys, ar ne. Kas gali būti geresnė priemonė nei ši biblioteka, suteikianti gyvybės jūsų portfeliui. Tai ne tik patobulins jūsų svetainę, bet ir pademonstruos tikrus įgūdžius.

Norėdami sužinoti daugiau, patikrinkite šį „Codepen“:

Čia taip pat galite pažvelgti į visus kitus šaunius „Codepen“ arba „Skaitykite dokumentus“ projektus.

Screenfull.js

Šią biblioteką aptikau ieškodama būdų, kaip įgyvendinti viso ekrano funkciją savo projekte.

Jei taip pat norite turėti viso ekrano funkciją, aš rekomenduoju naudoti šią biblioteką vietoj „Fullscreen“ API dėl jos efektyvumo keliose naršyklėse (nors ji sukurta ant viršaus).

Jis yra toks mažas, kad to net nepastebėsite - vos maždaug 0,7 kB ZIP.

Išbandykite demonstracinę versiją arba perskaitykite dokumentus, kad sužinotumėte daugiau.

Moment.js

Darbas su data ir laiku gali būti didžiulis skausmas, ypač naudojant API skambučius, skirtingas laiko juostas, vietines kalbas ir pan. „Moment.js“ gali padėti išspręsti visas problemas, nesvarbu, ar tai manipuliuoja, patvirtina, analizuoja ar formatuoja datas ar laiką.

Yra tiek daug šaunių metodų, kurie tikrai naudingi jūsų projektams. Pavyzdžiui, aš naudoju .fromNow()metodą viename iš savo tinklaraščių projektų, norėdamas parodyti straipsnio paskelbimo laiką.

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

Nors naudojuosi ne taip dažnai, esu jo palaikymo internacionalizacijai gerbėja. Pavyzdžiui, aukščiau pateiktą rezultatą galime pritaikyti naudodami .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

Skaitykite dokumentus čia.

Atnaujinti 2020 m. Rugsėjį: „ Moment.js“ įjungtas priežiūros režimas. Daugiau apie tai skaitykite čia. Galbūt norėsite ištirti tokias alternatyvas kaip Day.js arba date-fns.

Hammer.js

„Hammer.js“ yra lengva „JavaScript“ biblioteka, leidžianti pridėti žiniatinklio programų kelių palietimų gestus.

Aš rekomenduočiau šiai bibliotekai pridėti šiek tiek malonumo prie savo komponentų. Čia yra pavyzdys, su kuriuo reikia žaisti. Tiesiog paleiskite rašiklį ir palieskite arba spustelėkite pilką div.

Jis gali atpažinti palietimu, pele ir pointerEvents atliktus gestus. „JQuery“ vartotojams rekomenduočiau naudoti „jQuery“ papildinį.

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

Skaitykite dokumentus čia.

Mūras

Masonry is a JavaScript grid layout library. It is super awesome and I use it for many of my projects. It can take your simple grid elements and place them based on the available vertical space, sort of like how contractors fit stones or blocks into a wall.

You can use this library to show your projects in a different light. Use it with cards, images, modals, and so on.

Here is a simple example to show you the magic in action. Well, not magic exactly, but how the layout changes when you zoom in onthe web page.

And here is the code for the above:

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

Here is a cool demo on Codepen:

Check out these Projects

  • //halcyon-theme.tumblr.com/
  • //tympanus.net/Development/GridLoadingEffects/index.html
  • //www.erikjo.com/work

D3.js

If you are a data-obsessed developer then this library is for you. I have yet to find a library that manipulates data as efficiently and beautifully as D3. With over 92k stars on GitHub, D3 is the favorite data visualization library of many developers.

I recently used D3 to visualize COVID-19 data with React and the Johns Hopkins CSSE Data Repository on GitHub. It I was a really interesting project, and if you are thinking of doing something similar, I would suggest giving D3.js a try.

Read more about it here.

slick

Slick is fully responsive, swipe-enabled, infinite looping, and more. As mentioned on the homepage it truly is the last carousel you'll ever need.

I have been using this library for quite a while, and it has saved me so much time. With just a few lines of code, you can add so many features to your carousel.

$('.autoplay').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, });

Check out the demos here.

Popper.js

Popper.js is a lightweight ~3 kB JavaScript library with zero dependencies that provides a reliable and extensible positioning engine you can use to ensure all your popper elements are positioned in the right place.

It may not seem important to spend time configuring popper elements, but these little things are what make you stand out as a developer. And with such small size it doesn't take up much space.

Read the Docs here.

Conclusion

As a developer, having and using the right JavaScript libraries is important. It will make you more productive and will make development much easier and faster. In the end, it is up to you which library to prefer based on your needs.

Tai yra 10 „JavaScript“ bibliotekų, kurias galite išbandyti ir pradėti naudoti savo projektuose jau šiandien. Kokias dar šaunias „JavaScript“ bibliotekas naudojate? Ar norėtumėte kito tokio straipsnio? Čiupkite ir praneškite man.