AOP通过切面拦截器在不修改原函数的情况下增强行为，利用高阶函数实现before、after、around通知，适用于日志、权限、缓存等场景。
在JavaScript开发中，AOP（面向切面编程）是一种增强函数行为而不修改其内部逻辑的编程范式。它常用于日志记录、权限校验、性能监控、异常捕获等横切关注点的处理。通过切面拦截器设计模式，可以在目标函数执行前后插入额外逻辑，实现解耦和复用。
什么是AOP与切面拦截器
AOP的核心思想是将分散在系统各处的公共逻辑（如日志、监控）抽取出来，集中管理，并通过“织入”机制附加到目标方法上。JavaScript由于其动态性和函数式特性，非常适合实现轻量级AOP。
切面拦截器本质上是对原函数的包装，在不侵入原函数的前提下，控制其执行流程。常见方式包括：前置通知（before）、后置通知（after）、环绕通知（around）等。
基于高阶函数的拦截器实现
利用JavaScript的闭包和函数作为一等公民的特性，可以通过高阶函数轻松实现AOP拦截。
立即学习“Java免费学习笔记（深入）”；
- Before 拦截：在目标函数执行前运行额外逻辑，比如参数校验
- After 拦截：在目标函数执行后执行，可用于日志记录或结果处理
- Around 拦截：完全包裹原函数，可决定是否执行、修改参数或返回值
示例代码：
function createInterceptor(fn) {
const aspects = {
before: [],
after: [],
around: null
};
return {
before(callback) {
aspects.before.push(callback);
return this;
},
after(callback) {
aspects.after.push(callback);
return this;
},
around(callback) {
aspects.around = callback;
return this;
},
execute(...args) {
let finalArgs = [...args];
let result;
// 执行 before 钩子
aspects.before.forEach(hook => {
const hookResult = hook(...finalArgs);
if (hookResult !== undefined) finalArgs = Array.isArray(hookResult) ? hookResult : finalArgs;
});
// 执行 around 包裹
if (aspects.around) {
result = aspects.around(() => fn.apply(this, finalArgs), finalArgs);
} else {
result = fn.apply(this, finalArgs);
}
// 执行 after 钩子
aspects.after.forEach(hook => {
const hookResult = hook(result, finalArgs);
if (hookResult !== undefined) result = hookResult;
});
return result;
}
};
}
// 使用示例
const serviceCall = function(userId) {
console.log(`Fetching data for user ${userId}`);
return { id: userId, name: 'John' };
};
const intercepted = createInterceptor(serviceCall)
.before((id) => {
console.log(`[LOG] Accessing user: ${id}`);
if (!id) throw new Error('User ID is required');
})
.after((result) => {
console.log(`[LOG] Fetched user: ${result.name}`);
return result;
})
.execute(123);
实际应用场景
AOP拦截器适用于多种工程场景，提升代码可维护性。
- 接口请求拦截：统一添加token、重试机制、错误上报
- 表单提交验证：在提交前自动校验字段，阻止非法请求
- 埋点监控：无侵入地统计函数调用次数、响应时间
- 缓存策略：对耗时计算函数增加缓存层，命中则跳过执行
例如为API方法添加自动重试：
function withRetry(fn, maxRetries = 3) {
return function(...args) {
let lastError;
for (let i = 0; i <= maxRetries; i++) {
try {
return fn.apply(this, args);
} catch (err) {
lastError = err;
if (i < maxRetries) console.log(`Retry attempt ${i + 1}`);
}
}
throw lastError;
};
}
基本上就这些。通过合理设计拦截器结构，可以让核心逻辑更专注，通用功能更易维护。虽然JavaScript没有原生AOP语法支持，但凭借其灵活性，完全可以实现简洁高效的切面控制。关键在于保持拦截逻辑清晰、避免过度包装导致调试困难。
