JS 装饰器模式实战 - 使用 Decorators 增强类与方法的优雅方案

@

@decoratorName

console.log

@log

// 假设这是我们的日志装饰器
function log(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args) {
    console.log(`[LOG] Calling method: ${propertyKey.toString()} with args: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`[LOG] Method ${propertyKey.toString()} returned: ${JSON.stringify(result)}`);
    return result;
  };

  return descriptor;
}

class Calculator {
  @log
  add(a, b) {
    return a + b;
  }

  @log
  subtract(a, b) {
    return a - b;
  }
}

const calc = new Calculator();
calc.add(2, 3);
// [LOG] Calling method: add with args: [2,3]
// [LOG] Method add returned: 5
calc.subtract(5, 1);
// [LOG] Calling method: subtract with args: [5,1]
// [LOG] Method subtract returned: 4

@log

add

subtract

@measurePerformance

function measurePerformance(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args) {
    const start = performance.now();
    const result = originalMethod.apply(this, args);
    const end = performance.now();
    console.log(`[Performance] Method ${propertyKey.toString()} executed in ${end - start}ms.`);
    return result;
  };
  return descriptor;
}

class DataProcessor {
  @measurePerformance
  processLargeDataSet(data) {
    // 模拟耗时操作
    let sum = 0;
    for (let i = 0; i < 1000000; i++) {
      sum += i;
    }
    return data.length + sum;
  }
}

const processor = new DataProcessor();
processor.processLargeDataSet([1, 2, 3]);
// [Performance] Method processLargeDataSet executed in XXms.

if (!user.hasPermission('admin')) return;

@requiresRole('admin')

@isAuthenticated

function requiresRole(role) {
  return function (target, propertyKey, descriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args) {
      // 假设这里有一个全局的用户信息或权限检查服务
      // 实际应用中会从JWT、Session或Redux Store中获取
      const currentUser = { roles: ['user'] }; // 模拟当前用户角色

      if (!currentUser.roles.includes(role)) {
        console.warn(`[Auth] Access denied for ${propertyKey.toString()}. Required role: ${role}`);
        throw new Error(`Permission denied: requires ${role} role.`);
      }
      return originalMethod.apply(this, args);
    };
    return descriptor;
  };
}

class AdminPanel {
  @requiresRole('admin')
  deleteUser(userId) {
    console.log(`Deleting user: ${userId}`);
    // ... 执行删除操作
  }

  @requiresRole('user') // 即使是普通用户也可以访问
  viewDashboard() {
    console.log('Viewing dashboard.');
  }
}

const adminPanel = new AdminPanel();
try {
  adminPanel.deleteUser(123); // 会抛出权限不足的错误
} catch (e) {
  console.error(e.message);
}
adminPanel.viewDashboard(); // 正常执行

@validate(schema)

this

bind

// 这是一个接收参数的日志装饰器工厂
function logWithLevel(level = 'INFO') {
  return function (target, propertyKey, descriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args) {
      console.log(`[${level}] Calling method: ${propertyKey.toString()} with args: ${JSON.stringify(args)}`);
      return originalMethod.apply(this, args);
    };
    return descriptor;
  };
}

class Task {
  @logWithLevel('DEBUG')
  doSomething(data) {
    console.log('Doing something with:', data);
  }

  @logWithLevel() // 默认INFO
  finishTask() {
    console.log('Task finished.');
  }
}

const task = new Task();
task.doSomething('payload');
task.finishTask();

logWithLevel

this

descriptor.value = function(...)

this

this

originalMethod.apply(this, args)

originalMethod.call(this, ...args)

originalMethod

this

// HOF 示例
function withLogger(fn) {
  return function (...args) {
    console.log(`[HOF Log] Calling ${fn.name} with args:`, args);
    const result = fn.apply(this, args);
    console.log(`[HOF Log] ${fn.name} returned:`, result);
    return result;
  };
}

function add(a, b) {
  return a + b;
}

const loggedAdd = withLogger(add);
loggedAdd(10, 20);

// HOC 示例 (React 伪代码)
function withAuth(WrappedComponent) {
  return class extends React.Component {
    render() {
      // 假设这里有认证逻辑
      const isAuthenticated = true; // 模拟
      if (!isAuthenticated) {
        return <p>请登录</p>;
      }
      return <WrappedComponent {...this.props} currentUser={{ name: 'John Doe' }} />;
    }
  };
}

class MyComponent extends React.Component {
  render() {
    return <p>欢迎, {this.props.currentUser.name}</p>;
  }
}

const AuthMyComponent = withAuth(MyComponent);
// <AuthMyComponent />