JavaScript 工具库推荐

在现代前端开发中，JavaScript 已经成为构建复杂应用的核心语言。为了提高开发效率、减少重复造轮子、增强代码可维护性，开发者通常会借助一些优秀的 JavaScript 工具库（Utility Libraries）。

---

1. Lodash

功能强大、历史悠久的函数式工具库，适用于所有 JS 项目。

主要功能：

• _.map, _.filter, _.reduce 等函数式操作；
• _.cloneDeep() 深拷贝对象；
• _.debounce() 和 _.throttle() 防抖节流；
• _.get(), _.set() 安全访问嵌套属性；

示例：

import _ from 'lodash';

const data = [{ id: 1, name: 'Tom' }, { id: 2, name: 'Jerry' }];
const names = _.map(data, 'name'); // ['Tom', 'Jerry']

---

2. Day.js

轻量级日期处理库，适合替代 Moment.js（体积仅 2KB）

主要功能：

• 时间格式化 .format('YYYY-MM-DD')
• 时间加减 .add(1, 'day')
• 判断是否今天 .isToday()
• 多语言支持（需插件）

示例：

import dayjs from 'dayjs';

console.log(dayjs().format('YYYY年MM月DD日 HH:mm:ss'));

---

3. Numeral.js

数字格式化工具，常用于货币、百分比展示

import numeral from 'numeral';

numeral(123456.78).format('$0,0.00'); // $123,456.78

4. qs

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

// 安装
npm install qs

// 引入
import qs from 'qs'

qs.parse('username=kite&age=22') // => { username: "kite", age: "22" }
qs.stringify({ username: "kite", age: "22" }) // => username=kite&age=22

更多用法参考QS中文文档 | Storm

 5.js-cookie

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

// 安装
npm install js-cookie

// 引入
import Cookies from 'js-cookie'

Cookies.set('key', 'value', { expires: 7 }) // 有效期7天
Cookies.get('key') // => 'value'

// Delete cookie:
Cookies.remove('name');


// Delete a cookie valid to the path of the current page:
Cookies.set('name', 'value', { path: '' });

更多请参考js-cookie - npm

6. animate.css

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

// 安装
npm install animate.css

<h1 class="animate__animated animate__bounce">An animated element</h1>

import 'animate.css'

 更多用法参考 Animate中文网 – Animate安装、Animate使用、Animate下载

 7.validator.js

轻量级的JavaScript表单验证，字符串验证。没有依赖，支持UMD

// 安装
npm install validator

import isEmail from 'validator/es/lib/isEmail';
isEmail('foo@bar.com'); //=> true

import isURL from 'validator/es/lib/isURL';

export function isHttpURL(str) {
  return isURL(str, { protocols: ['http', 'https'] });
}

更多内容 GitHub - validatorjs/validator.js: String validation

 8. uuid

生成唯一标识符

import { v4 as uuidv4 } from 'uuid';
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

9. classnames

动态拼接class

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

10. Toastify

轻量级提示框库，替代 window.alert()

import Toastify from 'toastify-js';

Toastify({
  text: "保存成功！",
  duration: 3000,
  newWindow: true,
  gravity: "top", // `top` or `bottom`
  position: "right", // `left`, `center`, `right`
  backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();