分享 8 个常用的 JavaScript 库，让你显得更专业

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

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

1、qs

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

安装：

npm install qs

示例：

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=32

官网：

www.npmjs.com/package/qs

2、js-cookie

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

安装：

npm install js-cookie

示例：

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

官网：

github.com/js-cookie/js-cookie

3、Day.js

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

安装：

npm install dayjs

示例：

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

官网：

day.js.org

4、Animate.css

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

安装：

npm install animate.css

示例：

   An animated element 
import 'animate.css'

官网：

animate.style

5、animejs

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

安装：

npm install animejs

示例：

import anime from 'animejs/lib/anime.es.js'
// After the page is rendered, execute
anime({
  targets: '.ball',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#F00',
  duration: 800
})

官网：

animejs.com

6、lodash.js

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

安装：

npm install lodash

基础：

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]

官网：

lodash.com

7、vConsole

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

安装：

npm install vconsole

示例:

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

官网：

github.com/Tencent/vConsole

8、Chart.js

一个简单、干净、有吸引力的基于 HTML5 的 JavaScript 图表库，面向设计师和开发人员的简单而灵活的 JavaScript 图表工具。

安装：

npm install chart.js

示例：

import Chart from 'chart.js/auto'
// executed after page rendering is complete
const ctx = document.getElementById('myChart')
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [
      {
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
})