js实现钩子

钩子的概念

钩子（Hook）是一种编程模式，允许在特定事件或流程中插入自定义代码逻辑。在JavaScript中，钩子常用于生命周期管理、事件监听或自定义拦截逻辑。

事件监听钩子

通过事件监听机制实现钩子功能，适用于DOM操作或自定义事件场景：

// 自定义事件钩子示例
class EventHook {
  constructor() {
    this.hooks = {};
  }

  register(eventName, callback) {
    if (!this.hooks[eventName]) {
      this.hooks[eventName] = [];
    }
    this.hooks[eventName].push(callback);
  }

  trigger(eventName, ...args) {
    if (this.hooks[eventName]) {
      this.hooks[eventName].forEach(callback => callback(...args));
    }
  }
}

// 使用示例
const hook = new EventHook();
hook.register('beforeSave', () => console.log('数据保存前校验'));
hook.trigger('beforeSave');

生命周期钩子

适用于组件生命周期的场景，常见于前端框架：

// 简易生命周期钩子实现
class Component {
  constructor() {
    this.lifecycleHooks = {
      mounted: [],
      updated: [],
      destroyed: []
    };
  }

  onMounted(cb) {
    this.lifecycleHooks.mounted.push(cb);
  }

  mount() {
    console.log('组件挂载');
    this.lifecycleHooks.mounted.forEach(hook => hook());
  }
}

// 使用示例
const comp = new Component();
comp.onMounted(() => console.log('挂载后执行清理'));
comp.mount();

函数拦截钩子

通过高阶函数实现函数执行前后的钩子逻辑：

// 函数执行前后钩子
function createHook(targetFn) {
  return {
    before(beforeFn) {
      const original = targetFn;
      targetFn = (...args) => {
        beforeFn(...args);
        return original(...args);
      };
    },
    after(afterFn) {
      const original = targetFn;
      targetFn = (...args) => {
        const result = original(...args);
        afterFn(result, ...args);
        return result;
      };
    },
    execute: (...args) => targetFn(...args)
  };
}

// 使用示例
const hookedFn = createHook((x) => x * 2);
hookedFn.before((x) => console.log(`输入值: ${x}`));
hookedFn.after((result) => console.log(`计算结果: ${result}`));
hookedFn.execute(5); // 输出输入值后执行计算

Promise钩子

适用于异步操作的拦截场景：

// Promise钩子实现
function createPromiseHook(promiseFn) {
  const interceptors = {
    resolve: [],
    reject: []
  };

  return {
    onResolve(cb) {
      interceptors.resolve.push(cb);
    },
    onReject(cb) {
      interceptors.reject.push(cb);
    },
    execute(...args) {
      return promiseFn(...args)
        .then(data => {
          interceptors.resolve.forEach(cb => cb(data));
          return data;
        })
        .catch(err => {
          interceptors.reject.forEach(cb => cb(err));
          throw err;
        });
    }
  };
}

// 使用示例
const apiHook = createPromiseHook(fetch);
apiHook.onResolve(data => console.log('请求成功'));
apiHook.execute('https://api.example.com');

以上实现方式可根据具体需求组合使用，关键是根据业务场景选择合适的钩子类型。在复杂场景中，建议使用成熟的发布订阅库或前端框架内置的钩子系统。