现代前端开发相比以前来说幸福很多了，过去为了兼容 IE、火狐等浏览器环境焦头烂额，为了减少代码加速文件的加载尽可能地编写原生 JavaScript，能不用插件就不用（插件由于要考虑通用性，会增加很多兼容代码）。

这一切变化首先要感谢谷歌浏览器提供的开源核心，以及为中国用户普及高级浏览器做出努力的各大互联网开发者们。

图片源自网络，仅做配文展示

随着 5G 技术的发展普及，未来将有大量的应用场景将由前端来承担。

今天，小渡就跟大家分享 10个可以提高开发效率的 JavaScript 库，不需要花时间自己去编写常用的基础函数，避免重复造轮子，让更多的精力去优化应用场景的逻辑，也提高开发效率。

immutable.js

有一位reddit网友是这样描述的，小渡很喜欢这种说法：

“immutableJS确保了大型团队的开发者不会做一些愚蠢的事情。”

简而言之：Immutable.js，Facebook的另一个项目，确保了状态不会因为使用不可变对象而发生突变。

图片源自网络，仅做配文展示

正如网友指出那样，这对于大型团队的开发者会极其有用，因为这些人经常会无意识地搞乱了状态。

“封装在Immutable.JS对象里面的数据是永远也不会变的。它总会返回一份新的拷贝。这跟JavaScript形成了羡慕对比，后者的一些操作不会改变你的数据（比方说一些数据方法，包括map、filter、concat、forEach等），但有的就会（Array的pop、push、splice等）。”

使用Immutable.JS有相当大的限制，但视你的需求不同，那些限制未必有关系。在GitHub上拿到了20000多颗星的Immutable.js已经开始崛起，预计还会继续延续，因为开发者正在花时间理解其中的概念和权衡。

Redux、Relay Modern以及Apollo

Redux 是一直很火的Dan Abramov/Andrew Clark 项目，后来又迅速成为React状态管理和数据抓取的首选解决方案。

但GraphQL改变了现状，主要是在数据抓取方面。

我们现在有了Relay Modern （Facebook开发）和Apollo，让你可以比Redux更高效地抓取并传递GraphQL数据到React应用的GraphQL客户端框架。

图片源自网络，仅做配文展示

但就像一位开发者指出那样：这些框架和它们的好处未必需要是互斥的。实际上，这几个一起使用可以提供很好的关注分离，这是web开发来说可太重要了。

这意味着你仍然可以跟Relay一起用Redux，Redux用于本地状态管理以及一些复杂的非服务器状态，然后由Relay来抓取。

但是社区对简化这个的东西（目前为止唯一的答案是Vue.js或者Cashay）比较焦虑。

SurveyJS

SurveyJS 是目前可用的最多的 feature-rich 调查/表单库；并且它可以很容易地定制和扩展，以满足你的需要。

图片源自网络，仅做配文展示

配置后生成代码：

图片源自网络，仅做配文展示

Leaflet

小渡认为 Leaflet 是将适合移动设备的交互式库，它的地图添加到你的应用程序中会是一个比较酷的选择。

它的文件很小，只有39kB，使其成为考虑其他地图库的绝佳替代方案。凭借跨平台的效率和文档齐全的 API，它拥有让你坠入爱河所需的一切。

图片源自网络，仅做配文展示

在 Leaflet 中，我们需要提供一个 tile 层，因为默认情况下没有。但这也意味着我们可以从各种免费和高级层中进行选择。

FullPage.js

这个开源库可以帮助你创建全屏滚动的网站，正如你在上面的看到的GIF动画那样。它易于使用并且有许多自定义选项，因此它被成千上万的开发人员使用并在 GitHub 上拥有超过 3 万Stars也就不足为奇了。

图片源自网络，仅做配文展示

这时可以在Codepen 演示，甚至可以将它与流行的框架一起使用，例如：

react-fullpage

vue-fullpage

angular-fullpage

这是你几乎可以在每个项目中都可以使用的少数库之一。如果你还没有开始使用它，那就试试吧，不会让你失望的。

Anime.js

作为最好的动画库之一，Anime.js 灵活且易于使用。它可以帮助你的项目添加一些非常酷的动画。Anime.js 适用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象，并且可以轻松集成到你的应用程序中。

图片源自网络，仅做配文展示

作为开发人员，拥有一个好的开发组合很重要。人们对你的组合的第一印象有助于决定他们是否会雇用你。还有什么比这个库更好的工具可以为你的投资组合带来活力。它不仅可以增强你的网站，还有助于展示实际技能。

Hammer.js

Hammer.js 是一个轻量级的 JavaScript 库，可让你向 Web 应用程序添加多点触控手势。小渡会推荐这个库来为你的组件添加一些乐趣。你会觉得它非常有趣。

图片源自网络，仅做配文展示

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

D3.js

如果你是一个痴迷于数据的开发人员，那么这个库非常适合你。我还没有找到一个可以像 D3 一样高效和精美地处理数据的库。D3 在 GitHub 上拥有超过 92k stars，是许多开发人员最喜欢的数据可视化库。

图片源自网络，仅做配文展示

很多大神最近使用 D3 通过 React 和 GitHub 上的约翰霍普金斯 CSSE 数据存储库来可视化 COVID-19 数据。这是一个非常有趣的项目，如果你正在考虑做类似的事情，我建议您尝试一下 D3.js。

Popper.js

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

图片源自网络，仅做配文展示

花时间配置 popper 元素似乎并不重要，但这些小事情会使你作为开发人员脱颖而出。它体积小，不占地方。

Math.js

有了这个库，复杂的数学问题就可以在前端浏览器上计算，而不会给后端服务器带来压力；它具有灵活的表达式解析器，支持符号计算，内置大量函数和常量，并提供了一个集成的解决方案来处理不同的数据类型，如数字、大数、复数、分数、单位和矩阵；

图片源自网络，仅做配文展示

功能强大且易于使用~

可以看到，以上分享的库，有的库高达几百 K star，有的库在小 1 K star 徘徊，但也丝毫不影响它们被列在一起。反而，这些体量小的库，能针对解决某一项问题，核心原理奇妙，官网也做得特别精美。

作为开发人员，了解和学会使用正确的 JavaScript 库很重要。它将使你的工作效率更高，并使开发变得更加容易和快捷。最后，你可以根据自己的需要选择哪个库。

还是那句老话：工具选得好，下班下得早；开发工作分两类：写轮子的为一类，用轮子的为一类；写轮子也是从用轮子做起的，因为找不到更适用的轮子，才想自己写一个，分享给大家用；开源万岁！