{T}

工具库概述

JavaScript 生态系统中有丰富的工具库，合理使用可以提高开发效率。

一、工具库分类

类型代表库
工具函数Lodash、Underscore
HTTP 请求Axios、Fetch、SuperAgent
日期处理Day.js、date-fns、Moment.js
表单验证Validator.js、Yup、Joi
数据处理immutable.js、Immer
动画GSAP、Framer Motion
图表ECharts、Chart.js、D3

二、选择原则

1. 体积

javascript
// ❌ 导入整个库
import _ from 'lodash';

// ✅ 按需导入
import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';

2. 维护状态

  • 查看 GitHub Stars、Issues、Commits
  • 是否有活跃的社区
  • 文档是否完善

3. 兼容性

  • 浏览器兼容性
  • 框架兼容性
  • TypeScript 支持

三、常用工具函数

深拷贝

javascript
// Lodash
import cloneDeep from 'lodash/cloneDeep';
const newObj = cloneDeep(obj);

// 原生 JSON 方法（有局限性）
const newObj = JSON.parse(JSON.stringify(obj));

// structuredClone（现代浏览器）
const newObj = structuredClone(obj);

防抖节流

javascript
import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';

const debouncedFn = debounce(fn, 300);
const throttledFn = throttle(fn, 300);

深比较

javascript
import isEqual from 'lodash/isEqual';

if (isEqual(obj1, obj2)) {
  // 深度相等
}

四、现代替代方案

Lodash → 原生方法

javascript
// Lodash
_.map(arr, fn);
_.filter(arr, fn);
_.find(arr, fn);
_.reduce(arr, fn, init);

// 原生
arr.map(fn);
arr.filter(fn);
arr.find(fn);
arr.reduce(fn, init);

Moment.js → Day.js

javascript
// Moment.js (体积大)
import moment from 'moment';
moment().format('YYYY-MM-DD');

// Day.js (轻量)
import dayjs from 'dayjs';
dayjs().format('YYYY-MM-DD');

五、推荐工具库

场景推荐原因
工具函数Lodash ES按需导入、功能完善
日期处理Day.js轻量、API 简洁
HTTP 请求Axios功能丰富、拦截器
表单验证YupSchema 验证、TypeScript
状态管理Immer不可变数据

💡 提示：优先使用原生 API，工具库只在必要时引入。