分享八个常用的 JavaScript 库,让你显得更专业

前端达人 2024-01-11 15:36:35编程技术
19

JavaScript.png

大家好,今天给大家分享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   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     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
      }
    }
  }
})

结束

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

JavaScript
THE END
tom
不图事事圆满 但图事事甘心。

相关推荐

JavaScript开发数独游戏的完整步骤和实现过程
数独是一种起源于日本的逻辑推理游戏,凭借其简单的规则和深刻的逻辑性在全球范围内广受欢迎。作为一名程序员,使用JavaScript开发一个数独游戏不仅可以锻炼编程技巧,还能提...
2024-07-04 编程技术
88

使用HTML+JavaScript实现贪吃蛇游戏(附示例代码)
贪吃蛇游戏是一款经典的休闲游戏,许多人童年时都在各种电子设备上玩过。通过HTML和JavaScript,我们可以创建一个简单但功能齐全的贪吃蛇游戏。本文将详细介绍如何使用HTML和...
2024-07-03 编程技术
96

UI设计更高效:2024热门前端组件库大全
2024年,前端技术将迎来新的高峰,各类新兴和成熟的组件库将继续推动Web设计的边界。本文将全面介绍2024年热门的前端组件库,帮助你选择最适合的工具,提升你的UI设计效率。
2024-07-01 编程技术
83

使用Python和jieba库生成中文词云的示例代码
在文本分析和数据可视化的领域中,词云是一种展示文本数据中关键词频率的直观方式。Python作为一种强大的编程语言,提供了多种库来帮助我们生成词云,如wordcloud和jieba。在...
2024-07-01 编程技术
69

Navicat 推出免费数据库管理软件 Premium Lite:支持 MySQL、MariaDB 等
近日,Navicat 推出一款免费的数据库管理开发工具——Navicat Premium Lite,针对入门级用户,支持基础的数据库管理和协同合作功能。Navicat Premium Lite 作为 Navicat Prem...
2024-06-28 新闻资讯
81

GD库助力PHP:轻松实现WebP到JPG格式转换
WebP是一种由谷歌开发的图像格式,它提供了比传统JPEG格式更高的压缩比和更佳的图像质量。然而,在某些情况下,我们仍然需要将WebP图像转换为更通用的JPG格式,以确保广泛的兼...
2024-06-17 编程技术
63