JSCommon系列 - 前端常用工具库集合

在JSCommon编码之前，我们收集了一批热门的前端常用工具库，我们根据JSCommon架构设计保留了10+做为依赖。合适的工具库能够显著提升开发效率，本文整理了最常用的前端工具库，按功能领域分类介绍。

JSCommon 介绍

JavaScript/TypeScript 的简单工具集合，为前端应用提供你所需要的全部工具函数

npm install @wolforest/jscommon

项目地址： github.com/wolforest/j...

工具库分类概览

一、核心开发工具

1.1 数据处理

Lodash

JavaScript 实用工具库，提供一致性、模块化和高性能的数据处理函数。

安装：

npm install lodash

主要功能：

• 数组、对象深度操作
• 函数式编程工具
• 字符串处理
• 数学计算
• 深拷贝与比较

适用场景：

• 复杂数据结构处理
• 函数式编程开发
• 通用工具函数需求

基础示例：

import _ from 'lodash';

// 数组处理
const array = [1, 2, [3, 4, [5]]];
console.log(_.flattenDeep(array)); // [1, 2, 3, 4, 5]

// 对象处理
const object = { a: [{ b: { c: 3 } }] };
console.log(_.get(object, 'a[0].b.c')); // 3

// 函数工具
const debounced = _.debounce(() => console.log('搜索'), 300);

注意事项：

• 按需导入以减小打包体积
• 注意方法的不可变性

Immer

简化不可变数据结构处理的库。

安装：

npm install immer

主要功能：

• 可变风格编写不可变更新
• 自动生成不可变数据
• TypeScript 支持
• 结构共享优化
• 支持 Map/Set

适用场景：

• React 状态更新
• Redux reducer 编写
• 复杂状态管理

基础示例：

import produce from 'immer';

const baseState = [
  { title: "Learn TypeScript", done: true },
  { title: "Try Immer", done: false }
];

const nextState = produce(baseState, draft => {
  draft[1].done = true;
  draft.push({ title: "Tweet about it" });
});

注意事项：

• 避免在性能关键场景过度使用
• 理解 draft 对象的特性

Ramda

专注于函数式编程范式的工具库。

安装：

npm install ramda

主要功能：

• 自动柯里化
• 函数组合
• 不可变数据操作
• Point-free 编程
• 函数式数据处理

适用场景：

• 函数式编程开发
• 数据转换处理
• 声明式编程

基础示例：

import * as R from 'ramda';

const numbers = [1, 2, 3, 4];
const double = n => n * 2;
const isEven = n => n % 2 === 0;

// 函数组合
const doubleEvenNumbers = R.pipe(
  R.filter(isEven),
  R.map(double)
);

console.log(doubleEvenNumbers(numbers)); // [4, 8]

// 柯里化
const multiply = R.curry((a, b) => a * b);
const double2 = multiply(2);
console.log(double2(4)); // 8

注意事项：

• 理解函数式编程概念
• 合理使用柯里化特性

Big.js

专业的高精度数学计算库。

安装：

npm install big.js

主要功能：

• 高精度计算
• 小数点运算
• 金融计算
• 链式操作
• 舍入控制

适用场景：

• 金融计算
• 精确数学运算
• 科学计算

基础示例：

import Big from 'big.js';

// 基础计算
const x = new Big(0.1);
const y = new Big(0.2);
const sum = x.plus(y);  // '0.3'

// 金融计算
const price = new Big('1234.5');
const tax = new Big('0.20');
const total = price.times(Big(1).plus(tax));

// 舍入控制
Big.DP = 2;
Big.RM = Big.ROUND_HALF_UP;
const result = new Big('1.235').round(); // '1.24'

注意事项：

• 注意性能开销
• 合理设置精度

Number-Precision

专门解决 JavaScript 浮点数计算精度问题的工具库。

安装：

npm install number-precision

主要功能：

• 加减乘除运算
• 四舍五入
• 数字格式化
• 链式操作
• 小数点处理

适用场景：

• 金融计算
• 商业运算
• 精确计算

基础示例：

import NP from 'number-precision';

// 加法
NP.plus(0.1, 0.2);  // 0.3
// 减法
NP.minus(1.0, 0.9); // 0.1
// 乘法
NP.times(3, 0.3);   // 0.9
// 除法
NP.divide(1.21, 1.1); // 1.1

// 四舍五入
NP.round(1.2345, 2); // 1.23

// 链式操作
NP.strip(NP.plus(0.1, 0.2)); // 0.3

注意事项：

• 了解精度限制
• 注意数值范围

1.2 状态管理

Redux Toolkit

Redux 官方推荐的工具集，简化 Redux 开发流程。

安装：

npm install @reduxjs/toolkit react-redux

主要功能：

• 简化 Store 配置
• 内置 Immer 支持
• 自动化 action 创建
• 异步 action 处理
• TypeScript 支持

适用场景：

• 大型应用状态管理
• 复杂数据流处理
• 团队协作开发

基础示例：

import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => {
      state.value += 1;
    },
    decrement: state => {
      state.value -= 1;
    }
  }
});

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});

// 在组件中使用
import { useSelector, useDispatch } from 'react-redux';
const { increment } = counterSlice.actions;

function Counter() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();
  
  return (
    <button onClick={() => dispatch(increment())}>
      Count: {count}
    </button>

  );
}

注意事项：

• 遵循 Redux 数据流规范
• 合理划分 state 结构

Zustand

轻量级状态管理库，专为 React 设计。

安装：

npm install zustand

主要功能：

• 简单的 API 设计
• 自动状态更新
• 中间件支持
• 异步操作支持
• 状态持久化

适用场景：

• 中小型应用状态管理
• 快速原型开发
• 简单状态共享

基础示例：

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 })
}));

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>Count: {count}</button>;
}

注意事项：

• 避免过度分割状态
• 注意状态更新的性能影响

Jotai

原子化的状态管理方案，专注于细粒度状态控制。

安装：

npm install jotai

主要功能：

• 原子级状态管理
• 派生状态支持
• 异步状态处理
• React Suspense 集成
• 开发工具支持

适用场景：

• 细粒度状态管理
• React 组件状态共享
• 需要派生状态的场景

基础示例：

import { atom, useAtom } from 'jotai';

// 创建原子状态
const countAtom = atom(0);
const doubleAtom = atom((get) => get(countAtom) * 2);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [double] = useAtom(doubleAtom);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}, Double: {double}
      </button>

    </div>

  );
}

注意事项：

• 合理设计原子粒度
• 注意派生状态的性能影响

1.3 路由与请求

React Router

React 应用的标准路由解决方案。

安装：

npm install react-router-dom

主要功能：

• 声明式路由配置
• 嵌套路由支持
• 动态路由匹配
• 路由守卫
• 路由懒加载

适用场景：

• SPA 应用路由管理
• 权限路由控制
• 页面状态保持

基础示例：

import { 
  BrowserRouter, 
  Routes, 
  Route, 
  Link,
  useParams 
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">首页</Link>

        <Link to="/about">关于</Link>

      </nav>

      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>

    </BrowserRouter>

  );
}

function UserProfile() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

注意事项：

• 注意路由配置的顺序
• 合理使用路由懒加载

Axios

功能强大的 HTTP 客户端。

安装：

npm install axios

主要功能：

• 请求/响应拦截
• 请求取消
• 自动转换 JSON
• 客户端/服务端支持
• 请求进度监控

适用场景：

• API 接口调用
• 文件上传下载
• 请求统一处理

基础示例：

import axios from 'axios';

// 创建实例
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {'X-Custom-Header': 'value'}
});

// 请求拦截器
api.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${getToken()}`;
  return config;
});

// 响应拦截器
api.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response.status === 401) {
      // 处理认证错误
    }
    return Promise.reject(error);
  }
);

// 使用实例
async function fetchUsers() {
  try {
    const users = await api.get('/users');
    return users;
  } catch (error) {
    console.error('Error fetching users:', error);
  }
}

注意事项：

• 统一处理错误响应
• 注意请求取消的内存泄漏

1.3 时间处理

Day.js

轻量级的日期处理库。

安装：

npm install dayjs

主要功能：

• 日期解析和格式化
• 日期计算
• 相对时间
• 国际化支持
• 插件扩展

适用场景：

• 日期时间处理
• 时间展示
• 日期计算

基础示例：

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/zh-cn';

dayjs.extend(relativeTime);
dayjs.locale('zh-cn');

// 基础使用
const now = dayjs();
console.log(now.format('YYYY-MM-DD HH:mm:ss'));

// 日期计算
const tomorrow = now.add(1, 'day');
const lastWeek = now.subtract(1, 'week');

// 相对时间
console.log(dayjs('2021-01-01').fromNow());

// 日期比较
const isBefore = dayjs('2021-01-01').isBefore(now);
const isSame = dayjs('2021-01-01').isSame(now, 'year');

注意事项：

• 按需加载插件
• 注意时区处理

date-fns

现代化的日期工具库。

安装：

npm install date-fns

主要功能：

• 函数式编程风格
• Tree-shaking 支持
• TypeScript 支持
• 不可变操作
• 国际化支持

适用场景：

• 日期计算
• 日期格式化
• 时区处理

基础示例：

import { format, addDays, differenceInDays, isValid } from 'date-fns';
import { zhCN } from 'date-fns/locale';

// 格式化日期
const date = new Date();
console.log(format(date, 'yyyy-MM-dd HH:mm:ss'));
console.log(format(date, 'PPP', { locale: zhCN }));

// 日期计算
const tomorrow = addDays(date, 1);
const diff = differenceInDays(tomorrow, date);

// 日期验证
const isValidDate = isValid(date);

// 日期比较
const isFuture = date > new Date();

注意事项：

• 按需导入函数
• 注意时区问题

1.4 唯一 ID

Nanoid

轻量级的唯一 ID 生成器。

安装：

npm install nanoid

主要功能：

• 生成唯一标识符
• URL 安全
• 自定义字符集
• 体积小巧
• 高性能

适用场景：

• 生成唯一 ID
• 临时标识符
• URL 友好的 ID

基础示例：

import { nanoid, customAlphabet } from 'nanoid';

// 生成默认 ID
const id = nanoid(); // "V1StGXR8_Z5jdHi6B-myT"

// 指定长度
const shortId = nanoid(10); // "IRFa-VaY2b"

// 自定义字符集
const customNanoid = customAlphabet('1234567890abcdef', 10);
const customId = customNanoid(); // "a1b2c3d4e5"

// URL 友好的 ID
const urlId = nanoid(21); // 确保 URL 安全

注意事项：

• 不用于加密目的
• 考虑碰撞概率

1.5 类名处理

Classnames

灵活的 CSS 类名处理工具。

安装：

npm install classnames

主要功能：

• 条件类名
• 数组支持
• 对象语法
• 嵌套支持
• 类型安全

适用场景：

• React 组件样式
• 动态类名处理
• 条件样式应用

基础示例：

import classNames from 'classnames';

function Button({ primary, disabled, className }) {
  const btnClass = classNames(
    'btn',
    {
      'btn-primary': primary,
      'btn-disabled': disabled
    },
    className
  );

  // 数组语法
  const classes = classNames([
    'base-class',
    primary && 'primary',
    disabled && 'disabled'
  ]);

  // 对象语法
  const dynamicClasses = classNames({
    'btn': true,
    'btn-pressed': isPressed,
    'btn-hover': isHovered,
    [`btn-${size}`]: size
  });

  return <button className={btnClass}>Click Me</button>;
}

注意事项：

• 避免过度使用
• 保持类名语义化

1.6 URL处理

query-string

现代化的 URL 参数处理库。

安装：

npm install query-string

主要功能：

• URL 参数解析
• 参数序列化
• 数组格式支持
• 嵌套对象处理
• 类型转换

适用场景：

• URL 参数处理
• 路由参数管理
• API 请求参数

基础示例：

import queryString from 'query-string';

// 基础解析
const parsed = queryString.parse('?foo=bar&baz=qux');
console.log(parsed); // { foo: 'bar', baz: 'qux' }

// 数组参数
const arrayParsed = queryString.parse('?colors[]=red&colors[]=blue');
console.log(arrayParsed.colors); // ['red', 'blue']

// 序列化对象
const stringified = queryString.stringify({
  name: 'John',
  filters: ['active', 'verified'],
  sort: { field: 'name', order: 'asc' }
});

// 带选项的序列化
const customStringified = queryString.stringify({
  names: ['John', 'Jane'],
  age: undefined
}, {
  arrayFormat: 'bracket',
  skipNull: true,
  skipEmptyString: true
});

注意事项：

• 处理特殊字符编码
• 注意数组格式选项

qs

URL 参数解析和字符串化工具。

安装：

npm install qs

主要功能：

• 参数解析
• 参数序列化
• 嵌套对象支持
• 数组格式化
• 自定义分隔符

适用场景：

• URL 参数处理
• API 请求参数
• 表单数据处理

基础示例：

import qs from 'qs';

// 解析 URL 参数
const params = qs.parse('page=1&size=10&sort=name');
console.log(params); // { page: '1', size: '10', sort: 'name' }

// 序列化对象
const obj = {
  filter: {
    name: 'john',
    age: {
      $gt: 18
    }
  },
  sort: ['name', 'age']
};
console.log(qs.stringify(obj)); // 'filter[name]=john&filter[age][$gt]=18&sort[0]=name&sort[1]=age'

// 自定义选项
const customParams = qs.stringify(obj, {
  arrayFormat: 'brackets',
  encode: false
});

注意事项：

• 注意参数编码
• 处理特殊字符

1.7 React Hooks

react-use

实用的 React Hooks 集合。

安装：

npm install react-use

主要功能：

• 传感器 Hooks
• 生命周期 Hooks
• 状态 Hooks
• 副作用 Hooks
• UI Hooks

适用场景：

• React 功能增强
• 常见功能封装
• 状态管理

基础示例：

import { useMount, useToggle, useLocalStorage } from 'react-use';

function App() {
  // 组件挂载钩子
  useMount(() => {
    console.log('Component mounted');
  });

  // 切换状态
  const [on, toggle] = useToggle(false);

  // 本地存储
  const [value, setValue] = useLocalStorage('key', 'default');

  return (
    <div>
      <button onClick={toggle}>{on ? 'ON' : 'OFF'}</button>

      <input
        value={value}
        onChange={e => setValue(e.target.value)}
      />
    </div>

  );
}

注意事项：

• 按需导入 hooks
• 注意性能影响

ahooks

阿里巴巴开源的 React Hooks 库。

安装：

npm install ahooks

主要功能：

• 请求 Hooks
• DOM Hooks
• 状态 Hooks
• 副作用 Hooks
• 高级 Hooks

适用场景：

• React 应用开发
• 数据请求处理
• UI 交互增强

基础示例：

import { useRequest, useToggle, useUpdateEffect } from 'ahooks';

function UserList() {
  // 数据请求
  const { data, loading, error } = useRequest('/api/users');

  // 状态切换
const [state, { toggle }] = useToggle();

  // 更新副作用
  useUpdateEffect(() => {
    console.log('State updated:', state);
  }, [state]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <button onClick={toggle}>Toggle: {String(state)}</button>

      <ul>
        {data?.map(user => (
          <li key={user.id}>{user.name}</li>

        ))}
      </ul>

    </div>

  );
}

注意事项：

• 合理使用缓存策略
• 处理请求错误状态

二、UI 与交互

2.1 数据可视化

ECharts

功能丰富的开源可视化图表库。

安装：

npm install echarts

主要功能：

• 丰富的图表类型
• 响应式设计
• 大数据渲染
• 主题定制
• 动态数据更新

适用场景：

• 数据报表展示
• 实时数据可视化
• 交互式数据分析

基础示例：

import * as echarts from 'echarts';

function ChartComponent() {
  useEffect(() => {
    const chart = echarts.init(document.getElementById('chart'));
    
    const option = {
      title: {
        text: '销售数据'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    
    chart.setOption(option);
    
    return () => chart.dispose();
  }, []);

  return <div id="chart" style={{ width: '600px', height: '400px' }} />;
}

注意事项：

• 注意图表实例的销毁
• 控制数据量级和更新频率

D3.js

强大的数据驱动文档库。

安装：

npm install d3

主要功能：

• 自定义可视化
• DOM 操作
• 数据处理
• 动画过渡
• 事件处理

适用场景：

• 复杂数据可视化
• 自定义图表
• 交互式数据展示

基础示例：

import * as d3 from 'd3';

function BarChart() {
  useEffect(() => {
    const data = [4, 8, 15, 16, 23, 42];
    
    const svg = d3.select('#chart')
      .append('svg')
      .attr('width', 420)
      .attr('height', 300);
    
    svg.selectAll('rect')
      .data(data)
      .join('rect')
      .attr('x', (d, i) => i * 60)
      .attr('y', d => 300 - d * 5)
      .attr('width', 50)
      .attr('height', d => d * 5)
      .attr('fill', 'steelblue');
      
    return () => {
      svg.remove();
    };
  }, []);

  return <div id="chart" />;
}

注意事项：

• 理解声明式和命令式编程的区别
• 注意性能优化和内存管理

Recharts

基于 React 的声明式图表库。

安装：

npm install recharts

主要功能：

• React 组件化
• 响应式设计
• 自定义组件
• 动画支持
• 主题定制

适用场景：

• React 项目图表需求
• 快速开发图表
• 简单数据可视化

基础示例：

import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from 'recharts';

function Chart() {
  const data = [
    { name: 'Jan', value: 400 },
    { name: 'Feb', value: 300 },
    { name: 'Mar', value: 600 },
    { name: 'Apr', value: 800 }
  ];

  return (
    <LineChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line
        type="monotone"
        dataKey="value"
        stroke="#8884d8"
        activeDot={{ r: 8 }}
      />
    </LineChart>

  );
}

注意事项：

• 合理控制数据量
• 注意组件的重渲染优化

2.2 动画与 3D

Three.js

功能强大的 3D 图形库。

安装：

npm install three

主要功能：

• 3D 场景渲染
• 材质与光照
• 相机控制
• 模型加载
• 动画系统

适用场景：

• 3D 可视化
• 游戏开发
• 交互式展示

基础示例：

import * as THREE from 'three';

function ThreeScene() {
  useEffect(() => {
    // 创建场景
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('scene').appendChild(renderer.domElement);
    
    // 创建立方体
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    
    camera.position.z = 5;
    
    // 动画循环
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    
    animate();
    
    return () => {
      document.getElementById('scene').removeChild(renderer.domElement);
    };
  }, []);

  return <div id="scene" />;
}

注意事项：

• 注意资源的释放和清理
• 控制动画性能消耗

GSAP

专业的动画库。

安装：

npm install gsap

主要功能：

• 高性能动画
• 时间轴控制
• 复杂动画序列
• SVG 动画
• 滚动触发

适用场景：

• 网页动画效果
• 交互反馈
• 页面转场

基础示例：

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

function AnimatedComponent() {
  useEffect(() => {
    // 基础动画
    gsap.to('.box', {
      x: 100,
      rotation: 360,
      duration: 2,
      ease: 'power2.out'
    });

    // 滚动触发动画
    gsap.from('.scroll-item', {
      scrollTrigger: {
        trigger: '.scroll-item',
        start: 'top center',
        end: 'bottom center',
        scrub: true
      },
      y: 100,
      opacity: 0
    });

    return () => {
      ScrollTrigger.getAll().forEach(trigger => trigger.kill());
    };
  }, []);

  return (
    <>
      <div className="box">Animated Box</div>

      <div className="scroll-item">Scroll Animated Item</div>

    </>
  );
}

注意事项：

• 及时清理动画实例
• 优化动画性能

Framer Motion

React 的动画库。

安装：

npm install framer-motion

主要功能：

• 声明式动画
• 手势支持
• 布局动画
• 动画变体
• 无障碍支持

适用场景：

• React 应用动画
• 交互设计
• 组件转场

基础示例：

import { motion, AnimatePresence } from 'framer-motion';

function AnimatedList() {
  const [items, setItems] = useState([0, 1, 2]);

  return (
    <div>
      <AnimatePresence>
        {items.map(item => (
<motion.div
            key={item}
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -50 }}
            transition={{ duration: 0.5 }}
          >
            Item {item}
          </motion.div>

        ))}
      </AnimatePresence>

      
      <motion.button
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9 }}
        onClick={() => setItems([...items, items.length])}
      >
        Add Item
      </motion.button>

    </div>

  );
}

注意事项：

• 避免过度使用动画
• 注意动画的性能开销

2.3 富文本与编辑器

TinyMCE

专业的富文本编辑器。

安装：

npm install @tinymce/tinymce-react

主要功能：

• 富文本编辑
• 插件系统
• 图片上传
• 主题定制
• 国际化支持

适用场景：

• 内容管理系统
• 博客编辑器
• 邮件编辑器

基础示例：

import { Editor } from '@tinymce/tinymce-react';

function MyEditor() {
  const handleEditorChange = (content, editor) => {
    console.log('Content:', content);
  };

  return (
    <Editor
      apiKey="your-api-key"
      init={{
        height: 500,
        menubar: true,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'undo redo | formatselect | bold italic | \
          alignleft aligncenter alignright | \
          bullist numlist outdent indent | help'
      }}
      onEditorChange={handleEditorChange}
    />
  );
}

注意事项：

• 注意 API Key 的安全性
• 控制上传文件的大小和类型

Monaco Editor

VS Code 的编辑器核心。

安装：

npm install @monaco-editor/react

主要功能：

• 代码高亮
• 智能提示
• 多语言支持
• 主题切换
• 代码格式化

适用场景：

• 在线代码编辑器
• 配置文件编辑
• 代码展示

基础示例：

import Editor from '@monaco-editor/react';

function CodeEditor() {
  const handleEditorChange = (value, event) => {
    console.log('Code changed:', value);
  };

  return (
    <Editor
      height="500px"
      defaultLanguage="javascript"
      defaultValue="// 在这里输入代码"
      theme="vs-dark"
      onChange={handleEditorChange}
      options={{
        minimap: { enabled: false },
        fontSize: 14,
        lineNumbers: 'on',
        folding: true,
        automaticLayout: true
      }}
    />
  );
}

注意事项：

• 注意编辑器实例的内存管理
• 合理配置编辑器功能

Draft.js

React 的富文本编辑框架。

安装：

npm install draft-js

主要功能：

• 可定制的编辑器
• 实体系统
• 块级渲染
• 撤销重做
• 快捷键支持

适用场景：

• 自定义编辑器
• 社交媒体输入
• 评论系统

基础示例：

import { Editor, EditorState, RichUtils } from 'draft-js';
import 'draft-js/dist/Draft.css';

function MyEditor() {
  const [editorState, setEditorState] = useState(
    EditorState.createEmpty()
  );

  const handleKeyCommand = (command, editorState) => {
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (newState) {
      setEditorState(newState);
      return 'handled';
    }
    return 'not-handled';
  };

  const onBoldClick = () => {
    setEditorState(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
  };

  return (
    <div>
      <button onClick={onBoldClick}>Bold</button>

      <div className="editor">
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          handleKeyCommand={handleKeyCommand}
        />
</div>

    </div>

  );
}

注意事项：

• 理解 ContentState 和 EditorState
• 注意自定义功能的性能影响

2.4 媒体处理

QRCode

二维码生成库。

安装：

npm install qrcode

主要功能：

• 生成二维码
• 自定义样式
• 错误纠正
• 多种输出格式
• Canvas 渲染

适用场景：

• 二维码生成
• 移动端分享
• 支付场景

基础示例：

import QRCode from 'qrcode';

// Canvas 渲染
async function generateQR() {
  try {
    const canvas = document.getElementById('qr-canvas');
    await QRCode.toCanvas(canvas, 'https://example.com', {
      width: 200,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#ffffff'
      }
    });
  } catch (err) {
    console.error(err);
  }
}

// 生成 Data URL
const dataUrl = await QRCode.toDataURL('https://example.com');
const img = `<img src="${dataUrl}" />`;

// 生成 SVG
const svg = await QRCode.toString('https://example.com', {
  type: 'svg'
});

注意事项：

• 注意容错级别设置
• 考虑样式兼容性

三、工程化与质量

前端工程化流程

工程化是现代前端开发的重要组成部分，通过自动化工具和流程规范，确保代码质量和开发效率。上图展示了完整的前端工程化流程，从开发阶段到监控阶段的闭环管理。

3.1 构建工具

Vite

下一代前端构建工具。

安装：

npm create vite@latest

主要功能：

• 快速的开发服务器
• 按需编译
• 开箱即用的 TypeScript 支持
• 插件系统
• 生产环境优化

适用场景：

• 现代前端项目构建
• 快速开发原型
• 库的开发与构建

基础示例：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  },
  build: {
    outDir: 'dist',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom']
        }
      }
    }
  }
});

注意事项：

• 合理配置构建优化选项
• 注意开发环境和生产环境的区别

Rollup

专业的 JavaScript 模块打包器。

安装：

npm install rollup --save-dev

主要功能：

• Tree-shaking
• 代码分割
• 多格式输出
• 插件生态
• 配置灵活

适用场景：

• 库的打包
• SDK 开发
• 工具集打包

基础示例：

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/bundle.cjs.js',
      format: 'cjs'
    },
    {
      file: 'dist/bundle.esm.js',
      format: 'es'
    }
  ],
  plugins: [
    resolve(),
    commonjs(),
    typescript(),
    terser()
  ],
  external: ['react', 'react-dom']
};

注意事项：

• 合理配置外部依赖
• 注意打包体积优化

SWC

高性能的 JavaScript/TypeScript 编译器。

安装：

npm install @swc/core @swc/cli --save-dev

主要功能：

• 快速编译
• TypeScript 支持
• JSX 转换
• 代码压缩
• Source Map 生成

适用场景：

• 大型项目编译
• CI/CD 流程
• 开发环境编译

基础示例：

// .swcrc
{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true
    },
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    },
    "target": "es2015"
  },
  "minify": true,
  "sourceMaps": true
}

// 使用 API
import swc from '@swc/core';

async function compile(code) {
  const result = await swc.transform(code, {
    sourceMaps: true,
    jsc: {
      parser: {
        syntax: "typescript"
      },
      target: "es2015"
    }
  });
  
  return result.code;
}

注意事项：

• 配置合适的编译目标
• 注意与其他工具的集成

3.2 代码质量

ESLint

JavaScript 代码检查工具。

安装：

npm install eslint --save-dev

主要功能：

• 代码规范检查
• 自动修复
• 插件系统
• 自定义规则
• TypeScript 支持

适用场景：

• 代码质量控制
• 团队规范统一
• CI/CD 集成

基础示例：

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react',
    '@typescript-eslint'
  ],
  rules: {
    'no-console': 'warn',
    'react/prop-types': 'off'
  },
  settings: {
    react: {
      version: 'detect'
    }
  }
};

注意事项：

• 合理配置规则级别
• 与编辑器集成使用

Prettier

代码格式化工具。

安装：

npm install prettier --save-dev

主要功能：

• 统一代码风格
• 多语言支持
• 编辑器集成
• 自动格式化
• 配置简单

适用场景：

• 代码风格统一
• 团队协作
• 自动化格式化

基础示例：

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

// 与 ESLint 集成
// .eslintrc.js
module.exports = {
  extends: [
    'prettier',
    'plugin:prettier/recommended'
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
};

注意事项：

• 与 ESLint 规则协调
• 保持配置的一致性

Husky

Git Hooks 工具。

安装：

npm install husky --save-dev

主要功能：

• Git Hooks 管理
• 提交前检查
• 自动化任务
• 团队规范执行
• 简单配置

适用场景：

• 代码提交规范
• 自动化检查
• CI/CD 流程

基础示例：

// package.json
{
  "scripts": {
    "prepare": "husky install"
  }
}

// .husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint
npm run test

// .husky/commit-msg
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no -- commitlint --edit $1

注意事项：

• 合理配置钩子脚本
• 注意团队开发体验

3.3 测试工具

Jest

JavaScript 测试框架。

安装：

npm install --save-dev jest @types/jest

主要功能：

• 零配置支持
• 快照测试
• Mock 系统
• 代码覆盖率
• 并行测试运行

适用场景：

• 单元测试
• 组件测试
• 集成测试

基础示例：

// sum.test.js
import { sum, fetchUser } from './utils';

describe('Math utils', () => {
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });

  test('fetches user data', async () => {
    // Mock API 调用
    const mockUser = { id: 1, name: 'John' };
    global.fetch = jest.fn(() =>
      Promise.resolve({
        json: () => Promise.resolve(mockUser)
      })
    );

    const user = await fetchUser(1);
    expect(user).toEqual(mockUser);
    expect(fetch).toHaveBeenCalledWith('/api/users/1');
  });
});

// React 组件测试
import { render, fireEvent } from '@testing-library/react';

test('button click increments counter', () => {
  const { getByText } = render(<Counter />);
  const button = getByText(/count: 0/i);
  
  fireEvent.click(button);
  expect(button).toHaveTextContent(/count: 1/i);
});

注意事项：

• 合理使用 Mock
• 维护测试的可读性

Cypress

现代化的端到端测试框架。

安装：

npm install --save-dev cypress

主要功能：

• 实时重载
• 时间旅行
• 自动等待
• 网络请求控制
• 视频录制

适用场景：

• 端到端测试
• 用户流程测试
• 视觉回归测试

基础示例：

// cypress/integration/login.spec.js
describe('Login Flow', () => {
  beforeEach(() => {
    cy.visit('/login');
  });

  it('should login successfully', () => {
    cy.intercept('POST', '/api/login').as('loginRequest');

    cy.get('[data-test="email"]')
      .type('[email protected]');
    
    cy.get('[data-test="password"]')
      .type('password123');
    
    cy.get('[data-test="submit"]')
      .click();

    cy.wait('@loginRequest')
      .its('response.statusCode')
      .should('eq', 200);

    cy.url().should('include', '/dashboard');
  });

  it('should show error for invalid credentials', () => {
    cy.get('[data-test="email"]')
      .type('[email protected]');
    
    cy.get('[data-test="password"]')
      .type('wrongpassword');
    
    cy.get('[data-test="submit"]')
      .click();

    cy.get('[data-test="error-message"]')
      .should('be.visible')
      .and('contain', 'Invalid credentials');
  });
});

注意事项：

• 设置合适的等待策略
• 管理测试数据状态

Testing Library

React 组件测试工具。

安装：

npm install --save-dev @testing-library/react @testing-library/jest-dom

主要功能：

• 用户行为模拟
• 可访问性测试
• 异步操作支持
• 事件触发
• 查询优化

适用场景：

• React 组件测试
• 交互行为测试
• 可访问性验证

基础示例：

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import UserProfile from './UserProfile';

describe('UserProfile', () => {
  test('renders user information', async () => {
    const mockUser = {
      name: 'John Doe',
      email: '[email protected]'
    };

    render(<UserProfile user={mockUser} />);

    expect(screen.getByText(mockUser.name)).toBeInTheDocument();
    expect(screen.getByText(mockUser.email)).toBeInTheDocument();
  });

  test('handles form submission', async () => {
    const onSubmit = jest.fn();
    render(<UserProfile onSubmit={onSubmit} />);

    fireEvent.change(screen.getByLabelText(/name/i), {
      target: { value: 'New Name' }
    });

    fireEvent.click(screen.getByRole('button', { name: /save/i }));

    await waitFor(() => {
      expect(onSubmit).toHaveBeenCalledWith({
        name: 'New Name'
      });
    });
  });
});

注意事项：

• 遵循最佳实践查询方式
• 注意异步测试处理

Vitest

现代化的单元测试框架。

安装：

npm install -D vitest

主要功能：

• Vite 原生支持
• 兼容 Jest API
• 实时测试反馈
• 快照测试
• TypeScript 支持

适用场景：

• 单元测试
• 组件测试
• Vite 项目测试

基础示例：

import { test, expect, describe } from 'vitest';
import { mount } from '@vue/test-utils';
import Counter from './Counter.vue';

describe('Counter', () => {
  test('renders correctly', () => {
    const wrapper = mount(Counter);
    expect(wrapper.text()).toContain('0');
  });

  test('increments value', async () => {
    const wrapper = mount(Counter);
    await wrapper.find('button').trigger('click');
    expect(wrapper.text()).toContain('1');
  });

  // 快照测试
  test('matches snapshot', () => {
    const wrapper = mount(Counter);
    expect(wrapper.html()).toMatchSnapshot();
  });
});

注意事项：

• 配置测试环境
• 合理组织测试文件

3.4 数据验证

Zod

TypeScript 优先的数据验证库。

安装：

npm install zod

主要功能：

• 类型推导
• 复杂验证规则
• 错误处理
• 数据转换
• Schema 组合

适用场景：

• 表单验证
• API 数据验证
• 配置验证

基础示例：

import { z } from 'zod';

// 定义 Schema
const UserSchema = z.object({
  username: z.string().min(3).max(20),
  email: z.string().email(),
  age: z.number().min(0).max(120).optional(),
  role: z.enum(['admin', 'user']),
  settings: z.object({
    theme: z.enum(['light', 'dark']),
    notifications: z.boolean()
  }).optional()
});

type User = z.infer<typeof UserSchema>;

// 验证数据
function validateUser(data: unknown) {
  try {
    const user = UserSchema.parse(data);
    return { success: true, data: user };
  } catch (error) {
    if (error instanceof z.ZodError) {
      return { success: false, errors: error.errors };
    }
    return { success: false, errors: ['Unknown error'] };
  }
}

注意事项：

• 合理设计验证规则
• 处理验证错误

Validator.js

轻量级的字符串验证库。

安装：

npm install validator

主要功能：

• 字符串验证
• 字符串清理
• 国际化支持
• 自定义验证
• 类型检查

适用场景：

• 表单验证
• 用户输入检查
• 数据格式验证

基础示例：

import validator from 'validator';

// 基础验证
validator.isEmail('[email protected]'); // true
validator.isURL('https://example.com'); // true
validator.isNumeric('123'); // true

// 字符串清理
validator.trim('  hello  '); // 'hello'
validator.escape('<h1>Hello</h1>');

// 自定义验证
validator.matches('abc123', /^[a-z0-9]+$/i); // true

// 国际化验证
validator.isMobilePhone('123456789', 'zh-CN'); // 检查中国手机号

注意事项：

• 注意验证规则的严格程度
• 考虑国际化场景

四、性能与监控

性能监控是保障用户体验的关键环节。通过建立完善的监控体系，可以及时发现和解决性能问题，持续优化应用性能。

4.1 性能优化

Web Vitals

Google 核心性能指标监控库。

安装：

npm install web-vitals

主要功能：

• LCP 监控
• FID 监控
• CLS 监控
• 性能数据上报
• 自定义指标

适用场景：

• 性能指标监控
• 用户体验优化
• 性能问题诊断

基础示例：

import { getCLS, getFID, getLCP } from 'web-vitals';

function sendToAnalytics({ name, delta, id }) {
  // 发送性能数据到分析服务
  const body = JSON.stringify({ name, delta, id });
  navigator.sendBeacon('/analytics', body);
}

// 监控核心指标
getCLS(sendToAnalytics);  // 累积布局偏移
getFID(sendToAnalytics);  // 首次输入延迟
getLCP(sendToAnalytics);  // 最大内容绘制

注意事项：

• 合理设置采样率
• 注意数据上报时机

Lighthouse CI

自动化性能审计工具。

安装：

npm install -g @lhci/cli

主要功能：

• 性能评分
• 最佳实践检查
• SEO 分析
• 可访问性测试
• CI 集成

适用场景：

• 持续性能监控
• 部署前检查
• 性能基准测试

基础示例：

// lighthouserc.js
module.exports = {
  ci: {
    collect: {
      numberOfRuns: 3,
      startServerCommand: 'npm run start',
      url: ['http://localhost:3000']
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.8 }],
        'first-contentful-paint': ['error', { maxNumericValue: 2000 }]
      }
    },
    upload: {
      target: 'temporary-public-storage'
    }
  }
};

// package.json
{
  "scripts": {
    "lhci": "lhci autorun"
  }
}

注意事项：

• 设置合理的性能预算
• 关注关键性能指标

Performance Monitor

性能监控工具。

安装：

npm install perf-monitor

主要功能：

• 实时性能监控
• 内存使用分析
• FPS 监控
• 自定义指标
• 性能报警

适用场景：

• 应用性能监控
• 性能瓶颈分析
• 性能优化验证

基础示例：

import { PerformanceMonitor } from 'perf-monitor';

const monitor = new PerformanceMonitor({
  memory: true,
  fps: true,
  customMetrics: {
    apiLatency: {
      measure: async () => {
        const start = performance.now();
        await fetch('/api/data');
        return performance.now() - start;
      },
      threshold: 500 // 警告阈值
    }
  }
});

monitor.on('warning', ({ metric, value, threshold }) => {
  console.warn(`Performance warning: ${metric} (${value}) exceeded threshold (${threshold})`);
});

monitor.start();

注意事项：

• 避免监控影响性能
• 合理设置监控频率

4.2 监控与调试

Sentry

错误监控和性能追踪平台。

安装：

npm install @sentry/react @sentry/tracing

主要功能：

• 错误捕获
• 性能监控
• 源码映射
• 用户行为追踪
• 实时告警

适用场景：

• 生产环境监控
• 错误追踪定位
• 性能问题诊断

基础示例：

import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";

// 初始化配置
Sentry.init({
  dsn: "your-dsn-here",
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0,
  environment: process.env.NODE_ENV
});

// 错误边界组件
function App() {
  return (
    <Sentry.ErrorBoundary fallback={<ErrorFallback />}>
      <YourApp />
    </Sentry.ErrorBoundary>

  );
}

// 手动捕获错误
try {
  someFunction();
} catch (error) {
  Sentry.captureException(error, {
    extra: {
      action: 'someFunction',
      state: 'failed'
    }
  });
}

// 性能监控
const transaction = Sentry.startTransaction({
  name: 'Processing Data'
});

try {
  await processData();
} finally {
  transaction.finish();
}

注意事项：

• 合理配置采样率
• 保护敏感信息

VConsole

移动端调试工具。

安装：

npm install vconsole

主要功能：

• 日志查看
• 网络请求监控
• 元素查看
• 存储信息
• 系统信息

适用场景：

• 移动端调试
• 远程问题排查
• 测试环境调试

基础示例：

import VConsole from 'vconsole';

// 仅在开发环境启用
if (process.env.NODE_ENV === 'development') {
  const vConsole = new VConsole({
    theme: 'dark',
    onReady: () => {
      console.log('vConsole is ready.');
    }
  });
}

// 使用自定义插件
const myPlugin = new VConsole.VConsolePlugin('my_plugin', {
  onInit: function() {
    console.log('My plugin initialized');
  },
  onRenderTab: function(callback) {
    const html = `
      <div>
        <button class="vc-btn" onclick="myPlugin.onClick()">
          Click me
        </button>

      </div>

    `;
    callback(html);
  }
});

vConsole.addPlugin(myPlugin);

注意事项：

• 生产环境禁用
• 注意性能影响

Chrome DevTools Protocol

Chrome 调试协议客户端。

安装：

npm install chrome-remote-interface

主要功能：

• 远程调试
• 性能分析
• 网络监控
• DOM 操作
• 自动化测试

适用场景：

• 自动化调试
• 性能分析
• 测试工具开发

基础示例：

import CDP from 'chrome-remote-interface';

async function capturePerformanceMetrics() {
  let client;
  try {
    client = await CDP();
    const { Network, Performance } = client;

    // 启用性能监控
    await Performance.enable();
    await Network.enable();

    // 监听性能指标
    Performance.metrics(({ metrics }) => {
      console.log('Performance metrics:', metrics);
    });

    // 监听网络请求
    Network.requestWillBeSent((params) => {
      console.log('Network request:', params.request.url);
    });

    // 等待页面加载
    await client.Page.navigate({ url: 'https://example.com' });
    await client.Page.loadEventFired();

    // 获取性能时间线
    const { profile } = await Performance.getMetrics();
    console.log('Performance timeline:', profile);

  } catch (err) {
    console.error('Error:', err);
  } finally {
    if (client) {
      await client.close();
    }
  }
}

注意事项：

• 谨慎处理敏感信息
• 注意资源释放

Eruda

移动端调试工具。

安装：

npm install eruda

主要功能：

• 控制台日志
• 网络请求监控
• DOM 元素查看
• 本地存储查看
• 性能分析

适用场景：

• 移动端调试
• 远程问题诊断
• 开发环境调试

基础示例：

import eruda from 'eruda';

// 初始化
if (process.env.NODE_ENV === 'development') {
  eruda.init({
    container: document.getElementById('eruda'),
    tool: ['console', 'elements', 'network', 'resources', 'info'],
    useShadowDom: true,
    autoScale: true
  });

  // 添加自定义面板
  eruda.add({
    name: 'custom',
    init: function($el) {
      $el.html('自定义调试面板');
    }
  });

  // 使用控制台
  eruda.get('console').log('Debug message');
  eruda.get('console').error('Error message');

  // 性能分析
  eruda.get('timing').addCustomTiming('api', 'API Request');
}

注意事项：

• 仅在开发环境启用
• 注意性能影响

五、数据存储

5.1 本地存储

LocalForage

IndexedDB 的封装库。

安装：

npm install localforage

主要功能：

• 异步存储
• 多种存储引擎
• 大数据支持
• 类 localStorage API
• 自动类型转换

适用场景：

• 本地数据缓存
• 离线数据存储
• 大数据存储

基础示例：

import localforage from 'localforage';

// 配置
localforage.config({
  name: 'MyApp',
  storeName: 'mystore',
  driver: [
    localforage.INDEXEDDB,
    localforage.WEBSQL,
    localforage.LOCALSTORAGE
  ]
});

// 基本操作
async function handleStorage() {
  try {
    // 存储数据
    await localforage.setItem('user', {
      id: 1,
      name: 'John',
      preferences: { theme: 'dark' }
    });

    // 获取数据
    const user = await localforage.getItem('user');
    console.log('User:', user);

    // 删除数据
    await localforage.removeItem('user');

    // 清空存储
    await localforage.clear();

    // 获取所有键
    const keys = await localforage.keys();
    console.log('All keys:', keys);

  } catch (error) {
    console.error('Storage error:', error);
  }
}

5.2 Cookie 处理

js-cookie

简单、轻量的 Cookie 操作库。

安装：

npm install js-cookie

主要功能：

• Cookie 读写
• 过期时间设置
• 域名控制
• 安全标记
• JSON 支持

适用场景：

• Cookie 管理
• 用户偏好存储
• 会话控制

基础示例：

import Cookies from 'js-cookie';

// 设置 Cookie
Cookies.set('name', 'value', { expires: 7 });
Cookies.set('user', { name: 'John' }, { secure: true });

// 读取 Cookie
const value = Cookies.get('name');
const user = Cookies.get('user');

// 删除 Cookie
Cookies.remove('name');

// 设置带域名的 Cookie
Cookies.set('name', 'value', { domain: '.example.com' });

// 获取所有 Cookie
const allCookies = Cookies.get();

注意事项：

• 注意安全设置
• 遵循数据隐私规范

注意事项：

• 处理存储限制
• 注意数据序列化

5.3 数据库

PouchDB

浏览器端的 NoSQL 数据库。

安装：

npm install pouchdb

主要功能：

• 离线存储
• 数据同步
• 文档型数据库
• 实时更新
• 附件支持

适用场景：

• 离线应用
• 数据同步
• 本地缓存

基础示例：

import PouchDB from 'pouchdb';

// 创建/连接数据库
const db = new PouchDB('mydb');
const remoteDb = new PouchDB('http://localhost:5984/mydb');

async function handleDatabase() {
  try {
    // 添加文档
    const response = await db.put({
      _id: 'user_1',
      name: 'John',
      age: 30,
      createdAt: new Date().toISOString()
    });

    // 获取文档
    const doc = await db.get('user_1');
    console.log(doc);

    // 更新文档
    const updatedDoc = await db.put({
      _id: doc._id,
      _rev: doc._rev,
      name: 'John Doe',
      age: 31
    });

    // 同步
    const sync = db.sync(remoteDb, {
      live: true,
      retry: true
    });

    sync.on('change', function (info) {
      console.log('同步变更:', info);
    });

  } catch (err) {
    console.error('数据库操作错误:', err);
  }
}

注意事项：

• 注意数据同步冲突
• 控制存储大小

Dexie

IndexedDB 的包装库。

安装：

npm install dexie

主要功能：

• 简化 IndexedDB
• 事务支持
• 索引查询
• 类型安全
• 观察者模式

适用场景：

• 复杂数据存储
• 高性能查询
• 结构化数据

基础示例：

import Dexie from 'dexie';

// 定义数据库
class MyDatabase extends Dexie {
  constructor() {
    super('MyDatabase');
    this.version(1).stores({
      users: '++id, name, email, age',
      posts: '++id, userId, title, content, *tags'
    });
  }
}

const db = new MyDatabase();

async function handleDatabase() {
  try {
    // 添加用户
    const userId = await db.users.add({
      name: 'John',
      email: '[email protected]',
      age: 30
    });

    // 添加文章
    await db.posts.add({
      userId,
      title: 'My First Post',
      content: 'Hello World',
      tags: ['blog', 'intro']
    });

    // 查询数据
    const userPosts = await db.posts
      .where('userId').equals(userId)
      .toArray();

    // 使用索引
    const youngUsers = await db.users
      .where('age').below(25)
      .toArray();

    // 事务
    await db.transaction('rw', [db.users, db.posts], async () => {
      const user = await db.users.get(userId);
      await db.posts.where('userId').equals(userId).modify(post => {
        post.authorName = user.name;
      });
    });

  } catch (error) {
    console.error('Database error:', error);
  }
}

注意事项：

• 合理设计数据结构
• 注意事务的使用

六、功能增强

6.1 国际化

i18next

完整的国际化解决方案。

安装：

npm install i18next react-i18next

主要功能：

• 多语言支持
• 命名空间管理
• 复数处理
• 格式化
• 动态加载

适用场景：

• 多语言应用
• 区域化适配
• 文案管理

基础示例：

import i18n from 'i18next';
import { initReactI18next, useTranslation } from 'react-i18next';

// 初始化配置
i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: {
          welcome: 'Welcome {{name}}',
          items: '{{count}} item',
          items_plural: '{{count}} items'
        }
      },
      zh: {
        translation: {
          welcome: '欢迎 {{name}}',
          items: '{{count}} 个项目'
        }
      }
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

// 使用组件
function App() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <select onChange={(e) => i18n.changeLanguage(e.target.value)}>
        <option value="en">English</option>

        <option value="zh">中文</option>

      </select>

      <h1>{t('welcome', { name: 'John' })}</h1>

      <p>{t('items', { count: 2 })}</p>

    </div>

  );
}

注意事项：

• 合理组织翻译文件
• 注意动态加载性能

6.2 表单处理

React Hook Form

高性能表单处理库。

安装：

npm install react-hook-form

主要功能：

• 表单验证
• 性能优化
• 错误处理
• 表单状态管理
• TypeScript 支持

适用场景：

• 复杂表单处理
• 表单验证
• 动态表单

基础示例：

import { useForm } from 'react-hook-form';

function SignupForm() {
  const { 
    register, 
    handleSubmit, 
    formState: { errors },
    watch
  } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('email', {
          required: 'Email is required',
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: 'Invalid email address'
          }
        })}
      />
      {errors.email && <p>{errors.email.message}</p>}

      <input
        type="password"
        {...register('password', {
          required: 'Password is required',
          minLength: {
            value: 8,
            message: 'Password must be at least 8 characters'
          }
        })}
      />
      {errors.password && <p>{errors.password.message}</p>}

      <button type="submit">Submit</button>

    </form>

  );
}

注意事项：

• 避免不必要的重渲染
• 合理使用表单验证

6.3 数据校验

Zod

从之前的章节移动 Zod 的内容

Validator.js

从之前的章节移动 Validator.js 的内容

6.4 文件处理

FileSaver.js

文件保存工具库。

安装：

npm install file-saver

主要功能：

• 文件下载
• Blob 处理
• 跨浏览器支持
• 大文件处理
• 自定义文件名

适用场景：

• 文件下载
• 数据导出
• Canvas 保存

基础示例：

import { saveAs } from 'file-saver';

// 保存文本文件
const blob = new Blob(['Hello, World!'], { type: 'text/plain;charset=utf-8' });
saveAs(blob, 'hello.txt');

// 保存 Canvas
const canvas = document.getElementById('myCanvas');
canvas.toBlob(function(blob) {
  saveAs(blob, 'myCanvas.png');
});

// 下载远程文件
fetch('https://example.com/file.pdf')
  .then(response => response.blob())
  .then(blob => saveAs(blob, 'downloaded.pdf'));

注意事项：

• 处理大文件时注意内存
• 考虑浏览器兼容性

Uppy

现代化文件上传库。

安装：

npm install @uppy/core @uppy/dashboard @uppy/xhr-upload

主要功能：

• 拖拽上传
• 进度显示
• 图片预览
• 多文件上传
• 上传恢复

适用场景：

• 文件上传
• 图片上传
• 多文件管理

基础示例：

import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import XHRUpload from '@uppy/xhr-upload';

const uppy = new Uppy()
  .use(Dashboard, {
    inline: true,
    target: '#drag-drop-area',
    height: 470,
    width: '100%'
  })
  .use(XHRUpload, {
    endpoint: 'https://api.example.com/upload',
    formData: true,
    fieldName: 'file'
  });

uppy.on('upload-success', (file, response) => {
  console.log('Upload successful:', file.name);
  console.log('Server response:', response);
});

uppy.on('upload-error', (file, error, response) => {
  console.error('Upload error:', error);
});

// 添加文件限制
uppy.setOptions({
  restrictions: {
    maxFileSize: 1000000,
    maxNumberOfFiles: 3,
    allowedFileTypes: ['image/*', '.pdf']
  }
});

注意事项：

• 设置适当的文件限制
• 处理上传错误情况

总结与最佳实践

工具选择建议

1. 核心开发工具

• 数据处理：小型项目选 Lodash，函数式编程场景选 Ramda
• 状态管理：大型项目选 Redux Toolkit，中小型项目选 Zustand
• 路由与请求：React Router + Axios 是标准搭配

2. UI 与交互

• 数据可视化：通用场景选 ECharts，React 项目推荐 Recharts
• 动画效果：复杂动画用 GSAP，React 项目推荐 Framer Motion
• 编辑器：通用富文本选 TinyMCE，代码编辑选 Monaco Editor

3. 工程化与质量

• 构建工具：开发体验选 Vite，库开发选 Rollup
• 代码质量：ESLint + Prettier + Husky 是标配
• 测试工具：单元测试用 Jest，E2E 测试用 Cypress

4. 性能与监控

• 性能监控：Web Vitals 用于核心指标监控
• 错误监控：生产环境推荐使用 Sentry
• 调试工具：移动端调试首选 VConsole

5. 功能增强

• 国际化：i18next 是最完整的解决方案
• 文件处理：上传用 Uppy，下载用 FileSaver.js
• 数据存储：本地存储推荐 localforage，复杂查询用 Dexie

最佳实践建议

1. 性能优化

• 按需加载：使用 ES 模块导入，避免全量引入
• 代码分割：合理使用动态导入和路由懒加载
• 缓存策略：合理使用浏览器缓存和本地存储

2. 工程规范

• 版本控制：锁定依赖版本，使用 package-lock.json
• 代码风格：统一团队代码规范和提交规范
• 构建优化：合理配置构建工具，优化构建性能

3. 开发效率

• 工具集成：配置编辑器插件，提升开发体验
• 调试技巧：熟练使用 DevTools 和调试工具
• 文档维护：及时更新文档，做好版本记录

4. 项目维护

• 依赖管理：定期更新依赖，处理安全漏洞
• 代码重构：保持代码整洁，适时重构
• 性能监控：建立性能监控体系，及时发现问题

参考资源

1. 官方文档

• React 官方文档
• TypeScript 官方文档
• Webpack 官方文档

2. 学习资源

• MDN Web Docs
• Web.dev
• JavaScript Info

3. 工具集合

• Awesome React
• Awesome JavaScript
• Awesome Node.js

🐠 往期水文

JSCommon系列 - 为什么前端没有 Apache Commons?

---

项目地址： github.com/wolforest/j...

感谢阅读到最后，期待你的 github 🌟 鼓励!