前言

本篇文章记录一些我看到的可能在日常开发中可以节约给我们省事的库

工具库

timeago.js

格式化日期时间库，比如：“3 hours ago”，支持多语言，仅 2Kb 大小。同时提供了 React 版本 timeago-react。

1
2
3

timeage.format(1544666010224, "zh_CN"); // 输出 “5 年前”
timeage.format(Date.now() - 1000, "zh_CN"); // 输出 “刚刚”
timeage.format(Date.now() - 1000 * 60 * 5, "zh_CN"); // 输出 “5 分钟前”

注意安装是要安装 timeago.js 而不是 timeago,timeago 是基于 JQ 的库,
文档：https://www.npmjs.com/package/timeago.js?activeTab=readme

filesize

filesize 提供了一种简单方法，便于从数字（浮点数或整数）或字符串转换成可读性高的文件大小。

console.log(filesize(1024)); // 1.02 kB

console.log(filesize(1024 * 1024)); // 1.05 MB

console.log(filesize(1024 * 1024 * 1024)); // 1.07 GB

console.log(filesize(1024 * 1024 * 1024 * 1024)); // 1.1 TB

文档:https://www.npmjs.com/package/filesize?activeTab=readme

ramda

实用的工具库，相比与 lodash，更加面向现代，提供更多新功能（tryit，retry 等函数），源码可读性高，如果不想安装它，大部分函数可以直接复制到本地使用。

import * as _ from "radash";

const gods = [
  {
    name: "Ra",
    power: "sun",
    rank: 100,
    culture: "egypt",
  },
  {
    name: "Loki",
    power: "tricks",
    rank: 72,
    culture: "norse",
  },
  {
    name: "Zeus",
    power: "lightning",
    rank: 96,
    culture: "greek",
  },
];

_.max(gods, (g) => g.rank); // => ra
_.sum(gods, (g) => g.rank); // => 268
_.fork(gods, (g) => g.culture === "norse"); // => [[loki], [ra, zeus]]
_.sort(gods, (g) => g.rank); // => [ra, zeus, loki]
_.boil(gods, (a, b) => (a.rank > b.rank ? a : b)); // => ra

_.objectify(
  gods,
  (g) => g.name.toLowerCase(),
  (g) => _.pick(g, ["power", "rank", "culture"])
); // => { ra, zeus, loki }

const godName = _.get(gods, (g) => g[0].name);

const [err, god] = await _.try(api.gods.findByName)(godName);

const allGods = await _.map(gods, async ({ name }) => {
  return api.gods.findByName(name);
});

文档:https://www.npmjs.com/package/radash

day.js

这个我已经用的非常多了，替代 moment.js 使用,一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样, 体积只有 2kb

dayjs("2018-08-08"); // parse

dayjs().format("{YYYY} MM-DDTHH:mm:ss SSS [Z] A"); // display

dayjs().set("month", 3).month(); // get & set

dayjs().add(1, "year"); // manipulate

dayjs().isBefore(dayjs()); // query

文档:https://www.npmjs.com/package/dayjs

big.js

big.js 一个小型，快速的 JavaScript 库，用于任意精度的十进制算术运算，与之类似的还有 decimal.js

0.3 - 0.1; // 0.19999999999999998
x = new Big(0.3);
x.minus(0.1); // "0.2"
x; // "0.3"

文档:https://www.npmjs.com/package/big.js

qs

一个 url 参数转化 (parse 和 stringify)的轻量级 js 库

1 2	var limited = qs.parse("a=b&c=d", { parameterLimit: 1 }); assert.deepEqual(limited, { a: "b" });

文档:https://www.npmjs.com/package/qs

driver.js

driver.js 是一款用原生 js 实现的页面引导库
文档:https://www.npmjs.com/package/driver.js

qrcode

前端生成二维码
文档:https://www.npmjs.com/package/qrcode

validator.js

用来更加快捷高效实现表单校验
文档:https://www.npmjs.com/package/validator.js

mitt

用来实现发布订阅模式，兄弟组件之间实现通信

uuid

生成唯一标识符

nprogress

可用来实现路由进度条

文档类

pdf.js

这个我之前介绍过了,自己基于 html 实现预览 pdf 的,一些小操作大家可以找找我之前的博客
文档:https://www.npmjs.com/package/pdfjs-dist

print.js

打印 pdf,这个我之前也有介绍过
文档:https://www.npmjs.com/package/print-js

js-zip

js 打包压缩包
文档:https://www.npmjs.com/package/jszip

xlsx

前端导出 excel

dom 类

fastclick

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

鼠标/键盘操作类

SortableJS

功能强大的 JavaScript 拖拽库
推荐自定义情况比较高的时候使用，平时还是用一些其他的库比较好，如果是 vue，有vuedraggable,react 也有react-draggable
文档：https://www.npmjs.com/package/sortablejs

KeyboardJS

一个在浏览器中使用的库（与 node.js 兼容）.它使开发人员可以轻松设置键绑定和使用组合键来设置复杂的绑定.
文档:https://www.npmjs.com/package/keyboard-js

图片图形库

html2canvas

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

1
2
3

html2canvas(document.body).then(function (canvas) {
  document.body.appendChild(canvas);
});

文档:https://www.npmjs.com/package/html2canvas

dom-to-image

与 html2canvas 其类似的还有 dom-to-image,一个可以将任意 DOM 节点转换为用 JavaScript 编写的矢量（SVG）或光栅（PNG 或 JPEG）图像的库

1
2
3

domtoimage.toBlob(document.getElementById("my-node")).then(function (blob) {
  window.saveAs(blob, "my-node.png");
});

文档:https://www.npmjs.com/package/dom-to-image

cropperjs

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

Fabric.js

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

动画库

这个太多了，就随便举几个例子好了

Anime.js

一个 JavaScript 动画库，可以处理 CSS 属性，单个 CSS 转换，SVG 或任何 DOM 属性以及 JavaScript 对象

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 插件
文档:https://www.npmjs.com/package/typed.js

fullPage.js

一个可轻易创建全屏滚动网站的 js 滚动动画库, 兼容性无可替代
文档:https://www.npmjs.com/package/fullpage.js

mixitup

用来制作排序动画
文档:https://www.npmjs.com/package/mixitup

结语

本篇文章就分享到这里了，相信大家都有自己开发时候用到的心满意足的组件库，欢迎大家一起分享

前言

工具库