函数是JavaScript中实现代码复用的核心，通过函数声明、表达式或箭头函数封装通用逻辑，可在多场景调用；利用模块化（如ES Modules）可跨文件共享工具函数；高阶函数通过参数化行为提升灵活性，结合清晰命名和合理设计，确保函数高效复用。
在JavaScript开发中，函数是实现代码复用的核心手段。通过合理定义函数，可以避免重复编写相同逻辑，提升代码可读性和维护性。函数代码复用的关键在于将通用逻辑封装成独立、可调用的单元，并在多个场景中重复使用。
函数定义与基本复用方式
定义一个函数最常见的方式是使用函数声明或函数表达式：
// 函数声明
function add(a, b) {
return a + b;
}
<p>// 函数表达式
const multiply = function(a, b) {
return a * b;
};</p><p>// 箭头函数（ES6）
const greet = (name) => <code>Hello, ${name}!</code>;</p>一旦函数被定义，就可以在不同地方多次调用，实现基础的代码复用。例如，add() 可用于计算价格总和、表单验证等场景。
提取通用逻辑提升复用性
为了增强复用能力，应将频繁使用的操作抽象为通用函数。比如数据校验、格式化、请求处理等。
- 封装一个通用的输入验证函数：
function validateInput(value, type) {
if (type === 'email') {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(value);
}
if (type === 'phone') {
const phoneRegex = /^\d{11}$/;
return phoneRegex.test(value);
}
return false;
}
这个函数可以在注册、登录、信息修改等多个页面复用，减少重复代码。
模块化开发实现高级复用
随着项目变大，仅靠函数封装不够。使用模块化机制（如ES Modules）能更好地组织和复用代码。
- 将常用工具函数拆分为独立模块：
// utils.js
export const formatTime = (date) => {
return date.toLocaleString();
};
<p>export const fetchData = async (url) => {
const res = await fetch(url);
return res.json();
};</p>在其他文件中按需导入：
// main.js
import { formatTime, fetchData } from './utils.js';
<p>console.log(formatTime(new Date()));
fetchData('/api/data').then(data => console.log(data));</p>模块化让函数不仅能在当前文件复用，还能跨文件、跨项目共享。
高阶函数增强灵活性
JavaScript支持函数作为参数或返回值，利用高阶函数可以创建更灵活的复用模式。
- 例如，创建一个生成特定类型提示消息的函数：
function createNotifier(type) {
return (message) => {
console[type](`${type.toUpperCase()}: ${message}`);
};
}
<p>const error = createNotifier('error');
const log = createNotifier('log');</p><p>error('网络连接失败'); // ERROR: 网络连接失败
log('用户已登录'); // LOG: 用户已登录</p>这种模式适用于日志系统、事件处理器等需要动态生成行为的场景。
基本上就这些。通过合理定义函数、提取公共逻辑、使用模块化和高阶函数，JavaScript中的代码复用变得高效且易于维护。不复杂但容易忽略的是：命名清晰、参数设计合理、避免副作用，这些细节决定了函数能否真正被长期复用。
