Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about the top ten JavaScript libraries that should not be missed in 2020. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Today, JavaScript can accomplish almost any task, even running on many platforms and devices, including the Internet of things. With the recent advance of the SpaceX Dragon spacecraft project, JavaScript has officially launched its own journey of space exploration.

One of the advantages that JavaScript relies on for its popularity is its rich framework and library options. Compared with the traditional JavaScript-only development environment, the establishment and growth of framework and library ecology has made the development work easier.

More importantly, new library schemes appear almost every day. However, too many options also bring new burdens, making it difficult for us to follow up the specific development of each library, and even more difficult to make the right choice according to our own needs.

Leaflet

Leaflet

Leaflet may be the best open source library for providing user-friendly interactive mapping capabilities in your applications.

This set of libraries is small (only 39 KB), which makes it an ideal solution for map library options. With good cross-platform running efficiency and perfect API,Leaflet, it has everything convincing.

Let's look at the sample code for creating a Leaflet map:

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

In Leaflet, we need to provide a tiling layer because there is no tiling layer by default. Although it is relatively inconvenient, it also gives us more flexibility to choose from a variety of free and advanced layer options. Interested friends can get all kinds of free tile layers through the link below.

Https://leaflet-extras.github.io/leaflet-providers/preview/

You can also read the documentation or read the project tutorials for more details.

Description document: https://leafletjs.com/reference-1.6.0.html

Project tutorial: https://leafletjs.com/examples.html

FullPage.js

This set of open source libraries can help you create full-screen scrolling websites, as shown in the GIF dynamic picture above. It is easy to use and provides a variety of customization options. With this series of advantages, fullPage has been favored by countless developers and won more than 30,000 stars on GitHub.

Let's take a look at the Codepen demonstration:

You can even use it with various popular frameworks, such as:

React-fullpage

Vue-fullpage

Angular-fullpage

I came into contact with this library about a year ago, and now it has become my favorite and one of the few libraries I can use on almost every project. If you haven't tried it, please give it a chance and you won't be disappointed.

Anime.js

Anime.js

Anime.js is one of the best animation libraries currently, with excellent flexibility and ease of use. It can help you add all kinds of cool animation effects to the project.

Anime.js can also be easily integrated into your application with CSS properties, SVG, DOM properties, and JavaScript objects.

As a developer, it is undoubtedly important to have a good skill set. In this respect, Anime.js plays a prominent role-it can not only improve the overall look and feel of the site, but also reflect your practical skills, bringing your cold business capabilities to life in an instant.

Please refer to the relevant Codepen demonstration:

You can also see more other excellent projects on Codepen, or read the documentation via the link below.

Https://animejs.com/documentation/

Screenfull.js

Screenfull.js

Once, I was looking for a set of libraries that could implement full-screen functionality in a project, and screenfull.js appeared in my life.

For those of you who want to achieve full-screen functionality, I strongly recommend that you choose screenfull.js (rather than Fullscreen API) because it has better cross-browser execution efficiency.

In addition, it is so small that you won't even notice-- it's only 0.7 KB after gzip compression.

You can watch the demo or read the documentation for more details.

Demo address: https://sindresorhus.com/screenfull.js

Description document: https://github.com/sindresorhus/screenfull.js

Moment.js

Moment.js

Dates and times are often troublesome to use, especially when calling different time zones, local languages, and so on through API. Moment.js can help you solve these problems easily, such as operation, validation, parsing and formatting of date and time in one breath.

It provides a variety of great methods that can provide practical help for all kinds of projects. For example, I used the. fromNow () method to show when the article was published in one of my blog projects.

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

Although the frequency of use is not high, I still like the internationalization function it brings. For example, we can customize the above results using the .locale () method.

/ / 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 ñ oMoment.js Home Page

Read the documentation via the link below: https://momentjs.com/

Hammer.js

Hammer.js is a lightweight JavaScript library for adding multi-touch handthrowing to Web applications.

With this set of libraries, everyone's applications can be more fun. You can experience it through examples.

It can recognize various gestures implemented by touch, mouse and pointerEvents. For jQuery users, I suggest you use the jQuery plug-in.

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

Read the documentation via the link below: http://hammerjs.github.io/getting-started/

Masonry

Masonry

Masonry is a set of JavaScript grid layout libraries. It performs well, and I have used it in many projects. It can use simple grid elements and be placed according to the available vertical space, a bit like engineers laying stones or brick concrete on the wall.

You can use this library to display your projects in different ways, including using them with cards, images, modes, etc.

Let's take a look at a simple example. Just zoom in on the page and the layout will change accordingly.

Let's take a look at the code to achieve the above effect:

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

Let's take a look at the wonderful demonstration on Codepen:

View related items:

Https://halcyon-theme.tumblr.com/

Https://tympanus.net/Development/GridLoadingEffects/index.html

Https://www.erikjo.com/work

D3.js

If you are obsessed with data, you can't miss this set of libraries. I haven't found any other library options that can handle data as efficiently as D3. It has gained more than 92,000 stars on GitHub and has become a favorite data visualization library for many developers.

Recently, I started using D3 with React to visualize COVID-19 and the Johns Hopkins CSSE data repository. This is a very interesting project, if you have similar data processing requirements, it is strongly recommended that you try D3.js.

You can read the documentation via the link below: https://github.com/d3/d3/wiki

Slick

Slick

Slick has excellent features such as fully responsive, sliding support and infinite loops. As described on the home page of the project website, it can meet all users' expectations for the broadcast library.

I've been using this library for some time, and it saves me a lot of time. It only takes a few lines of code to add a lot of functions to the broadcast.

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

Autoplay auto playback

View the demo use case through the link below: https://kenwheeler.github.io/slick/

Popper.js

Popper.js

Popper.js is a lightweight JavaScript library with a size of about 3 KB. This is a reliable, extensible positioning engine with zero dependencies that ensures that all popper elements are placed in the right place.

Many friends are reluctant to devote themselves to configuring popper elements, but it is these details that distinguish ordinary developers from good developers. There is no doubt that Popper.js is a good helper for handling element placement and does not take up much space.

Read the documentation via the link below: https://popper.js.org/docs/v2/

As a developer, it's important to choose the right JavaScript. This not only provides your productivity, but also makes the development itself easier and easier. Of course, I would like to emphasize again that the choice of specific libraries still depends on your actual needs.

These are the top ten JavaScript libraries that should not be missed in 2020. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.