A JavaScript az egyik legnépszerűbb nyelv az interneten. Annak ellenére, hogy eredetileg csak weboldalakra fejlesztették ki, az elmúlt két évtizedben exponenciálisan növekedett.
Most a JavaScript szinte bármire képes, és számos platformon és eszközön működik, ideértve az IoT-t is. A közelmúltbeli SpaceX Dragon bevezetésével a JavaScript még az űrben is megtalálható.
Népszerűségének egyik oka a nagyszámú keretrendszer és könyvtár elérhetősége. Sokkal megkönnyítik a fejlesztést a hagyományos Vanilla JS fejlesztésekhez képest.
Szinte mindenre van könyvtár, és szinte minden nap több jelenik meg. Ha azonban ennyi könyvtár közül lehet választani, nehézkes nyomon követni az egyes könyvtárakat, és azt, hogy miként lehet ezeket kifejezetten az Ön igényeinek megfelelően alakítani.
Ebben a cikkben 10 legnépszerűbb JS könyvtárat fogunk megvitatni, amelyek segítségével felépítheti következő projektjét.
Szórólap
Szerintem a Leaflet a legjobb nyílt forráskódú könyvtár, amely mobilbarát interaktív térképeket ad hozzá alkalmazásához.
Kis mérete (39kB) nagyszerű alternatívát jelent a többi térképtárral szemben. Platformok közötti hatékonysággal és jól dokumentált API-val mindent megtalál, amire szükséged van ahhoz, hogy beleszeress.
Íme néhány példa kód, amely létrehoz egy szórólap térképet:
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") });A Tájékoztatóban meg kell adnunk egy csemperéteget, mivel alapértelmezés szerint nincs ilyen. De ez azt is jelenti, hogy az ingyenes és a prémium rétegek széles skálájából választhat. Különféle szabad csemperétegeket fedezhet fel itt.
További információkért olvassa el a Dokumentumokat, vagy kövesse az oktatóanyagokat.
fullPage.js
Ez a nyílt forráskódú könyvtár segít a teljes képernyős görgetéses webhelyek létrehozásában, amint az a fenti GIF-ben is látható. Könnyen használható, és számos lehetősége van a testreszabásra, így nem meglepő, hogy fejlesztők ezrei használják, és több mint 30 ezer csillaggal rendelkezik a GitHubon.
Itt van egy Codepen bemutató, amellyel játszhatsz:
Akár olyan népszerű keretrendszerekkel is használhatja, mint:
- reagál-teljes oldal
- vue-fullpage
- szögletes-teljes oldal
Körülbelül egy éve találkoztam ezzel a könyvtárral, és azóta az egyik kedvencem lett. Ez egyike azon kevés könyvtáraknak, amelyeket szinte minden projektben felhasználhat. Ha még nem kezdte el használni, akkor csak próbálja ki, nem fog csalódni.
anime.js
Az egyik legjobb animációs könyvtár, az Anime.js rugalmas és egyszerűen használható. Ez a tökéletes eszköz, amely nagyon jó animációt ad hozzá a projektjéhez.
Az Anime.js jól működik CSS tulajdonságokkal, SVG, DOM attribútumokkal és JavaScript objektumokkal, és könnyen integrálható az alkalmazásaiba.
Fejlesztőként fontos a jó portfólió. Az emberek első benyomása az Ön portfóliójáról segít eldönteni, hogy felvesznek-e vagy sem. És mi jobb eszköz ennél a könyvtárnál, hogy életet keltsen portfóliójában. Ez nem csak tovább fogja fejleszteni a webhelyét, hanem segít bemutatni a tényleges készségeket.
Nézze meg ezt a Codepent, ha többet szeretne megtudni:
Itt megtekintheti a Codepen vagy a Read the Docs összes többi jó projektjét is.
Screenfull.js
Erre a könyvtárra bukkantam, miközben kerestem a teljes képernyős funkció megvalósításának módját a projektemben.
Ha teljes képernyős funkcióval is szeretne rendelkezni, akkor azt javasolnám, hogy ezt a könyvtárat használja a Fullscreen API helyett, mert a böngészők közötti hatékonyság miatt (bár erre épül).
Olyan kicsi, hogy észre sem veszi - kb. 0,7 kB-os cipzárral.
További információkért próbálja ki a bemutatót, vagy olvassa el a Dokumentumokat.
Moment.js
A dátummal és az idővel való munka óriási fájdalmat okozhat, különösen az API-hívások, a különböző időzónák, a helyi nyelvek stb. A Moment.js segíthet megoldani mindazokat a kérdéseket, legyen szó akár dátumok, akár idő manipulálásáról, érvényesítéséről, elemzéséről vagy formázásáról.
Olyan jó módszerek léteznek, amelyek valóban hasznosak a projektjeihez. Például .fromNow()az egyik blogprojektemben használtam a módszert, hogy megmutassam a cikk megjelenési idejét.
const moment = require('moment'); relativeTimeOfPost = moment([2019, 07, 13]).fromNow(); // a year ago Bár nem nagyon használom, rajongok a nemzetközivé válás támogatásáért. Például testreszabhatjuk a fenti eredményt a .locale()módszer segítségével.
// 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
Itt olvassa el a Dokumentumokat.
Frissítve 2020 szeptember: A Moment.js karbantartási módba lépett. További információ itt. Érdemes olyan alternatívákat felfedeznie, mint a Day.js vagy a date-fns.
Hammer.js
A Hammer.js egy könnyű JavaScript könyvtár, amely lehetővé teszi többérintéses gesztusok hozzáadását a webalkalmazásokhoz.
Azt javaslom, hogy ez a könyvtár adjon némi szórakozást az összetevőknek. Itt van egy példa, amellyel játszhatunk. Csak futtassa a tollat, és koppintson vagy kattintson a szürke div-re.
Felismeri az érintéssel, az egérrel és a pointerEvents által végrehajtott gesztusokat. A jQuery felhasználóinak ajánlom a jQuery plugin használatát.
$(element).hammer(options).bind("pan", myPanHandler);Itt olvassa el a Dokumentumokat.
Kőművesség
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.
These are 10 JavaScript libraries that you can try and start using in your projects today. What other cool JavaScript libraries you use? Would you like another article like this? Tweet and let me know.