JavaScript 工具函数 #

什么是工具函数？ #

工具函数（Utility Functions）是开发过程中频繁使用的、可复用的代码片段。它们封装了常见的操作逻辑，帮助开发者快速完成特定任务，提高代码的可维护性和开发效率。

核心定位 #

text 
┌─────────────────────────────────────────────────────────────┐
│                    JavaScript 工具函数                        │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  URL 处理    │  │  Cookie     │  │  日期时间    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  本地存储    │  │  文件处理    │  │  加密哈希    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

为什么需要工具函数？ #

开发中的常见痛点 #

text 
日常开发问题：

1. 重复代码
   相同功能多处实现
   代码冗余难维护

2. 兼容性问题
   不同浏览器差异
   需要兼容处理

3. 细节处理
   边界条件易忽略
   异常处理不完善

4. 效率低下
   重复造轮子
   开发周期长

工具函数的解决方案 #

text 
工具函数优势：

✅ 复用性：一次编写，多处使用
✅ 可靠性：经过测试验证，稳定可靠
✅ 可维护：集中管理，易于更新
✅ 高效率：开箱即用，快速开发

工具函数分类 #

1. URL 处理 #

javascript 
import { getQueryString, getQueryParam, addQueryParam } from './utils';

const id = getQueryString('id');
const params = getQueryParam(window.location.href);
const newUrl = addQueryParam(url, { page: 2 });
javascript 
import { getCookie, setCookie, deleteCookie } from './utils/cookie';

setCookie('token', 'abc123', 7);
const token = getCookie('token');
deleteCookie('token');

3. 日期时间 #

javascript 
import { formater, getTimeSpan, getTimeInfo } from './utils/date';

const formatted = formater(Date.now(), 'yyyy-MM-dd HH:mm:ss');
const days = getTimeSpan(date1, date2, 'd');

4. 本地存储 #

javascript 
import store from './utils/store';

store.set('user', { name: 'John' }, Date.now() + 86400000);
const user = store.get('user');
store.remove('user');

5. 文件处理 #

javascript 
import { formatFileSize, downloadFile, getImageBase64 } from './utils';

const size = formatFileSize(1024 * 1024);
downloadFile('https://example.com/file.pdf', 'document.pdf');

6. 颜色转换 #

javascript 
import { rgb2hex, hex2rgb } from './utils';

const hex = rgb2hex([255, 128, 0]);
const rgb = hex2rgb('#ff8000');

7. 主题管理 #

javascript 
import { getTheme, setTheme, toggleTheme, initTheme } from './utils/theme';

initTheme();
toggleTheme();

8. 加密哈希 #

javascript 
import md5 from './utils/md5';
import md6 from './utils/md6';

const hash1 = md5('hello world');
const hash2 = md6.hash256('hello world');

文档结构 #

本指南按以下结构组织，循序渐进地帮助你掌握 JavaScript 工具函数：

1. 入门基础 #

主题 描述 文档链接
简介与概述 工具函数的定义、特点与应用场景 intro.md
基础使用 环境搭建、引入方式、基本配置 basics.md

2. 核心功能 #

主题 描述 文档链接
URL 参数处理 解析、构建、操作 URL 参数 url.md
Cookie 操作 Cookie 的增删改查与安全设置 cookie.md
日期时间处理 日期格式化、时间计算、时区处理 date.md
本地存储 localStorage 封装与过期机制 storage.md

3. 进阶功能 #

主题 描述 文档链接
文件处理 文件大小格式化、下载、Base64 转换 file.md
颜色转换 RGB 与 HEX 颜色格式互转 color.md
主题管理 深色/浅色主题切换与持久化 theme.md

4. 高级扩展 #

主题 描述 文档链接
加密哈希 MD5、MD6 哈希算法实现 crypto.md
高级用法 深拷贝、深合并、最佳实践 advanced.md

学习路径 #

入门阶段（新手） #

  1. 了解工具函数的基本概念
  2. 掌握模块引入方式
  3. 学习 URL 参数处理
  4. 理解 Cookie 基本操作
  5. 完成日期时间格式化

进阶阶段（熟练） #

  1. 掌握本地存储与过期机制
  2. 学习文件处理与 Base64 转换
  3. 理解颜色转换原理
  4. 实现主题切换功能
  5. 处理复杂业务场景

高级阶段（专家） #

  1. 掌握加密哈希算法
  2. 实现深拷贝与深合并
  3. 性能优化与最佳实践
  4. 自定义工具函数开发
  5. 构建个人工具函数库

快速开始 #

安装引入 #

javascript 
import {
    getQueryString,
    getCookie,
    setCookie,
    formater,
    formatFileSize,
    deepCopy
} from './utils';

基本示例 #

javascript 
const id = getQueryString('id');
const token = getCookie('token');
const date = formater(Date.now(), 'yyyy-MM-dd HH:mm:ss');
const size = formatFileSize(1024 * 1024);
const copy = deepCopy(originalObject);

工具函数 vs 第三方库 #

特性 自定义工具函数 Lodash Underscore
体积 极小 较大 中等
定制性 极高 中等 中等
学习成本 低 中等 低
功能丰富度 按需 丰富 丰富
适用场景 轻量项目 大型项目 中型项目

最佳实践 #

1. 按需引入 #

javascript 
import { getQueryString } from './utils';

2. 错误处理 #

javascript 
const safeGetCookie = (name) => {
    try {
        return getCookie(name);
    } catch (e) {
        console.error('Cookie 读取失败:', e);
        return null;
    }
};

3. 类型检查 #

javascript 
const formatDate = (date) => {
    if (!date) return '';
    return formater(date, 'yyyy-MM-dd');
};

资源推荐 #

更新日志 #

  • 2026-04-04：创建初始版本，包含完整的工具函数学习大纲

继续探索本指南，逐步掌握 JavaScript 工具函数，从新手成长为高效开发者！

最后更新：2026-04-04