JavaScriptAOP编程_切面与拦截器设计模式-js教程-PHP中文网

JavaScriptAOP编程_切面与拦截器设计模式

幻影之瞳

发布： 2025-11-21 22:28:02

原创

571人浏览过

AOP通过不修改原函数实现功能增强，利用高阶函数或Proxy拦截执行过程，适用于日志、校验等场景，提升代码可维护性。

javascriptaop编程_切面与拦截器设计模式

JavaScript中的AOP（面向切面编程）并不是语言原生支持的特性，但凭借其动态和灵活的函数式特性，我们可以轻松实现切面与拦截器的设计模式。这种模式的核心思想是在不修改原有函数逻辑的前提下，通过“织入”额外行为来增强功能，常见于日志记录、权限校验、性能监控等场景。

什么是AOP与拦截器模式

AOP（Aspect-Oriented Programming）将横切关注点（如日志、事务、安全）从核心业务逻辑中分离出来。在JavaScript中，我们通常通过高阶函数或装饰器的方式模拟这一机制。

拦截器模式则是AOP的一种具体实现方式，它允许我们在目标函数执行前、后甚至抛出异常时插入自定义逻辑，类似于HTTP拦截器或中间件机制。

基于函数代理的简单实现

利用JavaScript的Function.prototype或Proxy对象，可以对函数调用进行拦截和增强。

立即学习“Java免费学习笔记（深入）”；

以下是一个通过包装函数实现前置和后置通知的示例：

SEEK.ai

AI驱动的智能数据解决方案，询问您的任何数据并立即获得答案

128

查看详情

function before(fn, advice) {
  return function(...args) {
    advice.apply(this, args);
    return fn.apply(this, args);
  };
}

function after(fn, advice) {
  return function(...args) {
    const result = fn.apply(this, args);
    advice.call(this, result);
    return result;
  };
}

// 使用示例
function fetchData() {
  console.log("正在获取数据...");
  return "data";
}

const trackedFetch = before(fetchData, function() {
  console.log("开始请求");
});

const loggedFetch = after(trackedFetch, function(result) {
  console.log("请求完成，结果:", result);
});

loggedFetch();

登录后复制

使用Proxy实现方法拦截

对于对象的方法，可以使用Proxy更优雅地统一处理多个方法的切面逻辑。

function createAOP(target, aspects = {}) {
  return new Proxy(target, {
    get(target, prop) {
      const method = target[prop];
      if (typeof method !== 'function') return method;

      const before = aspects[`before:${prop}`];
      const after = aspects[`after:${prop}`];

      return function(...args) {
        if (before) before.apply(this, args);
        const result = method.apply(target, args);
        if (after) after.call(this, result);
        return result;
      };
    }
  });
}

// 示例使用
const service = {
  getUser(id) {
    console.log(`获取用户 ${id}`);
    return { id, name: 'Alice' };
  },
  saveUser(user) {
    console.log(`保存用户 ${user.name}`);
    return true;
  }
};

const proxiedService = createAOP(service, {
  'before:getUser': function(id) {
    console.log('【日志】即将查询用户', id);
  },
  'after:getUser': function(user) {
    console.log('【监控】用户查询完成:', user);
  },
  'before:saveUser': function(user) {
    console.log('【验证】正在校验用户数据');
  }
});

proxiedService.getUser(123);
// 输出：
// 【日志】即将查询用户 123
// 获取用户 123
// 【监控】用户查询完成: { id: 123, name: 'Alice' }

登录后复制