当前位置：首页 > JavaScript

js实现钩子

2026-04-07 05:32:21JavaScript

钩子（Hooks）的实现方法

在JavaScript中，钩子（Hooks）通常指在特定生命周期或事件中插入自定义逻辑的机制。以下是几种常见的实现方式：

自定义事件钩子

通过自定义事件实现钩子，允许在特定时机触发回调函数：

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('Preparing to save...'));
hook.trigger('beforeSave');

生命周期钩子

在类或组件中预定义生命周期方法作为钩子：

class Component {
  beforeMount() {}
  mounted() {}
  beforeUpdate() {}
  updated() {}

  mount() {
    this.beforeMount();
    // 挂载逻辑
    this.mounted();
  }
}

Promise链式钩子

利用Promise实现异步钩子流程控制：

function asyncHook() {
  const hooks = [];

  return {
    add: (fn) => hooks.push(fn),
    run: (initialValue) => hooks.reduce(
      (promise, fn) => promise.then(fn),
      Promise.resolve(initialValue)
    )
  };
}

// 使用示例
const hook = asyncHook();
hook.add(value => new Promise(res => setTimeout(() => res(value + 1), 100)));
hook.run(5).then(console.log); // 输出6

React风格的Hooks

模拟React Hooks的实现原理（简化版）：

let currentHook = 0;
const hooks = [];

function useState(initialValue) {
  const _currentHook = currentHook++;
  if (!hooks[_currentHook]) {
    hooks[_currentHook] = initialValue;
  }

  return [
    hooks[_currentHook],
    (newValue) => { hooks[_currentHook] = newValue }
  ];
}

// 使用示例
const [count, setCount] = useState(0);
setCount(count + 1);

中间件模式钩子

通过中间件模式实现处理流程中的钩子：

js实现钩子

function createMiddleware() {
  const middlewares = [];

  return {
    use: (fn) => middlewares.push(fn),
    execute: (context) => {
      let index = 0;
      const next = () => {
        if (index < middlewares.length) {
          middlewares[index++](context, next);
        }
      };
      next();
    }
  };
}

// 使用示例
const middleware = createMiddleware();
middleware.use((ctx, next) => {
  ctx.value = 1;
  next();
});
middleware.execute({});