javascript 库

JavaScript is one of the most popular languages on the web. Even though it was initially developed just for web pages, it has seen exponential growth in the past two decades.

JavaScript是网络上最流行的语言之一。 即使它最初只是为网页开发的，但在过去的二十年中却呈指数级增长。

Now, JavaScript is capable of doing almost anything and works on several platforms and devices including IoT. And with the recent SpaceX Dragon launch, JavaScript is even in space.

现在，JavaScript几乎可以执行任何操作，并且可以在包括物联网在内的多个平台和设备上运行。 随着最近SpaceX Dragon的推出，JavaScript甚至进入了太空。

One of the reasons for its popularity is the availability of a large number of frameworks and libraries. They make development much easier compared to traditional Vanilla JS development.

其流行的原因之一是大量框架和库的可用性。 与传统的Vanilla JS开发相比，它们使开发更加容易。

There are libraries for almost anything and more are coming out almost every day. But with so many libraries to choose from it becomes difficult to keep a track of each one and how it might be tailored specifically to your needs.

有几乎所有内容的库，而且几乎每天都有更多库出现。 但是，由于要选择的库太多，因此很难跟踪每个库以及如何专门针对您的需求进行定制。

In this article, we will discuss 10 of the most popular JS libraries which you can use to build your next project.

在本文中，我们将讨论10个最受欢迎的JS库，您可以使用它们来构建下一个项目。

传单 (Leaflet)

I think Leaflet is the best open source library for adding mobile-friendly interactive maps to your application.

我认为Leaflet是将移动友好的交互式地图添加到您的应用程序的最佳开源库。

Its small size (39kB) makes it a great alternative to consider over other map libraries. With cross-platform efficiency and a well-documented API, it has everything you need to make you fall in love.

它的体积小(39kB)，使其成为考虑其他地图库的理想选择。 凭借跨平台的效率和完善的API，它具有让您坠入爱河所需的一切。

Here is some sample code that creates 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 tile layer since there isn't one by default. But that also means that can choose from a wide range of layers both free and premium. You can explore various free tile layers here.

在Leaflet中，我们需要提供一个平铺层，因为默认情况下没有平铺层。 但这也意味着可以从免费和高级的多种层中进行选择。 您可以在这里探索各种免费的瓷砖图层。

Read the Docs or follow the Tutorials to learn more.

阅读文档或按照教程了解更多信息。

fullPage.js (fullPage.js)

This open-source library helps you create full-screen scrolling websites as you can see in the above GIF. It's easy to use and has many options to customize, so it's no surprise it is used by thousands of developers and has over 30k stars on GitHub.

这个开源库可以帮助您创建全屏滚动网站，如上面的GIF所示。 它易于使用且具有许多自定义选项，因此毫不奇怪，它被成千上万的开发人员使用，并且在GitHub上拥有超过3万颗星。

Here is a Codepen demo that you can play with:

这是您可以使用的Codepen演示：

You can even use it with popular frameworks such as:

您甚至可以将其与流行的框架一起使用，例如：

• react-fullpage

  React全页

• vue-fullpage

  整页

• angular-fullpage

  全角

I came across this library about a year ago and since then it has become one of my favorites. This is one of the few libraries that you can use in almost every project. If you haven't already started using it then just try it, you will not be disappointed.

大约一年前，我遇到了这个图书馆，从那时起，它已成为我的最爱之一。 这是几乎可以在每个项目中使用的少数库之一。 如果您尚未开始使用它，那么只需尝试一下，您将不会感到失望。

anime.js (anime.js)

One of the best animation libraries out there, Anime.js is flexible and simple to use. It is the perfect tool to help you add some really cool animation to your project.

Anime.js是目前最好的动画库之一，它灵活且易于使用。 它是帮助您向项目中添加一些非常酷的动画的完美工具。

Anime.js works well with CSS properties, SVG, DOM attributes, and JavaScript Objects and can be easily integrated into your applications.

Anime.js与CSS属性，SVG，DOM属性和JavaScript对象很好地配合，并且可以轻松地集成到您的应用程序中。

As a developer it's important to have a good portfolio. The first impression people have of your portfolio helps decide whether they will hire you or not. And what better tool than this library to bring life to your portfolio. It will not only enhance your website but will help showcase actual skills.

作为开发人员，拥有良好的投资组合很重要。 人们对您的投资组合的第一印象有助于决定他们是否会雇用您。 还有什么比该库更好的工具可以使您的投资组合更加生动有趣。 它不仅可以改善您的网站，而且可以帮助您展示实际技能。

Check out this Codepen to learn more:

查看此Codepen以了解更多信息：

You can also take a look at all the other cool projects on Codepen or Read the Docs here.

您还可以查看Codepen或 在此处阅读文档 。

Screenfull.js (Screenfull.js)

I came across this library while searching for a way to implement a full-screen feature in my project.

我在寻找一种在项目中实现全屏功能的方法时遇到了这个库。

If you also want to have a full-screen feature, I would recommend using this library instead of Fullscreen API because of its cross-browser efficiency (although it is built on top of that).

如果您还想拥有全屏功能，我建议使用此库而不是Fullscreen API，因为它具有跨浏览器的效率(尽管它基于此功能)。

It is so small that you won't even notice it – just about 0.7kB gzipped.

它是如此之小，以至于您甚至都不会注意到它-压缩后只有0.7kB。

Try the Demo or read the Docs to learn more.

尝试演示或阅读文档以了解更多信息。

Moment.js (Moment.js)

Working with date and time can be a huge pain, especially with API calls, different Time Zones, local languages, and so on. Moment.js can help you solve all those issues whether it is manipulating, validating, parsing, or formatting dates or time.

使用日期和时间可能会非常痛苦，尤其是使用API​​调用，不同的时区，本地语言等等时。 Moment.js可以帮助您解决所有这些问题，无论它是操纵，验证，解析还是格式化日期或时间。

There are so many cool methods that are really useful for your projects. For example, I used the .fromNow() method in one of my blog projects to show the time the article was published.

有很多很棒的方法对您的项目确实有用。 例如，我在我的一个博客项目中使用了.fromNow()方法来显示文章的发布时间。

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

Although I don't use it very often, I am a fan of its support for internationalization. For example, we can customize the above result using the .locale() method.

尽管我不经常使用它，但我仍然支持它对国际化的支持。 例如，我们可以使用.locale()方法来自定义上述结果。

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

Read the Docs here.

在此处阅读文档 。

Hammer.js (Hammer.js)

Hammer.js is a lightweight JavaScript library that lets you add multi-touch gestures to your Web Apps.

Hammer.js是一个轻量级JavaScript库，可让您向Web应用程序添加多点触摸手势。

I would recommend this library to add some fun to your components. Here is an example to play with. Just run the pen and tap or click on the grey div.

我建议该库为您的组件添加一些乐趣。 这是一个例子。 只需运行笔并点击或单击灰色div。

It can recognize gestures made by touch, mouse and pointerEvents. For jQuery users I would recommend using the jQuery plugin.

它可以识别由触摸，鼠标和pointerEvents做出的手势。 对于jQuery用户，我建议使用jQuery插件 。

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

Read the Docs here.

在此处阅读文档 。

石工 (Masonry)

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.

Masonry是一个JavaScript网格布局库。 它非常棒，我在许多项目中都使用了它。 它可以采用简单的网格元素，并根据可用的垂直空间放置它们，就像承包商如何将石头或砌块安装到墙上一样。

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 on the 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:

这是Codepen上的一个很酷的演示：

Check out these Projects

查看这些项目

• https://halcyon-theme.tumblr.com/

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

• https://tympanus.net/Development/GridLoadingEffects/index.html

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

• https://www.erikjo.com/work

  https://www.erikjo.com/work

D3.js (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.

如果您是一个数据痴迷的开发人员，那么此库适合您。 我还没有找到一个可以像D3一样高效和精美地处理数据的库。 在GitHub上有超过9.2万颗星，D3是许多开发人员最喜欢的数据可视化库。

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.

我最近使用D3通过React和GitHub上的Johns Hopkins CSSE Data Repository可视化COVID-19数据。 这是一个非常有趣的项目，如果您正在考虑做类似的事情，建议您尝试一下D3.js。

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.

Slick具有完全响应能力，启用了滑动功能，无限循环等功能。 如首页所述，它确实是您需要的最后一个轮播。

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)

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.

Popper.js是一个轻量级的〜3 kB JavaScript库，具有零依赖关系，它提供了可靠且可扩展的定位引擎，可用于确保所有popper元素都放置在正确的位置。

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.

花时间配置popper元素似乎并不重要，但是这些小事情使您脱颖而出成为开发人员。 如此小巧的体积不会占用太多空间。

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.

作为开发人员，拥有和使用正确JavaScript库很重要。 这将使您更有效率，并使开发变得更加轻松和快捷。 最后，取决于您的需求，由您决定选择哪个库。

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.

这些是10个JavaScript库，您可以在今天的项目中尝试并开始使用。 您还使用其他哪些很棒JavaScript库？ 您还要这样的文章吗？ 鸣叫 ，让我知道。

翻译自: https://www.freecodecamp.org/news/10-javascript-libraries-you-should-try/

javascript 库