分享八个常用的 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

示例:

<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}}}
})

结束

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/622527.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UDS 诊断通讯

UDS有哪些车型支持 UDS(统一诊断服务)协议被广泛应用于汽车行业中,支持多种车型。具体来说,UDS协议被用于汽车电子控制单元(ECU)之间的通讯,以实现故障诊断、标定、编程和监控等功能。 支持UDS协议的车型包括但不限于以下几种: 奥迪(Audi)车型:包括A3、A4、A5、A6…

239.【2023年华为OD机试真题(C卷)】求幸存者之和(模拟跳数-JavaPythonC++JS实现)

🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目-求幸存数之和二.解题思路三.题解代码Python题解…

剑指offer题解合集——Week3day7

文章目录 剑指offerWeek3周七&#xff1a;分行从上往下打印二叉树AC代码思路&#xff1a; 周日&#xff1a;之字形打印二叉树AC代码思路&#xff1a; 剑指offerWeek3 周七&#xff1a;分行从上往下打印二叉树 题目链接&#xff1a;分行从上往下打印二叉树 从上到下按层打印…

JDK8终将走进历史,Oracle宣布JDK继续免费

目录 前言Oracle 已免费提供 JDKOracle Java SE 产品最新动态 为什么业界中用JDK8那么多Java SE 8 公共更新结束总结 前言 今天想到上个月无意中听闻到的一句话&#xff1a;JDK8之后收费了&#xff0c;所以大家都用JDK8。当时只觉得这个话说得不对&#xff0c;但因为和说话的人…

Django数据库选移的preserve_default=False是什么意思?

有下面的迁移命令&#xff1a; migrations.AddField(model_namemovie,namemov_group,fieldmodels.CharField(defaultdjango.utils.timezone.now, max_length30),preserve_defaultFalse,),迁移命令中的preserve_defaultFalse是什么意思呢&#xff1f; 答&#xff1a;如果模型定…

点击随机红点的简单游戏(pygame)

import pygame import sys import random# 初始化 Pygame pygame.init()# 设置窗口大小 width, height 800, 600 screen pygame.display.set_mode((width, height)) pygame.display.set_caption("Click the Red Dot")# 定义颜色 black (0, 0, 0) red (255, 0, 0)…

Apache POI 导出Excel报表

大家好我是苏麟 , 今天聊聊Apache POI . Apache POI 介绍 Apache POI 是一个处理Miscrosoft Office各种文件格式的开源项目。简单来说就是&#xff0c;我们可以使用 POI 在 Java 程序中对Miscrosoft Office各种文件进行读写操作。 一般情况下&#xff0c;POI 都是用于操作 E…

浅谈 Raft 分布式一致性协议|图解 Raft

前言 大家好&#xff0c;这里是白泽。本文是一年多前参加字节训练营针对 Raft 自我整理的笔记。 本篇文章将模拟一个KV数据读写服务&#xff0c;从提供单一节点读写服务&#xff0c;到结合分布式一致性协议&#xff08;Raft&#xff09;后&#xff0c;逐步扩展为一个分布式的…

2024年华为OD机试真题-手机App防沉迷系统-Java-OD统一考试(C卷)

题目描述&#xff1a; 智能手机方便了我们生活的同时&#xff0c;也侵占了我们不少的时间。“手机App防沉迷系统”能够让我们每天合理的规划手机App使用时间&#xff0c;在正确的时间做正确的事。 它的大概原理是这样的&#xff1a; 1、在一天24小时内&#xff0c;可注册每个Ap…

Android基于Matrix绘制PaintDrawable设置BitmapShader,以手指触点为中心显示原图像圆图,Kotlin(3)

Android基于Matrix绘制PaintDrawable设置BitmapShader&#xff0c;以手指触点为中心显示原图像圆图&#xff0c;Kotlin&#xff08;3&#xff09; 在 Android基于Matrix绘制PaintDrawable设置BitmapShader&#xff0c;以手指触点为中心显示原图像圆图&#xff0c;Kotlin&#…

python for...else用法,一个实例就能让你明白

直接上代码&#xff0c;很简单&#xff0c;不用讲解吧&#xff0c;看不懂的话&#xff0c;就需要补充下基础知识了。 def funct2():for i in range(4):try:assert i>2print("success")breakexcept Exception as e:print(error)continueelse:print(循环不合预期)d…

读写分离的手段——主从复制,解决读流量大大高于写流量的问题

应用场景 假设说有这么一种业务场景&#xff0c;读流量显著高于写流量&#xff0c;你要怎么优化呢。因为写是要加锁的&#xff0c;可能就会阻塞你读请求。而且其实读多写少的场景还很多见&#xff0c;比如电商平台&#xff0c;用户浏览n多个商品才会买一个。 大部分人的思路可…

List集合遍历过程中修改元素(有坑)

说来惭愧&#xff0c;学 java 2年了&#xff0c;对 “Java是值传递” 这句话还没有理解它的精髓&#xff0c;以至于编程的时候出现了一些错误&#xff0c;这里记录一下。 一.问题再现 1.1将List集合中的每个字符串更改为其他值 1.2将List集合中的对象更改为其他对象 二.问题分…

extern static 在linux 和 qt下差别

从五个点来说 1.p3.h 中 静态定义一个const的int 变量并且赋值 2.p5.h 声明函数test2的定义 3. 直接extern 引用声明 test1() 函数 而不是像p5.h一样 把函数声明写到头文件 在别的.c文件直接包含头文件 第二点和第三点 是引用声明函数的两种用法 4.main函数 中static静态定…

修改Echarts图表的标题和副标题的内容

直接上代码 var graphicConfig [ { type: "text", left: "center", top: "center", style: { text: "包日", // 初始化为空字符串 textAlign: "center", fill: "#000", fontSize: 14, fontWeight: "bold&qu…

光猫(无限路由器)插入可移动硬盘搭建简易版的NAS

1.场景分析 最近查询到了许多有关NAS的资料&#xff0c;用来替代百度云盘等确实有很多优势&#xff0c;尤其是具有不限速&#xff08;速度看自己配置&#xff09;、私密性好、一次投入后续只需要电费即可等优势。鉴于手上没有可以用的资源-cpu、机箱、内存等&#xff0c;查询到…

计算机找不到msvcp120.dll如何解决?总结五个可靠的教程

在计算机使用过程中&#xff0c;遇到“找不到msvcp120.dll”这一问题常常令人困扰。msvcp120.dll作为Windows系统中至关重要的动态链接库文件&#xff0c;对于许多应用程序的正常运行起着不可或缺的作用。那么&#xff0c;究竟是什么原因导致找不到msvcp120.dll呢&#xff1f;又…

【打卡】牛客网:BM85 验证IP地址

之前涉及到IP地址的题有&#xff1a; BM74 数字字符串转化成IP地址BM22 比较版本号 BM85题目要求&#xff1a; IPv4&#xff1a; 4组十进制数&#xff0c;范围是0-255每组前无“0”分隔符是“.” IPv6&#xff1a; 8组十六进制数&#xff0c;忽略大小写每组前可以有“0”…

Java选择排序

选择排序是一种简单直观的排序算法&#xff0c;其基本思想是每一轮从待排序的元素中选择最小&#xff08;或最大&#xff09;的元素&#xff0c;将其与当前位置的元素交换。选择排序的实现步骤可以简要概括为&#xff1a; 初始化&#xff1a; 遍历整个数组&#xff0c;将当前位…

【设计模式】什么场景可以考虑使用简单工厂模式

1.概述 工厂模式是一种创建型模式&#xff0c;主要作用就是创建对象&#xff0c;将对象的创建过程和使用的过程进行解耦。我们平时说的工厂模式实际上是对三种不同类型的工厂模式的统称&#xff0c;简单工厂、工厂方法、抽象工厂&#xff0c;而在23种设计模式中&#xff0c;只…