JavaScript工具库合集

您所在的位置：网站首页 › js常用事件代码 › JavaScript工具库合集

JavaScript工具库合集

2023-11-28 01:35| 来源: 网络整理| 查看: 265

推荐网站：https://www.npmjs.com/

js常用工具类 lodash.js

一个一致性、模块化、高性能的 JavaScript 实用工具库

npm install lodash 基本用法 import _ from 'lodash' _.max([4, 2, 8, 6]) // 返回数组中的最大值 => 8 _.intersection([1, 2, 3], [2, 3, 4]) // 返回多个数组的交集 => [2, 3] Ramda.js

一个很重要的库，提供了许多有用的方法，每个 JavaScript 程序员都应该掌握这个工具

npm install ramda 基本用法 const R = require('ramda') R.add(7)(10) // 17 返回两个值的和。 R.gt(2)(1) // true 判断第一个参数是否大于第二个参数。 R.gt('a')('z') // false

推荐链接->阮一峰老师的《# Ramda 函数库参考教程》

Day.js

一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有2KB。

npm install dayjs 基本用法 import dayjs from 'dayjs' dayjs().format('YYYY-MM-DD HH:mm') // => 2022-01-03 15:06 dayjs('2022-1-3 15:06').toDate() // => Mon Jan 03 2022 15:06:00 GMT+0800 (中国标准时间) big.js

一个小型，快速的JavaScript库，用于任意精度的十进制算术运算

npm install big.js 基本用法 const Big = require('big.js'); 或 import Big from 'big.js'; x = new Big(123.4567) y = Big('123456.7e-3') // 'new'关键字为可选 z = new Big(x) x.eq(y) && x.eq(z) && y.eq(z) // true qs

一个轻量的 url 参数转换的 JavaScript 库

npm install qs 基本用法 import qs from 'qs' qs.parse('user=tom&age=22') // => { user: "tom", age: "22" } qs.stringify({ user: "tom", age: "22" }) // dom库 JQuery

封装了各种dom/事件操作, 设计思想值得研究借鉴

基本用法 zepto

jquery的轻量级版本, 适合移动端操作

基本用法 fastclick

一个简单易用的库，它消除了移动端浏览器上的物理点击和触发一个 click 事件之间的 300ms 的延迟。目的就是在不干扰你目前的逻辑的同时，让你的应用感觉不到延迟，反应更加灵敏。

基本用法文件处理 file-saver

一个在客户端保存文件的解决方案，非常适合在客户端上生成文件的Web应用程序

基本用法 js-xlsx

一个强大的解析和编写excel文件的库

基本用法网络请求 Axios

一个基于 Promise 的 HTTP 库，可用在 Node.js 和浏览器上发起 HTTP 请求，支持所有现代浏览器，甚至包括 IE8+

基本用法 Superagent

基于Ajax的优化, 可以与 Node.js HTTP 客户端搭配使用

基本用法 fly.js

一个基于promise的http请求库, 可以用在node.js, Weex, 微信小程序, 浏览器, React Native中

基本用法动画库 Animate.css

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

npm install animate.css 基本用法 An animated element import 'animate.css' gsap

一个css+javascript动画库

基本用法 anime.js

一款功能强大的 Javascript 动画库。可以与CSS3属性、SVG、DOM元素、JS对象一起工作，制作出各种高性能、平滑过渡的动画效果。

npm install animejs 基本用法 import anime from 'animejs/lib/anime.es.js' // 页面渲染完成之后执行 anime({ targets: '.ball', translateX: 250, rotate: '1turn', backgroundColor: '#F00', duration: 800 }) Velocity

一个高效的 Javascript 动画引擎，与jQuery的 $.animate() 有相同的API, 同时还支持彩色动画、转换、循环、画架、SVG支持和滚动等效果

基本用法 Vivus

一个零依赖的JavaScript动画库，可以让我们用SVG制作动画，使其具有被绘制的外观

基本用法 GreenSock JS

一个JavaScript动画库，用于创建高性能、零依赖、跨浏览器动画，已在超过400万个网站上使用, 并且可以在React、Vue、Angular项目中使用

基本用法 Scroll Reveal

零依赖，为 web 和移动浏览器提供了简单的滚动动画，以动画的方式显示滚动中的内容

基本用法 Kute.js

一个强大高性能且可扩展的原生JavaScript动画引擎，具有跨浏览器动画的基本功能

基本用法 Typed.js

一个轻松实现打字效果的js插件

基本用法 fullPage.js

一个可轻易创建全屏滚动网站的js滚动动画库, 兼容性无可替代

基本用法 iscroll

移动端使用的一款轻量级滚动插件

基本用法鼠标/键盘相关 KeyboardJS

一个在浏览器中使用的库（与node.js兼容）.它使开发人员可以轻松设置键绑定和使用组合键来设置复杂的绑定.

基本用法 SortableJS

功能强大的JavaScript 拖拽库

基本用法图形/图像处理库 html2canvas

一个强大的使用js开发的浏览器网页截图工具

基本用法 dom-to-image

一个可以将任意DOM节点转换为用JavaScript编写的矢量（SVG）或光栅（PNG或JPEG）图像的库

基本用法 pica

一个在浏览器中调整图像大小，而不会出现像素失真，处理速度非常快的图片处理库

基本用法 Lena.js

一个轻量级的可以给你图像加各种滤镜的js库

基本用法 Compressor.js

一个使用本地canvas.toBlob API进行图像有损压缩的js库

基本用法 Fabric.js

一个易于使用的基于HTML5 canvas元素的图片编辑器

基本用法 merge-images

一个将多张图片合并成一张图的js插件

基本用法 cropperjs

一款强大的图片裁切库, 支持灵活的图片裁切方式

基本用法 Grade

一个基于图像中的前2种主要颜色生成互补渐变背景的库

基本用法其他工具库 js-cookie

一个简单的、轻量的处理 cookies 的 js API

npm install js-cookie 基本用法 import Cookies from 'js-cookie' Cookies.set('name', 'value', { expires: 7 }) // 有效期7天 Cookies.get('name') // => 'value' flv.js

bilibili 开源的 html5 flash 视频播放器，使浏览器在不借助 flash 插件的情况下可以播放 flv，目前主流的直播、点播解决方案。

npm install flv.js 基本用法 import flvjs from 'flv.js' // 页面渲染完成后执行 if (flvjs.isSupported()) { var myVideo = document.getElementById('myVideo') var flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'http://localhost:8080/test.flv' // 视频 url 地址 }) flvPlayer.attachMediaElement(myVideo) flvPlayer.load() flvPlayer.play() } vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。如果你还苦于在手机上如何调试代码，用它就对了。

npm install vconsole 基本用法 import VConsole from 'vconsole' const vConsole = new VConsole() console.log('Hello world') mescroll.js

一款精致的、在H5端运行的下拉刷新和上拉加载插件，主要用于列表分页、刷新等场景。

npm install mescroll.js 基本用法（vue组件） import MescrollVue from 'mescroll.js/mescroll.vue' export default { components: { MescrollVue }, data() { return { mescroll: null, // mescroll实例对象 mescrollDown: {}, //下拉刷新的配置 mescrollUp: { // 上拉加载的配置 callback: this.upCallback }, dataList: [] // 列表数据 } }, methods: { // 初始化的回调,可获取到mescroll对象 mescrollInit(mescroll) { this.mescroll = mescroll }, // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10 upCallback(page, mescroll) { // 发送请求 axios .get('xxxxxx', { params: { num: page.num, // 当前页码 size: page.size // 每页长度 } }) .then(response => { // 请求的列表数据 let arr = response.data // 如果是第一页需手动置空列表 if (page.num === 1) this.dataList = [] // 把请求到的数据添加到列表 this.dataList = this.dataList.concat(arr) // 数据渲染成功后,隐藏下拉刷新的状态 this.$nextTick(() => { mescroll.endSuccess(arr.length) }) }) .catch(e => { // 请求失败的回调,隐藏下拉刷新和上拉加载的状态; mescroll.endErr() }) } } } .mescroll { position: fixed; top: 44px; bottom: 0; height: auto; } Chart.js

一套基于 HTML5 的简单、干净并且有吸引力的 JavaScript 图表库

npm install chart.js 基本用法 import Chart from 'chart.js/auto' // 页面渲染完成后执行 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 } } } }) tailwindcss

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

npm install tailwindcss npx tailwindcss init 基本用法 bulma

基于 Flexbox 的现代 CSS 框架。

Bulma 是一个免费、开源的 CSS 框架，它提供了易于使用的前端的组件，您可以轻松地组合这些组件来构建响应式 Web 界面。

无需懂得 CSS，有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。

Bulma 框架最大的特点，就是简单好用。所有样式都基于 class，只需为 HTML 元素指定class，样式立刻生效。

npm install bulma 基本用法 styled-components

styled-components 是一个针对 React 的 css in js 类库。

它的优点在于：

贯彻 React 的 everything in JS 理念，降低 js 对 css 文件的依赖组件的样式和其他组件完全解耦，有效避免了组件之间的样式污染 npm install styled-components 基本用法 Hover

Hover.css 是一款非常简单实用的纯 CSS3 鼠标滑过特效动画库。

有 100 多种效果可以选择，包括：2D 动画、背景动画、边框动画、图标动画、发光渐变、阴影、对话框、折角等 100 多种特效。

npm install hover.css 基本用法

【本文地址】

JavaScript工具库合集

JavaScript工具库合集

今日新闻

推荐新闻