javascript有哪些库

javascript库有：jQuery、React、“D3.js”、Underscore、Lodash、Algolia Places、“Anime.js”、Animate On Scroll、“Bideo.js”、“Chart.js”等等。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

什么是JavaScript库？

JavaScript库包含各种功能，方法或对象，以在网页或基于JS的应用程序上执行实际任务。您甚至可以使用它们构建一个WordPress网站。

可以将它们视为一个图书库，您可以在其中重新阅读自己喜欢的书。您可能是一位作家，并且喜欢其他作家的书，获得新的观点或创新，并在生活中加以利用。

同样，JavaScript库具有开发人员可以重复使用和稍加改动可用的代码或功能。开发人员编写JS库代码，其他开发人员重复使用相同的代码来执行某些任务，例如准备幻灯片，而不是从头开始编写。这为他们节省了大量时间和精力。

它们恰恰是创建JavaScript库的动机，这就是为什么您可以在多个用例中找到数十个它们的原因。它们不仅可以节省您的时间，而且可以简化整个开发过程。

如何使用JavaScript库

要在您的应用中使用JavaScript库，请使用src引用库源路径或URL的属性将其添加 到 元素中。

阅读您打算使用的JavaScript库的文档以获取更多信息，并按照此处提供的步骤进行操作。

分享一些javascript库

1、jQuery

jQuery是一个经典的JavaScript库，具备快速，轻巧和功能丰富的特点。它由BarCamp NYC的John Resig于2006年建造。jQuery具有MIT许可的免费开源软件。

它使HTML文档的操作和遍历，动画，事件处理以及Ajax变得更加简单。

特点与优势：

它具备易于使用的简约API。

它在处理样式属性和查找元素时使用CSS3选择器。

jQuery是轻量级的，gzip和压缩只需30kb，并支持AMD模块。

由于其语法与CSS非常相似，也就是便于初学者学习。

可通过插件扩展。

具有支持多种浏览器（包括Chrome和Firefox）的API的多功能性。

用例：

使用CSS选择器的DOM操作，这些选择器使用某些条件来选择DOM中的节点。这些条件包括元素名称及其属性（如类和ID）。

使用Sizzle（开放源代码，多浏览器选择器引擎）在DOM中选择元素。

创建效果，事件和动画。

JSON解析。

Ajax应用程序开发。

特征检测。

用Promise和Deferred对象控制异步处理。

2、React.js

React.js（也称为ReactJS或React）是一个开放源代码的前端JavaScript库。它由曾在Facebook担任软件工程师Jordan Walke于2013年创建。

现在，它使用的是MIT许可证，但最初是根据Apache License 2.0发布的。React旨在使交互式UI的创建变得轻松自如。

只需为您的应用中的各个状态设计一个简单的视图。接下来，它将根据数据更改有效地渲染和更新正确的组件。

特点与优势：

React代码包含需要在React DOM库的帮助下渲染为DOM中特定元素的组件或实体。

它通过在数据结构中创建内存中的缓存，计算差异并有效地更新浏览器中的显示DOM来使用虚拟DOM。

由于这种选择性渲染，因此应用程序性能得以提高，同时节省了开发人员重新计算页面布局，CSS样式和全页面渲染的工作量。

它使用诸如render和componentDidMount之类的生命周期方法，以允许在实体生命周期中的特定点执行代码。

它支持结合了JS和HTML的JavaScript XML（JSX）。它有助于使用嵌套的元素，属性，JS表达式和条件语句进行组件渲染。

用例：

在开发移动或单页应用程序时用作基础。

将状态呈现给DOM并进行管理。

在开发Web应用程序和交互式站点时，构建有效的用户界面。

调试和测试更加容易。

众所周知，Facebook，Instagram和Whatsapp都使用React。

3、D3.js

Data-Driven Documents（简称为D3）或D3.js是另一个著名的JS库，开发人员可以使用它来对基于数据的文档进行操作。于2011年发布，使用的是BSD许可。

特点与优势：

它强调Web标准，并为您提供现代的浏览器功能，而不仅限于一个框架。

D3.js支持强大的数据可视化。

它支持HTML，CSS和SVG。

采用数据驱动的方法，并将其应用于操纵DOM。

D3.js速度很快，并支持多种动态行为以及用于动画和交互的数据集。

它减少了开销，从而允许在高帧速率下实现更大的图形复杂度。

用例：

产生交互式和动态数据可视化。

将数据绑定到DOM并对其执行数据驱动的转换。例如，您可以从数字数组中生成HTML表格，然后使用D3.js创建SVG条形图或3D表面图。

它的功能代码使其可与大量模块一起重用。

D3提供了多种模式来改变节点，例如通过采用声明性方法，添加，排序或删除节点，更改文本或HTML内容等来更改样式或属性。

要创建动画过渡，请通过事件对复杂过渡进行排序，执行CSS3过渡等。

4、Underscore.js

Underscore是一个JavaScript实用程序库，可为典型的编程任务提供各种功能。它是由Jeremy Askenas于2009年创建的，并获得了MIT许可。现在，Lodash已经超越了它。

特点与优势：

它的功能类似于Prototype.js（另一个流行的实用程序库），但是Underscore具有功能编程设计，而不是对象原型扩展。

根据它们操作的数据类型，它具有4种不同类型的100多种功能。这些是要操纵的功能：

对象

数组

对象和数组

其他功能

Underscore与Chrome，Firefox，Edge等兼容。

用例：

它支持诸如过滤器，地图等功能性助手，以及诸如绑定，快速索引，JavaScript模板，质量测试等特殊功能。

5、Lodash

Lodash还是一个JS实用程序库，可以更轻松地使用数字，数组，字符串，对象等。它于2013年发布，还使用了功能编程设计，例如Underscore.js。

特点与优势：

可以帮助您编写可维护的简洁JavaScript代码。

简化了常见的任务，例如数学运算，绑定事件，函数节流，修饰器，约束限制，去抖动等。

修剪，驼峰和大写等字符串函数都变得更加简单。

创建，修改，压缩和排序数组。

对集合，对象和序列的其他操作。

用例：

它的模块化方法可以帮助您：

迭代数组，字符串和对象。

制作复合功能。

操作和测试值。

6、Algolia Places

Algolia Places是一个JavaScript库，它提供了一种在站点上使用地址自动填写功能的简便且分布式的方法。这是一种非常快速且精确的工具，可以帮助您提高站点用户的体验。Algolia Places利用OpenStreetMap令人印象深刻的开源数据库来覆盖全球各地。

例如，您可以使用它来提高产品页面的转化率。

特点与优势：

通过同时填充多个输入，它简化了结帐流程。

您可以轻松使用国家或城市选择器。

您可以通过在地图上实时显示链接建议来快速查看结果。

Algolia Places可以处理键入错误并相应显示结果。

通过将所有查询自动路由到最接近的服务器，它可以在几毫秒内提供结果。

用例：

允许您合并地图以显示非常有用的特定位置。

它使您可以有效地使用表单。

7、Anime.js

如果要向站点或应用程序添加动画，Anime.js是您可以找到的最好的JavaScript库之一。它于2019年发布，轻量级且具备强大而简单的API。

特点与优势：

Anime.js与DOM属性，CSS属性，SVG，CSS转换和JS对象一起运行。

可与各种浏览器一起使用，例如Chrome，Safari，Firefox，Opera等。

它的源代码可以轻松解密和使用。

复杂的动画方法（例如重叠和交错跟随）变得更加容易。

用例：

您可以在属性和时间上使用Anime.js的交错系统。

在一个HTML元素上同时创建具有多个定时的分层CSS转换。

使用Anime.js回调和控件功能以同步方式播放，暂停，触发，倒退和控制事件。

8、Animate On Scroll (AOS)

Animate On Scroll非常适合单页视差网站。这个JS库是完全开源的，可以帮助您在页面上添加不错的动画，当您上下滚动时，它们看起来很漂亮。

通过帮助您添加淡入淡出效果，静态锚点位置等来提升网站设计感和增强用户满意度。

特点与优势：

该库可以检测元素位置，并在它们出现在视口中时添加合适的类。

除了轻松添加动画外，它还可以帮助您在视口中进行更改。

它可以在不同的设备上无缝运行，无论是手机，平板电脑还是计算机，

由于它是用纯JavaScript编写的，因此没有依赖关系。

用例：

根据另一个元素的位置对元素进行动画处理。

根据其屏幕位置对元素进行动画处理。

在手机上禁用元素动画。

创建不同的动画，例如淡入淡出，翻转，滑动，缩放，锚点放置等。

9、Bideo.js

您想将全屏视频纳入网站的背景吗？试试Bideo.js。

特点与优势：

使用此JavaScript库，添加视频背景非常容易。

此功能在不同比例和大小的屏幕上看起来很酷，并且可以正常工作。

添加的视频可以根据使用的浏览器调整大小。

易于使用CSS / HTML实施。

用例：

在网站上添加响应式全屏背景视频。

10、Chart.js

您的网站或项目与数据分析领域相关吗？

您是否需要提供大量统计数据？

Chart.js是一个出色的JavaScript库。

Chart.js是面向设计人员和开发人员的灵活，简单的库，他们可以立即在其项目中添加精美的图表。该JS库是开源且提供MIT许可证。

特点与优势：

优雅，简单，可添加基本图表。

产生响应式网页。

重量轻，易于学习和实施。

8种不同类型的图表。

非常适合初学者。

动画功能使页面更具交互性。

用例：

在混合图表类型的帮助下使用不同的数据集时，提供清晰的视觉表示。

以对数，日期，时间或自定义比例绘制稀疏和复杂的数据集。

11、Cleave.js

如果您想格式化文本内容，Cleave.js提供了一个有趣的解决方案。它的创建旨在通过格式化键入的数据来提供一种更简单的方法来提高输入字段的可读性。

这样，您不再需要掩盖模式或编写正则表达式来格式化文本。

特点与优势：

通过表单提交的一致数据来提高用户体验。

您可以对信用卡号，电话号码，日期，时间和数字执行不同的格式化类型。

格式化自定义块，前缀和定界符。

支持ReactJS组件，以及更多。

用例：

使用CSS选择器将cleave.js实现为多个DOM元素。

更新特定的原始值。

获取文本字段的引用。

在Vue.js，jQuery和Playground中，它与Redux表单一起使用。

12、Choreographer.js

使用Chreographer.js有效地对复杂CSS进行动画处理。它甚至可以添加更多可用于非CSS动画的自定义功能。

要使用此JavaScript库，请通过npm安装其软件包或添加其脚本文件。

特点与优势：

它的Animation类管理单个动画数据。

animationConfig对象配置每个动画实例。

包括2个内置的动画功能“更改”和“缩放”。

“比例”用于将逐步测量的值映射到节点的样式属性。

“更改”删除或添加样式属性。

用例：

执行即时滚动动画。

根据鼠标移动创建动画。

13、Glimmer

Glimmer于2017年发布，具有轻量级和快速的UI组件。它使用了功能强大的Ember CLI，并且可以将EmberJS作为组件使用。

特点与优势：

Glimmer是一个快速的DOM渲染引擎，可以为渲染和更新提供令人难以置信的性能。

它是多功能的，可以与您当前的技术堆栈一起使用，而无需您重写代码。

用例：

您可以将其用作独立组件，也可以将其添加为现有应用程序中的Web组件。

DOM渲染。

它可以帮助您区分静态内容和动态内容。

当您需要Ember的功能但包装更轻时，请使用Glimmer。

14、Granim.js

Granim.js是一个JS库，可帮助您创建流畅的交互式渐变动画。这样，您可以使您的网站在彩色背景中脱颖而出。

特点与优势：

渐变可以覆盖图像，独立工作，在图像蒙版下滑动等。

您可以使用百分比或像素值来自定义渐变方向。

将渐变方向设置为对角线，上下，左右，径向或自定义。

设置状态变化的动画持续时间（以毫秒（ms）为单位）。

自定义渐变颜色和位置。

根据画布的位置，来源，缩放比例等进行图像定制。

包括的其他选项包括设置回调，发出事件，渐变控制方法等。

用例：

使用3种2种颜色的渐变来创建基本的渐变动画。

使用2种具有3种颜色的渐变的复杂渐变动画。

使用一种背景图像，两种颜色和一种混合模式对渐变进行动画处理。

使用一个图像蒙版在特定形状下创建渐变动画。

创建响应事件的渐变动画。

15、fullPage.js

开源JS库fullPage.js可以帮助您轻松创建全屏滚动网站或一页网站。它使用简单，也可以在站点部分内添加横向滑块。

特点与优势：

提供多种自定义和配置选项。

支持JavaScript框架，例如react-fullpage，angular-fullpage和vue-fullpage。

启用垂直和水平滚动。

适应性设计，适合不同大小的屏幕以及多种浏览器。

页面加载时自动滚动。

视频/图像延迟加载。

用例：

使用许多扩展来改善默认功能。

创建全屏滚动站点。

建立一个单页网站。

16、Leaflet

Leaflet是最好的JavaScript库之一，可用于将交互式地图包括到您的站点中。它是开源的且适合移动设备，重约39kb。WordPress的MapPress Maps插件使用Leaflet为其交互式地图提供动力。

特点与优势：

提供性能功能，例如移动硬件加速和CSS功能。

独特的图层，包括平铺图层，弹出窗口，标记，矢量图层，GeoJSON和图像叠加层。

交互功能，包括拖动平移，缩放，键盘导航，事件等。

地图控件，例如图层切换器，属性，比例和缩放按钮。

支持浏览器，例如Chrome，Safari，Firefox，Edge等。

定制，包括OOP设施，基于HTML和图像的标记，CSS3控件和弹出窗口。

用例：

通过更好的缩放和平移，智能的多边形/折线渲染，模块化构建以及点击延迟移动动画，将地图添加到您的站点。

17、Multiple.js

Multiple.js使用CSS或HTML无需JavaScript坐标处理，即可在各种元素之间共享背景图像。

结果，它产生了惊人的视觉效果，以增加更多的用户交互。

18、Moment.js

当使用不同的时区，API调用本地语言等时，Moment.js可帮助您有效地管理时间和日期。

您可以通过验证，解析，格式化或操作日期和时间来简化它们。

19、Masonry

Masonry是一个很棒的JS网格布局库。该库可帮助您根据可用的垂直空间将网格元素放置在合适的位置。一些流行的画廊WordPress插件甚至使用了它。

20、Omniscient

Omniscient.js是一个JS库，可提供React组件抽象以实现包含不可变数据的自上而下的快速渲染。

该库可以优化您的项目并提供有趣的功能，从而帮助您无缝构建项目。

21、Parsley

您要向项目添加表单吗？

如果是的话，Parsley对您可能会有用。它是一个简单但功能强大的JS库，可用于验证表单。

22、Popper.js

创建Popper.js的目的是使放置弹出式菜单，下拉菜单，工具提示和其他上下文元素（更靠近按钮或其他类似元素）更容易。

Popper提供了一种很好的方式来排列它们，将它们粘贴到其他站点元素上，并使它们能够在任何屏幕尺寸上无缝播放。

23、Three.js

Three.js可以使您的3D设计令人愉悦。它使用WebGL在现代浏览器上渲染场景。如果您使用的是IE 10及更低版本，请使用其他CSS3，CSS2和SVH渲染器。

24、Screenfull.js

使用Screenfull.js将全屏元素添加到您的项目中。由于其令人印象深刻的跨浏览器效率，因此使用此JavaScript库不会遇到麻烦。

25、Polymer

Google开源JavaScript库 – Polymer，用于使用组件构建Web应用程序。

26、VOCA

创建Voca背后的想法是减轻使用JavaScript字符串时的痛苦。它带有有用的功能，可以轻松地操作字符串，例如更改大小写，填充，修剪，截断等等。

【相关推荐： javascript学习教程 】