分享八个常用的 JavaScript 库

亦凉 2024-02-05 23:36 10阅读 0赞

今天给大家分享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

示例：

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

官网：animate.style

### **5、animejs** ###

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

安装：

npm install animejs

示例：

<div class="ball" style="width: 50px; height: 50px; background: blue"></div>
    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

示例：

<canvas id="myChart" width="500" height="500"></canvas>
    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
          }
        }
      }
    })

### **结束** ###

今天的分享就到这里，以上每个库都作者都亲自实践过，你使用过哪些呢？