10 suurepärast JavaScripti raamatukogu, mida peaksite proovima 2020. aastal

JavaScript on veebis üks populaarsemaid keeli. Ehkki algselt töötati välja ainult veebilehtede jaoks, on see viimase kahe aastakümne jooksul kasvanud hüppeliselt.

Nüüd on JavaScript võimeline tegema peaaegu kõike ja töötab mitmel platvormil ja seadmel, sealhulgas IoT-l. Ja hiljutise SpaceX Dragoni turuletoomisega on JavaScript isegi kosmoses.

Selle populaarsuse üheks põhjuseks on suure hulga raamistike ja raamatukogude kättesaadavus. Need muudavad arendamise palju lihtsamaks võrreldes traditsioonilise Vanilla JS arendusega.

Raamatukogusid leidub peaaegu kõigeks ja pea iga päev tuleb neid juurde. Kuid kui nii palju raamatukogusid on võimalik valida, on igaühe jälgimine ja selle kohandamine teie vajadustele vastavaks keeruline.

Selles artiklis käsitleme kümmet kõige populaarsemat JS-i teeki, mida saate kasutada järgmise projekti ehitamiseks.

Infoleht

Arvan, et voldik on parim avatud lähtekoodiga raamatukogu mobiilisõbralike interaktiivsete kaartide lisamiseks oma rakendusse.

Selle väike suurus (39kB) muudab selle suurepäraseks alternatiiviks kaalumiseks teiste kaardiraamatukogude puhul. Platvormidevahelise tõhususe ja korralikult dokumenteeritud API-ga on sellel kõik vajalik armumiseks.

Siin on mõni näidiskood, mis loob voldiku kaardi:

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") });

Voldikus peame pakkuma paanikihi, kuna seda pole vaikimisi olemas. Kuid see tähendab ka seda, et saab valida laia valiku kihtide hulgast nii tasuta kui ka lisatasu eest. Siin saate uurida erinevaid tasuta plaatide kihte.

Lisateabe saamiseks lugege dokumente või järgige õpetusi.

fullPage.js

See avatud lähtekoodiga teek aitab teil luua täisekraanil keritavaid veebisaite, nagu näete ülaltoodud GIF-is. Seda on lihtne kasutada ja sellel on palju võimalusi kohandamiseks, nii et pole üllatav, et seda kasutavad tuhanded arendajad ja sellel on GitHubis üle 30 tuhande tärni.

Siin on Codepeni demo, millega saate mängida:

Saate seda isegi kasutada selliste populaarsete raamistike abil nagu:

  • reageeri-täisleht
  • vue-fullpage
  • nurgeline-täisleht

Sattusin sellele raamatukogule umbes aasta tagasi ja sellest ajast on see muutunud üheks mu lemmikuks. See on üks väheseid raamatukogusid, mida saate kasutada peaaegu igas projektis. Kui te pole seda veel kasutama hakanud, proovige lihtsalt, siis ei pea te pettuma.

anime.js

Üks parimatest animatsiooniraamatukogudest on Anime.js paindlik ja seda on lihtne kasutada. See on ideaalne tööriist, mis aitab teil oma projekti lisada väga lahedaid animatsioone.

Anime.js töötab hästi CSS-i omaduste, SVG-, DOM-atribuutide ja JavaScripti objektidega ning seda saab hõlpsasti oma rakendustesse integreerida.

Arendajana on oluline hea portfell. Esimene mulje, mis inimestel teie portfellist on, aitab otsustada, kas nad palkavad teid või mitte. Ja mis oleks parem tööriist kui see raamatukogu, et oma portfelli elu tuua. See mitte ainult ei täiusta teie veebisaiti, vaid aitab näidata tegelikke oskusi.

Lisateabe saamiseks vaadake seda Codepeni:

Siit saate vaadata ka kõiki teisi lahedaid projekte Codepenis või Loe dokumente.

Screenfull.js

Sellele raamatukogule sattusin otsides viisi, kuidas oma projektis täisekraani funktsiooni rakendada.

Kui soovite ka täisekraani funktsiooni, soovitaksin seda kogu brauseri tõhususe tõttu kasutada täisekraani API asemel seda teeki (kuigi see on selle peale ehitatud).

See on nii väike, et te isegi ei märka seda - zip-pakendis on umbes 0,7 kB.

Lisateabe saamiseks proovige demot või lugege dokumente.

Moment.js

Kuupäeva ja kellaajaga töötamine võib olla tohutu piin, eriti API-kõnede, erinevate ajavööndite, kohalike keelte jne puhul. Moment.js aitab teil lahendada kõik need probleemid, olenemata sellest, kas tegemist on kuupäevade või kellaaja manipuleerimise, valideerimise, sõelumise või vormindamisega.

Teie projektide jaoks on väga palju lahedaid meetodeid. Näiteks kasutasin .fromNow()meetodit ühes oma ajaveebiprojektis, et näidata artikli ilmumise aega.

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

Kuigi ma ei kasuta seda eriti tihti, olen selle rahvusvahelistumise toetamise fänn. Näiteks saame .locale()meetodi abil ülaltoodud tulemuse kohandada .

// 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

Lugege siin dokumente.

Uuenda september 2020: Moment.js on sisenenud hoolduse režiimi. Lisateavet selle kohta leiate siit. Võite uurida alternatiive nagu Day.js või date-fns.

Hammer.js

Hammer.js on kerge JavaScripti teek, mis võimaldab teil oma veebirakendustesse lisada mitme puutega liigutusi.

Ma soovitaksin sellel teegil oma komponentidele lõbusust lisada. Siin on näide, millega mängida. Käivitage lihtsalt pliiats ja puudutage või klõpsake halli div.

See tunneb ära puudutamise, hiire ja pointerEvents'i abil tehtud žeste. JQuery kasutajatele soovitaksin kasutada jQuery pistikprogrammi.

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

Lugege siin dokumente.

Müüritis

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.

Need on 10 JavaScripti teeki, mida saate proovida ja oma projektides juba täna kasutada. Milliseid lahedaid JavaScripti teeke te veel kasutate? Kas soovite veel mõnda sellist artiklit? Säutsuta ja anna teada.