当前位置：首页 > JavaScript

js 实现hook

2026-02-02 03:59:20JavaScript

在JavaScript中实现Hook模式

Hook（钩子）是一种编程模式，允许在特定事件或状态变化时插入自定义逻辑。以下是几种常见的实现方式：

自定义事件系统

通过自定义事件实现Hook机制，适用于观察者模式场景：

class EventHook {
  constructor() {
    this.hooks = {};
  }

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

  trigger(eventName, ...args) {
    const callbacks = this.hooks[eventName] || [];
    callbacks.forEach(cb => cb(...args));
  }
}

// 使用示例
const hook = new EventHook();
hook.register('beforeSave', () => console.log('Preparing to save'));
hook.trigger('beforeSave');

React风格的useState Hook

模拟React的Hook实现状态管理：

let currentState;
let isMounted = false;

function useState(initialValue) {
  if (!isMounted) {
    currentState = initialValue;
    isMounted = true;
  }

  const setState = (newValue) => {
    currentState = newValue;
    // 这里可以添加渲染逻辑
    console.log('State updated:', currentState);
  };

  return [currentState, setState];
}

// 使用示例
const [count, setCount] = useState(0);
setCount(5); // 输出: State updated: 5

生命周期Hook实现

为对象添加生命周期Hook：

function withLifecycleHooks(obj) {
  const hooks = {
    beforeCreate: [],
    created: [],
    beforeDestroy: []
  };

  return new Proxy(obj, {
    get(target, prop) {
      if (prop in hooks) {
        return (callback) => hooks[prop].push(callback);
      }
      return target[prop];
    },
    set(target, prop, value) {
      if (prop === 'init') {
        hooks.beforeCreate.forEach(cb => cb());
        target.init = value;
        hooks.created.forEach(cb => cb());
      }
      return true;
    }
  });
}

// 使用示例
const component = withLifecycleHooks({
  init() { console.log('Initializing...'); }
});
component.beforeCreate(() => console.log('Before create'));
component.init(); 
// 输出: 
// Before create
// Initializing...

异步操作Hook

为异步操作添加预处理和后处理Hook：

function createAsyncHook() {
  const preHooks = [];
  const postHooks = [];

  return {
    addPreHook(fn) { preHooks.push(fn); },
    addPostHook(fn) { postHooks.push(fn); },
    async execute(asyncFn) {
      await Promise.all(preHooks.map(hook => hook()));
      const result = await asyncFn();
      await Promise.all(postHooks.map(hook => hook(result)));
      return result;
    }
  };
}

// 使用示例
const hook = createAsyncHook();
hook.addPreHook(() => console.log('Pre-processing'));
hook.execute(() => Promise.resolve('Data')).then(console.log);