分享 7 个常用的 JavaScript 库

2024-01-26
福建
本文字数：1764 字
阅读完需：约 6 分钟

大家好，今天给大家分享 7 个常用的 JavaScript 库，掌握这些 JavaScript 工具库，让你的项目看起来很棒。

专家与普通人的重要区别在于他们善于使用工具，留出更多的时间用于计划和思考。编写代码也是如此。有了合适的工具，你就有更多的时间来规划架构和攻克难关，更多的把精力放在业务实现上。今天，我将与大家分享最流行的几个常用且流行的 JavaScript 库。

1、qs

一个轻量级的 url 参数转换 JavaScript 库，可以将 URL 的一些参数，转换成 JSON 的格式。

安装：

复制

npm install qs1.

复制代码

示例：

复制

import qs from 'qs'qs.parse('user=maxwell&age=32'); // return { user: "maxwell", age: "32" }qs.stringify({ user: "maxwell", age: "32" }); //return user=maxwell&age=321.2.3.4.5.

复制代码

官网：

www.npmjs.com/package/qs

2、js-cookie

用于处理 cookie 的简单、轻量级 JavaScript API。

安装：

复制

npm install js-cookie1.

复制代码

示例：

复制

import Cookies from 'js-cookie'Cookies.set('name', 'maxwell', { expires: 10 }) // cookies are valid for 10 daysCookies.get('name') // return 'maxwell'1.2.3.4.

复制代码

官网：

github.com/js-cookie/js-cookie

3、Day.js

一个用于处理时间和日期的极简 JavaScript 库，具有与 Moment.js 相同的 API 设计，但大小只有 2KB。

安装：

复制

npm install dayjs1.

复制代码

示例：

复制

import dayjs from 'dayjs'dayjs().format('YYYY-MM-DD HH:mm')    dayjs('2022-11-1 12:06').toDate()1.2.3.4.

复制代码

官网：

day.js.org

4、Animate.css

一个跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好，简单易用。

安装：

复制

npm install animate.css1.

复制代码

示例：

复制

<h1 class="animate__animated animate__bounce">   An animated element</h1> import 'animate.css'1.2.3.4.

复制代码

官网：

animate.style

5、animejs

一个强大的 Javascript 动画库。可以与 CSS3 属性、SVG、DOM 元素和 JS 对象一起创建各种高性能、平滑过渡的动画效果。

安装：

复制

npm install animejs1.

复制代码

示例：

复制

<div class="ball" style="width: 50px; height: 50px; background: blue"></div>import anime from 'animejs/lib/anime.es.js'// After the page is rendered, executeanime({  targets: '.ball',  translateX: 250,  rotate: '1turn',  backgroundColor: '#F00',  duration: 800})1.2.3.4.5.6.7.8.9.10.

复制代码

官网：

animejs.com

6、lodash.js

一个提供模块化、高性能和附加功能的现代 JavaScript 实用程序库。

安装：

复制

npm install lodash1.

复制代码

基础：

复制

import _ from 'lodash'_.max([4, 2, 8, 6]) // returns the maximum value in the array  => 8_.intersection([1, 2, 3], [2, 3, 4]) // returns the intersection of multiple arrays => [2, 3]1.2.3.4.

复制代码

官网：

lodash.com

7、vConsole

一个轻量级、可扩展的移动网页前端开发工具。如果您仍在为如何在手机上调试代码而苦恼，请使用它。vConsole 是无框架的，您可以在 Vue 或 React 或任何其他框架应用程序中使用它。

安装：

复制

npm install vconsole1.

复制代码

示例:

复制

import VConsole from 'vconsole';
const vConsole = new VConsole();// or init with optionsconst vConsole = new VConsole({ theme: 'dark' });
// call `console` methods as usualconsole.log('Hello world');
// remove it when you finish debuggingvConsole.destroy();1.2.3.4.5.6.7.8.9.10.11.

复制代码

官网：

github.com/Tencent/vConsole

技术前沿拓展

前端开发，你的认知不能仅局限于技术内，需要发散思维了解技术圈的前沿知识。细心的人会发现，开发内部工具的过程中，大量的页面、场景、组件等在不断重复，这种重复造轮子的工作，浪费工程师的大量时间。

介绍一款程序员都应该知道的软件JNPF快速开发平台，很多人都尝试用过它，它是功能的集大成者，任何信息化系统都可以基于它开发出来。

这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类，方便扩展；集成了代码生成器，支持前后端业务代码生成，实现快速开发，提升工作效率；框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用；后端框架支持 Vue2、Vue3。如果你有闲暇时间，可以做个知识拓展。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

发布于: 17 分钟前阅读数: 5

伤感汤姆布利柏

关注

还未添加个人签名 2023-06-19 加入

还未添加个人简介

发布

暂无评论

创作场景

分享 7 个常用的 JavaScript 库

1、qs

2、js-cookie

3、Day.js

4、Animate.css

5、animejs

6、lodash.js

7、vConsole

​技术前沿拓展

伤感汤姆布利柏

评论

技术前沿拓展