js 实现hook
在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);注意事项
- Hook顺序很重要，确保注册和触发的顺序符合预期
- 避免循环触发Hook导致的无限循环
- 考虑性能影响，特别是在高频触发的场景
- 对于复杂场景可以使用现有的Hook库如react-hooks或自定义事件总线
这些实现方式可以根据具体需求进行组合和扩展，构建适合项目的Hook系统。
