2020年不容错过的十大JavaScript库

现在，JavaScript 几乎能够完成任何任务，甚至可以在包括物联网在内的众多平台及设备之上运行。而随着近期 SpaceX 龙飞船项目的推动，JavaScript 也正式开启了本身的太空探索之旅。

之因此如此流行，JavaScript 所依靠的一大优点正是丰富的框架与库选项。与传统的仅 JavaScript 开发环境相比，框架与库生态的创建与壮大已经让开发工做变得愈发轻松。

更重要的是，几乎每一天都有新的库方案出现。但过度丰富的选项也带来新的负担，致使咱们很难跟进每种库的具体发展，更难结合自身需求作出正确选择。

在本文中，咱们将了解目前最具人气的 10 大 JS 库，但愿能为你们的项目开发带来启发。

Leaflet

Leaflet

Leaflet 多是你们在应用程序当中提供用户友好型交互式地图功能的最佳开源库。

这套库体积小巧(仅为 39 KB)，这使其成为地图库选项中的理想解决方案。凭借着良好的跨平台运行效率与完善的 API，Leaflet 拥有着使人折服的一切。

下面来看建立 Leaflet 地图的示例代码：

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

在 Leaflet 中，咱们须要提供一个平铺图层，由于其默认不设平铺图层。虽然相对不便，但这也让咱们可以更灵活地从各类免费及高级图层选项中作出选择。感兴趣的朋友能够经过下方连接获取各种免费平铺图层。

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

你们也能够阅读说明文档或经过项目教程了解更多详细信息。

• 说明文档：https://leafletjs.com/reference-1.6.0.html
• 项目教程：https://leafletjs.com/examples.html

fullPage.js

这套开源库可以帮助你们建立全屏滚动网站，如以上 GIF 动图所示。其易于使用，且提供多种自定义选项。凭借着这一系列优点，fullPage 获得无数开发人员的青睐，并在 GitHub 上拿下超过 3 万星。

下面来看 Codepen 演示：

您甚至能够将其与各种流行框架配合使用，例如：

• react-fullpage
• vue-fullpage
• angular-fullpage

我是在大概一年以前接触到这套库的，如今它已经成为个人心头最爱，也是我几乎在每一个项目都能使用的少数几套库之一。若是你们还没试过，请给它个机会，您绝对不会失望。

anime.js

anime.js
Anime.js 是目前最好的动画库之一，拥有出色的灵活性与易用性。它可以帮助你们向项目中添加各类酷炫的动画效果。

Anime.js 还能与 CSS 属性、SVG、DOM 属性以及 JavaScript 对象等良好结合，轻松集成至您的应用程序当中。

做为开发人员，拥有良好的技能组合无疑很是重要。在这方面，Anime.js 的做用很是突出——它不只可以改善网站的总体观感，也能体现您的实际技能，让本来冷冰冰的业务能力瞬间变得生动起来。

请参考相关 Codepen 演示：

你们也能够在 Codepen 上查看更多其余出色项目，或者经过下方连接阅读说明文档。

https://animejs.com/documentation/

Screenfull.js

screenfull.js

有一次，我打算找一套能在项目中实现全屏功能的库，screenfull.js 就这样出如今个人生活里。

对于各位但愿实现全屏功能的朋友来讲，我强烈建议你们选择 screenfull.js(而非 Fullscreen API)，由于它拥有更好的跨浏览器执行效率。

另外，它的体积也很是小巧，小到你们甚至不会注意到——gzip 压缩后仅为 0.7 KB。

您能够观看演示或阅读说明文档以了解更多详细信息。

• 演示地址：https://sindresorhus.com/screenfull.js
• 说明文档：https://github.com/sindresorhus/screenfull.js

Moment.js

Moment.js

日期与时间使用起来每每很是麻烦，特别是经过 API 调用不一样时区、本地语言等时，每每更使人头大。Moment.js 可以帮助你们轻松解决这些问题，一口气搞定日期及时间的操做、验证、解析以及格式化等任务。

其中提供多种超棒的方法，可以为各种项目提供实际帮助。例如，我在本身的一个博客项目中就使用了.fromNow() 方法来显示文章的发布时间。

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

虽然使用频率不高，但我仍是很喜欢它带来的国际化功能。例如，咱们可使用.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

Moment.js 主页
经过下方连接阅读说明文档：https://momentjs.com/

Hammer.js

Hammer.js 是一套轻量化的 JavaScript 库，用于向 Web 应用程序中添加多点触控手抛。

有了这套库，你们的应用程序就能乐趣倍增。你们能够经过示例体验一番。

它可以识别出由触控、鼠标以及 pointerEvents 实现的各类手势。对于 jQuery 用户，我建议你们使用 jQuery 插件。

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

经过下方连接阅读说明文档：http://hammerjs.github.io/getting-started/

Masonry

Masonry

Masonry 是一套 JavaScript 网格布局库。它表现出色，我在不少项目都用到过。它可以使用简单的网格元素，并根据可用的垂直空间进行放置，有点像工程师们把石块或砖砼铺设在墙面上的感受。

您能够利用这套库，以不一样方式展现本身的项目，包括配合卡片、图像及模态等一同使用。

下面来看一个简单示例，只须要放大网页，布局就会出现相应变化。

下面来看实现以上效果的代码：

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

var msnry = new Masonry( '.grid');

再来看 Codepen 上的精彩演示：

查看相关项目：

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

D3.js

若是您对数据很是痴迷，那么这套库绝对不能错过。我尚未找到其余能像 D3 这样高效处理数据的库选项。它在 GitHub 上得到超过 9.2 万星，也成为众多开发人员最喜好的数据可视化库。

最近，我开始使用 D3 配合 React 对 COVID-19 以及约翰霍普金斯 CSSE 数据存储库进行可视化。这是个很是有趣的项目，若是你们有着相似的数据处理需求，强烈建议各位尝试一下 D3.js。

你能够经过下方连接阅读说明文档：https://github.com/d3/d3/wiki

slick

slick

Slick 拥有全响应式、滑动支持以及无限循环等出色功能。如项目网站首页所述，它能知足用户对于轮播库的全部预期。

我使用这套库已经有一段时间了，它为我节约了不少时间。只须要几行代码咱们就能在轮播中添加诸多功能。

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

Autoplay 自动播放

经过下方连接观看演示用例：https://kenwheeler.github.io/slick/

Popper.js

Popper.js

Popper.js 是一套大小约为 3 KB 左右的轻量化 JavaScript 库。这是一款零依赖关系的可靠、可扩展定位引擎，可以保证全部 popper 元素都被放置在正确的位置。

不少朋友不肯意投入心力配置 popper 元素，但正是这些细节区分开了普通开发者与优秀开发者。Popper.js 无疑是处理元素放置工做的好帮手，并且不会占用多少空间。

经过下方连接阅读说明文档：https://popper.js.org/docs/v2/

总结

做为开发人员，选择正确的 JavaScript 很是重要。这不只可以提供您的工做效率，同时也会让开发自己变得更加轻松便捷。固然，这里要再次强调，具体库选择仍然取决于您的实际需求。

【编辑推荐】

1. 你如今可使用的10个JavaScript代码段
2. 5 个 JS 数组技巧可提升你的开发技能
3. 99% 开发者都不知道的 JS 冷知识系列（一）
4. JavaScript 中 this 的错误认识、绑定规则、常见问题讲解
5. 10个很受欢迎的代码编辑器，让开发效率翻倍

【责任编辑：赵宁宁 TEL：（010）68476606】