在原生 JavaScript 项目中我们经常会遇到需要拦截、修改或扩展现有函数行为的需求。比如在调试复杂业务逻辑时想要监控某个函数的调用参数和返回值或者在处理第三方库时需要在不修改源码的情况下增加自定义逻辑。这时候钩子Hook技术就能大显身手了。本文将完整介绍如何在原生 JS 项目中实现和使用钩子函数涵盖基础概念、多种实现方案、实战案例以及生产环境中的最佳实践。无论你是刚接触钩子概念的新手还是有一定经验想要系统掌握的开发者都能从中获得实用的技术方案。1. 钩子函数的核心概念1.1 什么是钩子函数钩子函数Hook Function是一种编程技术它允许我们在系统调用某个函数之前或之后插入自定义代码从而改变或扩展原函数的行为。就像在墙上挂一个钩子我们可以在上面挂载各种功能。从技术角度看钩子的核心原理是函数劫持——通过替换原函数在新的包装函数中执行自定义逻辑然后再调用原函数。这种模式在软件开发中非常常见比如事件监听、中间件、AOP面向切面编程等都基于类似思想。1.2 钩子的典型应用场景在实际项目中钩子技术有广泛的应用价值调试和监控记录函数调用次数、参数、执行时间、返回值等性能分析统计函数执行耗时找出性能瓶颈功能扩展在不修改源码的情况下为现有函数添加新功能数据验证在函数执行前验证参数合法性错误处理统一处理函数执行过程中的异常权限控制在敏感操作前进行权限校验1.3 原生JS中钩子的优势与使用第三方库相比原生JS实现钩子有以下优势零依赖不引入外部库减少项目体积和复杂度灵活性高完全自定义钩子逻辑满足特定需求性能可控避免第三方库的冗余功能针对性优化理解深入掌握底层原理更好地应对复杂场景2. 环境准备与基础示例2.1 所需环境配置本文所有示例都基于现代JavaScript环境具体要求如下浏览器环境Chrome 60、Firefox 55、Safari 11 等支持ES6的浏览器Node.js环境Node.js 8.0推荐使用12.0版本基础知识熟悉JavaScript函数、对象、原型链等概念不需要任何第三方库纯原生JS即可实现所有功能。2.2 最简单的钩子示例让我们从一个最简单的例子开始理解钩子的基本工作原理// 原始函数 function originalFunction(name) { console.log(Hello, ${name}!); return Greeted: ${name}; } // 创建钩子包装器 function createHook(originalFn, beforeHook, afterHook) { return function(...args) { // 执行前置钩子 if (beforeHook) { beforeHook.apply(this, args); } // 执行原函数 const result originalFn.apply(this, args); // 执行后置钩子 if (afterHook) { afterHook.call(this, result, args); } return result; }; } // 定义钩子函数 const beforeHook function(name) { console.log([Before] 即将问候: ${name}); }; const afterHook function(result, args) { console.log([After] 问候完成结果: ${result}参数: ${args}); }; // 应用钩子 const hookedFunction createHook(originalFunction, beforeHook, afterHook); // 测试调用 hookedFunction(CSDN读者);运行结果[Before] 即将问候: CSDN读者 Hello, CSDN读者! [After] 问候完成结果: Greeted: CSDN读者参数: CSDN读者这个简单的例子展示了钩子的核心思想在不修改原函数的情况下通过包装器增加前后置处理逻辑。3. 钩子函数的多种实现方案3.1 函数替换法这是最直接的钩子实现方式通过直接替换原函数来实现拦截// 目标函数 function apiCall(url, data) { console.log(调用API: ${url}数据:, data); return { success: true, data: 响应数据 }; } // 保存原函数引用 const originalApiCall apiCall; // 替换为带钩子的新函数 apiCall function(url, data) { console.log([Hook] API调用开始: ${url}); console.log([Hook] 请求数据:, data); const startTime Date.now(); const result originalApiCall(url, data); const endTime Date.now(); console.log([Hook] API调用结束耗时: ${endTime - startTime}ms); console.log([Hook] 响应结果:, result); return result; }; // 测试 apiCall(/api/user, { id: 123 });这种方法简单直接但需要注意保持原函数的上下文this和参数传递。3.2 原型链钩子法对于对象方法我们可以通过修改原型链来实现钩子// 假设有一个User类 class User { constructor(name) { this.name name; } sayHello() { console.log(${this.name} says: Hello!); return Hello from ${this.name}; } } // 保存原方法 const originalSayHello User.prototype.sayHello; // 在原型链上添加钩子 User.prototype.sayHello function() { console.log([Hook] ${this.name} 准备打招呼); const result originalSayHello.apply(this, arguments); console.log([Hook] ${this.name} 打招呼完成); return result; }; // 测试 const user new User(张三); user.sayHello();这种方法适用于类的方法拦截可以影响所有实例对象。3.3 属性描述符钩子法使用Object.defineProperty可以更精细地控制钩子行为const targetObj { importantValue: 100, getValue() { return this.importantValue; }, setValue(newVal) { this.importantValue newVal; return this.importantValue; } }; // 使用属性描述符添加钩子 Object.defineProperty(targetObj, importantValue, { get: function() { console.log([Hook] 正在读取importantValue); return this._importantValue || 100; }, set: function(newVal) { console.log([Hook] 设置importantValue: ${newVal}); this._importantValue newVal; } }); // 测试 targetObj.setValue(200); console.log(targetObj.getValue());这种方法可以拦截属性的读取和设置操作适合数据监控场景。4. 完整实战案例函数调用监控系统4.1 需求分析我们要开发一个函数调用监控系统需要实现以下功能监控指定函数的调用次数记录每次调用的参数和返回值统计函数执行时间支持异常捕获和记录提供监控数据查询接口4.2 系统设计首先设计监控系统的核心结构class FunctionMonitor { constructor() { this.monitoringData new Map(); this.hookedFunctions new Set(); } // 添加监控 monitorFunction(fn, functionName fn.name || anonymous) { if (this.hookedFunctions.has(fn)) { console.warn(函数 ${functionName} 已被监控); return fn; } const monitorData { callCount: 0, totalTime: 0, calls: [], errors: [] }; this.monitoringData.set(fn, monitorData); this.hookedFunctions.add(fn); const self this; const hookedFn function(...args) { const callData { timestamp: new Date(), args: [...args], result: null, error: null, duration: 0 }; const startTime performance.now(); try { const result fn.apply(this, args); callData.result result; callData.duration performance.now() - startTime; monitorData.callCount; monitorData.totalTime callData.duration; monitorData.calls.push(callData); return result; } catch (error) { callData.error error; callData.duration performance.now() - startTime; monitorData.errors.push(callData); throw error; } }; // 复制原函数属性 Object.defineProperty(hookedFn, name, { value: monitored_${functionName}, configurable: true }); return hookedFn; } // 获取监控数据 getMonitoringData(fn) { return this.monitoringData.get(fn); } // 获取统计信息 getStatistics(fn) { const data this.monitoringData.get(fn); if (!data) return null; return { function: fn.name || anonymous, callCount: data.callCount, averageTime: data.callCount 0 ? data.totalTime / data.callCount : 0, errorCount: data.errors.length, lastCall: data.calls.length 0 ? data.calls[data.calls.length - 1] : null }; } // 清除监控 clearMonitoring(fn) { this.monitoringData.delete(fn); this.hookedFunctions.delete(fn); } }4.3 应用示例现在让我们使用这个监控系统来监控一些业务函数// 创建监控实例 const monitor new FunctionMonitor(); // 业务函数示例 function processUserData(userData) { console.log(处理用户数据:, userData); // 模拟处理时间 const processingTime Math.random() * 100; const start performance.now(); while (performance.now() - start processingTime) {} if (Math.random() 0.8) { throw new Error(处理用户数据时发生错误); } return { ...userData, processed: true, processedAt: new Date() }; } function validateInput(input) { console.log(验证输入:, input); if (!input || typeof input ! object) { throw new Error(输入无效); } return true; } // 应用监控 const monitoredProcessUserData monitor.monitorFunction(processUserData, processUserData); const monitoredValidateInput monitor.monitorFunction(validateInput, validateInput); // 模拟多次调用 for (let i 0; i 5; i) { try { monitoredValidateInput({ id: i, name: 用户${i} }); const result monitoredProcessUserData({ id: i, name: 用户${i} }); console.log(处理结果:, result); } catch (error) { console.error(处理失败:, error.message); } } // 查看监控结果 console.log(监控统计:); console.log(monitor.getStatistics(processUserData)); console.log(monitor.getStatistics(validateInput));4.4 高级功能扩展我们可以进一步扩展监控系统添加更多实用功能// 扩展监控类 class AdvancedFunctionMonitor extends FunctionMonitor { // 添加性能阈值警告 monitorFunctionWithThreshold(fn, options {}) { const { functionName fn.name || anonymous, timeThreshold 100, // 时间阈值(ms) callThreshold 10 // 调用次数阈值 } options; const monitoredFn this.monitorFunction(fn, functionName); const monitorData this.monitoringData.get(fn); const self this; const advancedFn function(...args) { const result monitoredFn.apply(this, args); // 检查性能阈值 const latestCall monitorData.calls[monitorData.calls.length - 1]; if (latestCall.duration timeThreshold) { console.warn([性能警告] 函数 ${functionName} 执行时间 ${latestCall.duration.toFixed(2)}ms 超过阈值 ${timeThreshold}ms); } // 检查调用次数阈值 if (monitorData.callCount callThreshold) { console.warn([调用警告] 函数 ${functionName} 调用次数 ${monitorData.callCount} 超过阈值 ${callThreshold}); } return result; }; return advancedFn; } // 生成监控报告 generateReport() { const report { generatedAt: new Date(), totalMonitoredFunctions: this.hookedFunctions.size, functions: [] }; for (const fn of this.hookedFunctions) { const stats this.getStatistics(fn); if (stats) { report.functions.push(stats); } } return report; } }5. 钩子技术在具体场景中的应用5.1 调试和日志记录钩子非常适合用于调试复杂的函数调用链// 深度调试钩子 function createDebugHook(fn, options {}) { const { name fn.name || anonymous, logArgs true, logResult true, logTime true, depth 2 } options; let callDepth 0; return function debugHookedFn(...args) { callDepth; const indent .repeat(callDepth - 1); // 记录调用信息 if (logArgs) { console.log(${indent}↳ ${name} 被调用参数:, args.length 0 ? args : 无参数); } const startTime logTime ? performance.now() : 0; try { const result fn.apply(this, args); if (logTime) { const duration performance.now() - startTime; console.log(${indent}↳ ${name} 执行完成耗时: ${duration.toFixed(2)}ms); } if (logResult callDepth depth) { console.log(${indent}↳ ${name} 返回值:, result); } callDepth--; return result; } catch (error) { if (logTime) { const duration performance.now() - startTime; console.log(${indent}↳ ${name} 执行失败耗时: ${duration.toFixed(2)}ms); } console.error(${indent}↳ ${name} 抛出错误:, error); callDepth--; throw error; } }; } // 使用示例 function complexCalculation(a, b) { console.log(执行复杂计算...); return a * b Math.sqrt(a b); } const debuggedCalculation createDebugHook(complexCalculation, { name: complexCalculation, logArgs: true, logResult: true, logTime: true, depth: 3 }); debuggedCalculation(10, 20);5.2 性能优化和缓存使用钩子实现函数缓存提升性能function createCachedHook(fn, options {}) { const { maxSize 100, ttl 5 * 60 * 1000, // 5分钟 keyGenerator (...args) JSON.stringify(args) } options; const cache new Map(); const timestamps new Map(); return function cachedFn(...args) { const cacheKey keyGenerator(...args); const now Date.now(); // 检查缓存是否存在且未过期 if (cache.has(cacheKey)) { const timestamp timestamps.get(cacheKey); if (now - timestamp ttl) { console.log([缓存命中] 键: ${cacheKey}); return cache.get(cacheKey); } else { // 缓存过期清除 cache.delete(cacheKey); timestamps.delete(cacheKey); } } // 执行原函数 const result fn.apply(this, args); // 更新缓存 cache.set(cacheKey, result); timestamps.set(cacheKey, now); // 清理过期缓存 cleanupExpiredCache(cache, timestamps, ttl); // 限制缓存大小 if (cache.size maxSize) { const firstKey cache.keys().next().value; cache.delete(firstKey); timestamps.delete(firstKey); } return result; }; function cleanupExpiredCache(cache, timestamps, ttl) { const now Date.now(); for (const [key, timestamp] of timestamps) { if (now - timestamp ttl) { cache.delete(key); timestamps.delete(key); } } } } // 使用示例 function expensiveOperation(x, y) { console.log(执行昂贵计算: ${x} * ${y}); // 模拟耗时操作 const start performance.now(); while (performance.now() - start 100) {} return x * y; } const cachedOperation createCachedHook(expensiveOperation, { maxSize: 50, ttl: 1000 // 1秒缓存 }); // 测试缓存效果 console.time(第一次调用); cachedOperation(5, 10); console.timeEnd(第一次调用); console.time(第二次调用应命中缓存); cachedOperation(5, 10); console.timeEnd(第二次调用);5.3 权限控制和验证使用钩子实现函数级别的权限控制class PermissionHook { constructor() { this.permissions new Map(); } // 注册权限规则 registerPermission(fn, permissionCheck) { this.permissions.set(fn, permissionCheck); } // 创建权限钩子 createPermissionHook(fn, options {}) { const { functionName fn.name || anonymous, onDenied () { throw new Error(权限不足) } } options; const permissionCheck this.permissions.get(fn); if (!permissionCheck) { console.warn(函数 ${functionName} 未设置权限规则将直接放行); return fn; } return function permissionHookedFn(...args) { const hasPermission permissionCheck.apply(this, args); if (!hasPermission) { console.warn([权限拒绝] 函数 ${functionName} 调用被拒绝); return onDenied.apply(this, args); } console.log([权限通过] 函数 ${functionName} 调用允许); return fn.apply(this, args); }; } } // 使用示例 const permissionSystem new PermissionHook(); // 敏感操作函数 function deleteUser(userId) { console.log(删除用户: ${userId}); return 用户 ${userId} 已删除; } function updateSalary(userId, newSalary) { console.log(更新用户 ${userId} 薪资为: ${newSalary}); return 薪资更新完成; } // 设置权限规则 permissionSystem.registerPermission(deleteUser, function(userId) { // 只有管理员可以删除用户 return this.userRole admin; }); permissionSystem.registerPermission(updateSalary, function(userId, newSalary) { // 经理可以更新薪资但不能超过限额 if (this.userRole manager newSalary 10000) { return true; } return this.userRole admin; }); // 创建带权限控制的函数 const securedDeleteUser permissionSystem.createPermissionHook(deleteUser, { functionName: deleteUser, onDenied: () 权限不足无法删除用户 }); const securedUpdateSalary permissionSystem.createPermissionHook(updateSalary, { functionName: updateSalary, onDenied: () 权限不足或薪资超出限额 }); // 测试不同权限 const adminContext { userRole: admin }; const managerContext { userRole: manager }; console.log(管理员操作:); console.log(securedDeleteUser.call(adminContext, user123)); console.log(securedUpdateSalary.call(adminContext, user123, 15000)); console.log(经理操作:); console.log(securedDeleteUser.call(managerContext, user123)); // 应被拒绝 console.log(securedUpdateSalary.call(managerContext, user123, 8000)); // 应通过 console.log(securedUpdateSalary.call(managerContext, user123, 12000)); // 应被拒绝6. 常见问题与解决方案6.1 钩子函数中的this指向问题这是钩子实现中最常见的问题之一// 错误示例this指向丢失 function badHook(fn) { return function(...args) { console.log(Before hook); // 这里的this可能不是原函数的this return fn(...args); // 错误丢失了this上下文 }; } // 正确示例保持this指向 function correctHook(fn) { return function(...args) { console.log(Before hook); // 使用apply保持this上下文 return fn.apply(this, args); }; } // 更安全的钩子工厂 function createSafeHook(fn, hooks {}) { return function safeHookedFn(...args) { // 保存原始this上下文 const context this; // 前置钩子 if (hooks.before) { hooks.before.apply(context, args); } let result; try { // 执行原函数保持上下文 result fn.apply(context, args); // 后置钩子同步 if (hooks.after) { hooks.after.call(context, result, args); } return result; } catch (error) { // 错误处理钩子 if (hooks.error) { hooks.error.call(context, error, args); } throw error; } }; }6.2 异步函数处理处理异步函数需要特殊注意// 异步函数钩子 function createAsyncHook(fn, hooks {}) { return async function asyncHookedFn(...args) { const context this; // 前置钩子 if (hooks.before) { await hooks.before.apply(context, args); } try { const result await fn.apply(context, args); // 后置钩子 if (hooks.after) { await hooks.after.call(context, result, args); } return result; } catch (error) { if (hooks.error) { await hooks.error.call(context, error, args); } throw error; } }; } // 使用示例 async function fetchUserData(userId) { console.log(获取用户数据...); await new Promise(resolve setTimeout(resolve, 100)); return { id: userId, name: 用户${userId} }; } const monitoredFetch createAsyncHook(fetchUserData, { before: async function(userId) { console.log([Async Hook] 开始获取用户 ${userId} 的数据); }, after: async function(result, args) { console.log([Async Hook] 获取完成:, result); }, error: async function(error, args) { console.error([Async Hook] 获取失败:, error); } }); // 测试 monitoredFetch(123).then(console.log);6.3 循环引用和内存泄漏钩子可能导致内存泄漏需要注意清理class SafeHookManager { constructor() { this.hooks new WeakMap(); // 使用WeakMap避免内存泄漏 this.originalFunctions new WeakMap(); } // 应用钩子 applyHook(target, hookFactory) { if (this.hooks.has(target)) { return this.hooks.get(target); } const hookedFn hookFactory(target); this.hooks.set(target, hookedFn); this.originalFunctions.set(hookedFn, target); return hookedFn; } // 移除钩子 removeHook(hookedFn) { const original this.originalFunctions.get(hookedFn); if (original) { this.hooks.delete(original); this.originalFunctions.delete(hookedFn); return original; } return hookedFn; } // 检查是否已应用钩子 isHooked(fn) { return this.hooks.has(fn); } } // 使用示例 const hookManager new SafeHookManager(); function originalFunction() { console.log(原始函数); } // 应用钩子 const hooked hookManager.applyHook(originalFunction, (fn) { return function() { console.log(钩子逻辑); return fn(); }; }); // 使用带钩子的函数 hooked(); // 可以安全地移除钩子 const restored hookManager.removeHook(hooked); restored(); // 现在调用的是原始函数7. 性能优化最佳实践7.1 减少钩子性能开销钩子会带来一定的性能开销需要优化// 高性能钩子实现 function createOptimizedHook(fn, options {}) { const { enabled true, sampling 1, // 采样率1表示100%采样 minimal false // 最小化模式减少日志输出 } options; if (!enabled) { return fn; // 直接返回原函数零开销 } // 使用闭包缓存优化 let callCount 0; return function optimizedHookedFn(...args) { callCount; // 采样控制只有部分调用会执行钩子逻辑 if (sampling 1 Math.random() sampling) { return fn.apply(this, args); } const start minimal ? 0 : performance.now(); // 最小化模式减少不必要的操作 if (!minimal) { console.log([Hook] 调用 #${callCount}); } const result fn.apply(this, args); if (!minimal) { const duration performance.now() - start; console.log([Hook] 完成耗时: ${duration.toFixed(2)}ms); } return result; }; } // 性能测试比较 function testPerformance() { let sum 0; for (let i 0; i 1000000; i) { sum i; } return sum; } // 测试不同钩子模式的性能 console.time(无钩子); testPerformance(); console.timeEnd(无钩子); console.time(最小化钩子); const minimalHook createOptimizedHook(testPerformance, { minimal: true }); minimalHook(); console.timeEnd(最小化钩子); console.time(全功能钩子); const fullHook createOptimizedHook(testPerformance, { minimal: false }); fullHook(); console.timeEnd(全功能钩子);7.2 生产环境配置建议在生产环境中使用钩子时建议遵循以下配置原则// 生产环境钩子配置 const PRODUCTION_CONFIG { // 日志级别none | error | warn | info | debug logLevel: warn, // 性能采样率降低监控开销 performanceSampling: 0.01, // 1%的调用会记录性能数据 // 错误监控始终开启 errorMonitoring: true, // 缓存配置 cacheEnabled: true, cacheTTL: 5 * 60 * 1000, // 5分钟 // 内存保护 maxCallRecords: 1000, // 最多记录1000次调用 autoCleanup: true }; function createProductionHook(fn, hookType, customConfig {}) { const config { ...PRODUCTION_CONFIG, ...customConfig }; switch (hookType) { case monitoring: return createMonitoringHook(fn, config); case caching: return createCachingHook(fn, config); case validation: return createValidationHook(fn, config); default: return fn; } } function createMonitoringHook(fn, config) { let callRecords []; return function productionHookedFn(...args) { const callData { timestamp: Date.now(), args: config.logLevel debug ? args : undefined }; // 限制记录数量防止内存泄漏 if (callRecords.length config.maxCallRecords) { if (config.autoCleanup) { callRecords callRecords.slice(-config.maxCallRecords / 2); } } // 性能采样 const shouldRecordPerformance Math.random() config.performanceSampling; const startTime shouldRecordPerformance ? performance.now() : 0; try { const result fn.apply(this, args); callData.result config.logLevel debug ? result : undefined; if (shouldRecordPerformance) { callData.duration performance.now() - startTime; if (config.logLevel debug) { console.log([Monitor] 函数执行耗时: ${callData.duration}ms); } } callRecords.push(callData); return result; } catch (error) { callData.error error; callRecords.push(callData); // 错误日志根据配置级别输出 if (config.errorMonitoring config.logLevel ! none) { console.error([Monitor] 函数执行错误:, error); } throw error; } }; }8. 调试技巧和工具8.1 浏览器开发者工具集成利用浏览器开发者工具进行钩子调试// 增强的调试钩子与DevTools集成 function createDevToolsHook(fn, options {}) { const { name fn.name || anonymous, groupName Hook Debug, collapsed true } options; return function devToolsHookedFn(...args) { const logMethod collapsed ? console.groupCollapsed : console.group; logMethod( ${groupName}: ${name}); console.log(参数:, args); console.log(调用栈:, new Error().stack); const startTime performance.now(); try { const result fn.apply(this, args); const endTime performance.now(); console.log(返回值:, result); console.log(执行时间: ${(endTime - startTime).toFixed(2)}ms); console.groupEnd(); return result; } catch (error) { const endTime performance.now(); console.error(错误:, error); console.log(执行时间: ${(endTime - startTime).toFixed(2)}ms); console.groupEnd(); throw error; } }; } // 使用示例 function businessLogic(data) { console.log(处理业务逻辑:, data); return data * 2; } const debuggedLogic createDevToolsHook(businessLogic, { name: businessLogic, groupName: 业务逻辑调试 }); // 在浏览器中运行可以看到分组日志 debuggedLogic(42);8.2 自定义调试面板创建简单的调试界面来管理钩子!-- debug-panel.html -- div idhook-debug-panel styleposition: fixed; top: 10px; right: 10px; background: white; border: 1px solid #ccc; padding: 10px; z-index: 10000; h3钩子调试面板/h3 div label input typecheckbox idhook-enabled 启用钩子 /label /div div label 日志级别: select idlog-level option valuenone无/option option valueerror错误/option option valuewarn警告/option option valueinfo信息/option option valuedebug调试/option /select /label /div div idhook-stats/div /div script // 调试面板逻辑 class HookDebugPanel { constructor() { this.stats new Map(); this.enabled true; this.logLevel info; this.initPanel(); } initPanel() { // 面板控件事件监听 document.getElementById(hook-enabled).addEventListener(change, (e) { this.enabled e.target.checked; }); document.getElementById(log-level).addEventListener(change, (e) { this.logLevel e.target.value; }); // 定期更新统计信息 setInterval(() this.updateStats(), 1000); } recordCall(hookName, duration, success true) { if (!this.stats.has(hookName)) { this.stats.set(hookName, { calls: 0, totalTime: 0, errors: 0 }); } const stat this.stats.get(hookName); stat.calls; stat.totalTime duration; if (!success) stat.errors; } updateStats() { const statsElement document.getElementById(hook-stats); let html h4统计信息/h4; for (const [name, stat] of this.stats) { const avgTime stat.calls 0 ? (stat.totalTime / stat.calls).toFixed(2) : 0; html div${name}: 调用${stat.calls}次, 平均${avgTime}ms, 错误${stat.errors}次/div; } statsElement.innerHTML html; } log(message, level info) { if (!this.enabled) return; if (this.getLogLevelValue(level) this.getLogLevelValue(this.logLevel)) return; const timestamp new Date().toISOString(); console.log([${timestamp}] [Hook] ${message}); } getLogLevelValue(level) { const levels { none: 0, error: 1, warn: 2, info: 3, debug: 4 }; return levels[level] || 0; } } // 全局调试面板实例 window.hookDebugPanel new HookDebugPanel(); /script9. 测试策略和质量保证9.1 钩子函数单元测试确保钩子功能的正确性// 钩子测试工具 class HookTestSuite { constructor() { this.tests []; } addTest(name, testFn) { this.tests.push({ name, fn: testFn }); } runTests() { let passed 0; let failed 0
在原生 JavaScript 项目中我们经常会遇到需要拦截、修改或扩展现有函数行为的需求。比如在调试复杂业务逻辑时想要监控某个函数的调用参数和返回值或者在处理第三方库时需要在不修改源码的情况下增加自定义逻辑。这时候钩子Hook技术就能大显身手了。本文将完整介绍如何在原生 JS 项目中实现和使用钩子函数涵盖基础概念、多种实现方案、实战案例以及生产环境中的最佳实践。无论你是刚接触钩子概念的新手还是有一定经验想要系统掌握的开发者都能从中获得实用的技术方案。1. 钩子函数的核心概念1.1 什么是钩子函数钩子函数Hook Function是一种编程技术它允许我们在系统调用某个函数之前或之后插入自定义代码从而改变或扩展原函数的行为。就像在墙上挂一个钩子我们可以在上面挂载各种功能。从技术角度看钩子的核心原理是函数劫持——通过替换原函数在新的包装函数中执行自定义逻辑然后再调用原函数。这种模式在软件开发中非常常见比如事件监听、中间件、AOP面向切面编程等都基于类似思想。1.2 钩子的典型应用场景在实际项目中钩子技术有广泛的应用价值调试和监控记录函数调用次数、参数、执行时间、返回值等性能分析统计函数执行耗时找出性能瓶颈功能扩展在不修改源码的情况下为现有函数添加新功能数据验证在函数执行前验证参数合法性错误处理统一处理函数执行过程中的异常权限控制在敏感操作前进行权限校验1.3 原生JS中钩子的优势与使用第三方库相比原生JS实现钩子有以下优势零依赖不引入外部库减少项目体积和复杂度灵活性高完全自定义钩子逻辑满足特定需求性能可控避免第三方库的冗余功能针对性优化理解深入掌握底层原理更好地应对复杂场景2. 环境准备与基础示例2.1 所需环境配置本文所有示例都基于现代JavaScript环境具体要求如下浏览器环境Chrome 60、Firefox 55、Safari 11 等支持ES6的浏览器Node.js环境Node.js 8.0推荐使用12.0版本基础知识熟悉JavaScript函数、对象、原型链等概念不需要任何第三方库纯原生JS即可实现所有功能。2.2 最简单的钩子示例让我们从一个最简单的例子开始理解钩子的基本工作原理// 原始函数 function originalFunction(name) { console.log(Hello, ${name}!); return Greeted: ${name}; } // 创建钩子包装器 function createHook(originalFn, beforeHook, afterHook) { return function(...args) { // 执行前置钩子 if (beforeHook) { beforeHook.apply(this, args); } // 执行原函数 const result originalFn.apply(this, args); // 执行后置钩子 if (afterHook) { afterHook.call(this, result, args); } return result; }; } // 定义钩子函数 const beforeHook function(name) { console.log([Before] 即将问候: ${name}); }; const afterHook function(result, args) { console.log([After] 问候完成结果: ${result}参数: ${args}); }; // 应用钩子 const hookedFunction createHook(originalFunction, beforeHook, afterHook); // 测试调用 hookedFunction(CSDN读者);运行结果[Before] 即将问候: CSDN读者 Hello, CSDN读者! [After] 问候完成结果: Greeted: CSDN读者参数: CSDN读者这个简单的例子展示了钩子的核心思想在不修改原函数的情况下通过包装器增加前后置处理逻辑。3. 钩子函数的多种实现方案3.1 函数替换法这是最直接的钩子实现方式通过直接替换原函数来实现拦截// 目标函数 function apiCall(url, data) { console.log(调用API: ${url}数据:, data); return { success: true, data: 响应数据 }; } // 保存原函数引用 const originalApiCall apiCall; // 替换为带钩子的新函数 apiCall function(url, data) { console.log([Hook] API调用开始: ${url}); console.log([Hook] 请求数据:, data); const startTime Date.now(); const result originalApiCall(url, data); const endTime Date.now(); console.log([Hook] API调用结束耗时: ${endTime - startTime}ms); console.log([Hook] 响应结果:, result); return result; }; // 测试 apiCall(/api/user, { id: 123 });这种方法简单直接但需要注意保持原函数的上下文this和参数传递。3.2 原型链钩子法对于对象方法我们可以通过修改原型链来实现钩子// 假设有一个User类 class User { constructor(name) { this.name name; } sayHello() { console.log(${this.name} says: Hello!); return Hello from ${this.name}; } } // 保存原方法 const originalSayHello User.prototype.sayHello; // 在原型链上添加钩子 User.prototype.sayHello function() { console.log([Hook] ${this.name} 准备打招呼); const result originalSayHello.apply(this, arguments); console.log([Hook] ${this.name} 打招呼完成); return result; }; // 测试 const user new User(张三); user.sayHello();这种方法适用于类的方法拦截可以影响所有实例对象。3.3 属性描述符钩子法使用Object.defineProperty可以更精细地控制钩子行为const targetObj { importantValue: 100, getValue() { return this.importantValue; }, setValue(newVal) { this.importantValue newVal; return this.importantValue; } }; // 使用属性描述符添加钩子 Object.defineProperty(targetObj, importantValue, { get: function() { console.log([Hook] 正在读取importantValue); return this._importantValue || 100; }, set: function(newVal) { console.log([Hook] 设置importantValue: ${newVal}); this._importantValue newVal; } }); // 测试 targetObj.setValue(200); console.log(targetObj.getValue());这种方法可以拦截属性的读取和设置操作适合数据监控场景。4. 完整实战案例函数调用监控系统4.1 需求分析我们要开发一个函数调用监控系统需要实现以下功能监控指定函数的调用次数记录每次调用的参数和返回值统计函数执行时间支持异常捕获和记录提供监控数据查询接口4.2 系统设计首先设计监控系统的核心结构class FunctionMonitor { constructor() { this.monitoringData new Map(); this.hookedFunctions new Set(); } // 添加监控 monitorFunction(fn, functionName fn.name || anonymous) { if (this.hookedFunctions.has(fn)) { console.warn(函数 ${functionName} 已被监控); return fn; } const monitorData { callCount: 0, totalTime: 0, calls: [], errors: [] }; this.monitoringData.set(fn, monitorData); this.hookedFunctions.add(fn); const self this; const hookedFn function(...args) { const callData { timestamp: new Date(), args: [...args], result: null, error: null, duration: 0 }; const startTime performance.now(); try { const result fn.apply(this, args); callData.result result; callData.duration performance.now() - startTime; monitorData.callCount; monitorData.totalTime callData.duration; monitorData.calls.push(callData); return result; } catch (error) { callData.error error; callData.duration performance.now() - startTime; monitorData.errors.push(callData); throw error; } }; // 复制原函数属性 Object.defineProperty(hookedFn, name, { value: monitored_${functionName}, configurable: true }); return hookedFn; } // 获取监控数据 getMonitoringData(fn) { return this.monitoringData.get(fn); } // 获取统计信息 getStatistics(fn) { const data this.monitoringData.get(fn); if (!data) return null; return { function: fn.name || anonymous, callCount: data.callCount, averageTime: data.callCount 0 ? data.totalTime / data.callCount : 0, errorCount: data.errors.length, lastCall: data.calls.length 0 ? data.calls[data.calls.length - 1] : null }; } // 清除监控 clearMonitoring(fn) { this.monitoringData.delete(fn); this.hookedFunctions.delete(fn); } }4.3 应用示例现在让我们使用这个监控系统来监控一些业务函数// 创建监控实例 const monitor new FunctionMonitor(); // 业务函数示例 function processUserData(userData) { console.log(处理用户数据:, userData); // 模拟处理时间 const processingTime Math.random() * 100; const start performance.now(); while (performance.now() - start processingTime) {} if (Math.random() 0.8) { throw new Error(处理用户数据时发生错误); } return { ...userData, processed: true, processedAt: new Date() }; } function validateInput(input) { console.log(验证输入:, input); if (!input || typeof input ! object) { throw new Error(输入无效); } return true; } // 应用监控 const monitoredProcessUserData monitor.monitorFunction(processUserData, processUserData); const monitoredValidateInput monitor.monitorFunction(validateInput, validateInput); // 模拟多次调用 for (let i 0; i 5; i) { try { monitoredValidateInput({ id: i, name: 用户${i} }); const result monitoredProcessUserData({ id: i, name: 用户${i} }); console.log(处理结果:, result); } catch (error) { console.error(处理失败:, error.message); } } // 查看监控结果 console.log(监控统计:); console.log(monitor.getStatistics(processUserData)); console.log(monitor.getStatistics(validateInput));4.4 高级功能扩展我们可以进一步扩展监控系统添加更多实用功能// 扩展监控类 class AdvancedFunctionMonitor extends FunctionMonitor { // 添加性能阈值警告 monitorFunctionWithThreshold(fn, options {}) { const { functionName fn.name || anonymous, timeThreshold 100, // 时间阈值(ms) callThreshold 10 // 调用次数阈值 } options; const monitoredFn this.monitorFunction(fn, functionName); const monitorData this.monitoringData.get(fn); const self this; const advancedFn function(...args) { const result monitoredFn.apply(this, args); // 检查性能阈值 const latestCall monitorData.calls[monitorData.calls.length - 1]; if (latestCall.duration timeThreshold) { console.warn([性能警告] 函数 ${functionName} 执行时间 ${latestCall.duration.toFixed(2)}ms 超过阈值 ${timeThreshold}ms); } // 检查调用次数阈值 if (monitorData.callCount callThreshold) { console.warn([调用警告] 函数 ${functionName} 调用次数 ${monitorData.callCount} 超过阈值 ${callThreshold}); } return result; }; return advancedFn; } // 生成监控报告 generateReport() { const report { generatedAt: new Date(), totalMonitoredFunctions: this.hookedFunctions.size, functions: [] }; for (const fn of this.hookedFunctions) { const stats this.getStatistics(fn); if (stats) { report.functions.push(stats); } } return report; } }5. 钩子技术在具体场景中的应用5.1 调试和日志记录钩子非常适合用于调试复杂的函数调用链// 深度调试钩子 function createDebugHook(fn, options {}) { const { name fn.name || anonymous, logArgs true, logResult true, logTime true, depth 2 } options; let callDepth 0; return function debugHookedFn(...args) { callDepth; const indent .repeat(callDepth - 1); // 记录调用信息 if (logArgs) { console.log(${indent}↳ ${name} 被调用参数:, args.length 0 ? args : 无参数); } const startTime logTime ? performance.now() : 0; try { const result fn.apply(this, args); if (logTime) { const duration performance.now() - startTime; console.log(${indent}↳ ${name} 执行完成耗时: ${duration.toFixed(2)}ms); } if (logResult callDepth depth) { console.log(${indent}↳ ${name} 返回值:, result); } callDepth--; return result; } catch (error) { if (logTime) { const duration performance.now() - startTime; console.log(${indent}↳ ${name} 执行失败耗时: ${duration.toFixed(2)}ms); } console.error(${indent}↳ ${name} 抛出错误:, error); callDepth--; throw error; } }; } // 使用示例 function complexCalculation(a, b) { console.log(执行复杂计算...); return a * b Math.sqrt(a b); } const debuggedCalculation createDebugHook(complexCalculation, { name: complexCalculation, logArgs: true, logResult: true, logTime: true, depth: 3 }); debuggedCalculation(10, 20);5.2 性能优化和缓存使用钩子实现函数缓存提升性能function createCachedHook(fn, options {}) { const { maxSize 100, ttl 5 * 60 * 1000, // 5分钟 keyGenerator (...args) JSON.stringify(args) } options; const cache new Map(); const timestamps new Map(); return function cachedFn(...args) { const cacheKey keyGenerator(...args); const now Date.now(); // 检查缓存是否存在且未过期 if (cache.has(cacheKey)) { const timestamp timestamps.get(cacheKey); if (now - timestamp ttl) { console.log([缓存命中] 键: ${cacheKey}); return cache.get(cacheKey); } else { // 缓存过期清除 cache.delete(cacheKey); timestamps.delete(cacheKey); } } // 执行原函数 const result fn.apply(this, args); // 更新缓存 cache.set(cacheKey, result); timestamps.set(cacheKey, now); // 清理过期缓存 cleanupExpiredCache(cache, timestamps, ttl); // 限制缓存大小 if (cache.size maxSize) { const firstKey cache.keys().next().value; cache.delete(firstKey); timestamps.delete(firstKey); } return result; }; function cleanupExpiredCache(cache, timestamps, ttl) { const now Date.now(); for (const [key, timestamp] of timestamps) { if (now - timestamp ttl) { cache.delete(key); timestamps.delete(key); } } } } // 使用示例 function expensiveOperation(x, y) { console.log(执行昂贵计算: ${x} * ${y}); // 模拟耗时操作 const start performance.now(); while (performance.now() - start 100) {} return x * y; } const cachedOperation createCachedHook(expensiveOperation, { maxSize: 50, ttl: 1000 // 1秒缓存 }); // 测试缓存效果 console.time(第一次调用); cachedOperation(5, 10); console.timeEnd(第一次调用); console.time(第二次调用应命中缓存); cachedOperation(5, 10); console.timeEnd(第二次调用);5.3 权限控制和验证使用钩子实现函数级别的权限控制class PermissionHook { constructor() { this.permissions new Map(); } // 注册权限规则 registerPermission(fn, permissionCheck) { this.permissions.set(fn, permissionCheck); } // 创建权限钩子 createPermissionHook(fn, options {}) { const { functionName fn.name || anonymous, onDenied () { throw new Error(权限不足) } } options; const permissionCheck this.permissions.get(fn); if (!permissionCheck) { console.warn(函数 ${functionName} 未设置权限规则将直接放行); return fn; } return function permissionHookedFn(...args) { const hasPermission permissionCheck.apply(this, args); if (!hasPermission) { console.warn([权限拒绝] 函数 ${functionName} 调用被拒绝); return onDenied.apply(this, args); } console.log([权限通过] 函数 ${functionName} 调用允许); return fn.apply(this, args); }; } } // 使用示例 const permissionSystem new PermissionHook(); // 敏感操作函数 function deleteUser(userId) { console.log(删除用户: ${userId}); return 用户 ${userId} 已删除; } function updateSalary(userId, newSalary) { console.log(更新用户 ${userId} 薪资为: ${newSalary}); return 薪资更新完成; } // 设置权限规则 permissionSystem.registerPermission(deleteUser, function(userId) { // 只有管理员可以删除用户 return this.userRole admin; }); permissionSystem.registerPermission(updateSalary, function(userId, newSalary) { // 经理可以更新薪资但不能超过限额 if (this.userRole manager newSalary 10000) { return true; } return this.userRole admin; }); // 创建带权限控制的函数 const securedDeleteUser permissionSystem.createPermissionHook(deleteUser, { functionName: deleteUser, onDenied: () 权限不足无法删除用户 }); const securedUpdateSalary permissionSystem.createPermissionHook(updateSalary, { functionName: updateSalary, onDenied: () 权限不足或薪资超出限额 }); // 测试不同权限 const adminContext { userRole: admin }; const managerContext { userRole: manager }; console.log(管理员操作:); console.log(securedDeleteUser.call(adminContext, user123)); console.log(securedUpdateSalary.call(adminContext, user123, 15000)); console.log(经理操作:); console.log(securedDeleteUser.call(managerContext, user123)); // 应被拒绝 console.log(securedUpdateSalary.call(managerContext, user123, 8000)); // 应通过 console.log(securedUpdateSalary.call(managerContext, user123, 12000)); // 应被拒绝6. 常见问题与解决方案6.1 钩子函数中的this指向问题这是钩子实现中最常见的问题之一// 错误示例this指向丢失 function badHook(fn) { return function(...args) { console.log(Before hook); // 这里的this可能不是原函数的this return fn(...args); // 错误丢失了this上下文 }; } // 正确示例保持this指向 function correctHook(fn) { return function(...args) { console.log(Before hook); // 使用apply保持this上下文 return fn.apply(this, args); }; } // 更安全的钩子工厂 function createSafeHook(fn, hooks {}) { return function safeHookedFn(...args) { // 保存原始this上下文 const context this; // 前置钩子 if (hooks.before) { hooks.before.apply(context, args); } let result; try { // 执行原函数保持上下文 result fn.apply(context, args); // 后置钩子同步 if (hooks.after) { hooks.after.call(context, result, args); } return result; } catch (error) { // 错误处理钩子 if (hooks.error) { hooks.error.call(context, error, args); } throw error; } }; }6.2 异步函数处理处理异步函数需要特殊注意// 异步函数钩子 function createAsyncHook(fn, hooks {}) { return async function asyncHookedFn(...args) { const context this; // 前置钩子 if (hooks.before) { await hooks.before.apply(context, args); } try { const result await fn.apply(context, args); // 后置钩子 if (hooks.after) { await hooks.after.call(context, result, args); } return result; } catch (error) { if (hooks.error) { await hooks.error.call(context, error, args); } throw error; } }; } // 使用示例 async function fetchUserData(userId) { console.log(获取用户数据...); await new Promise(resolve setTimeout(resolve, 100)); return { id: userId, name: 用户${userId} }; } const monitoredFetch createAsyncHook(fetchUserData, { before: async function(userId) { console.log([Async Hook] 开始获取用户 ${userId} 的数据); }, after: async function(result, args) { console.log([Async Hook] 获取完成:, result); }, error: async function(error, args) { console.error([Async Hook] 获取失败:, error); } }); // 测试 monitoredFetch(123).then(console.log);6.3 循环引用和内存泄漏钩子可能导致内存泄漏需要注意清理class SafeHookManager { constructor() { this.hooks new WeakMap(); // 使用WeakMap避免内存泄漏 this.originalFunctions new WeakMap(); } // 应用钩子 applyHook(target, hookFactory) { if (this.hooks.has(target)) { return this.hooks.get(target); } const hookedFn hookFactory(target); this.hooks.set(target, hookedFn); this.originalFunctions.set(hookedFn, target); return hookedFn; } // 移除钩子 removeHook(hookedFn) { const original this.originalFunctions.get(hookedFn); if (original) { this.hooks.delete(original); this.originalFunctions.delete(hookedFn); return original; } return hookedFn; } // 检查是否已应用钩子 isHooked(fn) { return this.hooks.has(fn); } } // 使用示例 const hookManager new SafeHookManager(); function originalFunction() { console.log(原始函数); } // 应用钩子 const hooked hookManager.applyHook(originalFunction, (fn) { return function() { console.log(钩子逻辑); return fn(); }; }); // 使用带钩子的函数 hooked(); // 可以安全地移除钩子 const restored hookManager.removeHook(hooked); restored(); // 现在调用的是原始函数7. 性能优化最佳实践7.1 减少钩子性能开销钩子会带来一定的性能开销需要优化// 高性能钩子实现 function createOptimizedHook(fn, options {}) { const { enabled true, sampling 1, // 采样率1表示100%采样 minimal false // 最小化模式减少日志输出 } options; if (!enabled) { return fn; // 直接返回原函数零开销 } // 使用闭包缓存优化 let callCount 0; return function optimizedHookedFn(...args) { callCount; // 采样控制只有部分调用会执行钩子逻辑 if (sampling 1 Math.random() sampling) { return fn.apply(this, args); } const start minimal ? 0 : performance.now(); // 最小化模式减少不必要的操作 if (!minimal) { console.log([Hook] 调用 #${callCount}); } const result fn.apply(this, args); if (!minimal) { const duration performance.now() - start; console.log([Hook] 完成耗时: ${duration.toFixed(2)}ms); } return result; }; } // 性能测试比较 function testPerformance() { let sum 0; for (let i 0; i 1000000; i) { sum i; } return sum; } // 测试不同钩子模式的性能 console.time(无钩子); testPerformance(); console.timeEnd(无钩子); console.time(最小化钩子); const minimalHook createOptimizedHook(testPerformance, { minimal: true }); minimalHook(); console.timeEnd(最小化钩子); console.time(全功能钩子); const fullHook createOptimizedHook(testPerformance, { minimal: false }); fullHook(); console.timeEnd(全功能钩子);7.2 生产环境配置建议在生产环境中使用钩子时建议遵循以下配置原则// 生产环境钩子配置 const PRODUCTION_CONFIG { // 日志级别none | error | warn | info | debug logLevel: warn, // 性能采样率降低监控开销 performanceSampling: 0.01, // 1%的调用会记录性能数据 // 错误监控始终开启 errorMonitoring: true, // 缓存配置 cacheEnabled: true, cacheTTL: 5 * 60 * 1000, // 5分钟 // 内存保护 maxCallRecords: 1000, // 最多记录1000次调用 autoCleanup: true }; function createProductionHook(fn, hookType, customConfig {}) { const config { ...PRODUCTION_CONFIG, ...customConfig }; switch (hookType) { case monitoring: return createMonitoringHook(fn, config); case caching: return createCachingHook(fn, config); case validation: return createValidationHook(fn, config); default: return fn; } } function createMonitoringHook(fn, config) { let callRecords []; return function productionHookedFn(...args) { const callData { timestamp: Date.now(), args: config.logLevel debug ? args : undefined }; // 限制记录数量防止内存泄漏 if (callRecords.length config.maxCallRecords) { if (config.autoCleanup) { callRecords callRecords.slice(-config.maxCallRecords / 2); } } // 性能采样 const shouldRecordPerformance Math.random() config.performanceSampling; const startTime shouldRecordPerformance ? performance.now() : 0; try { const result fn.apply(this, args); callData.result config.logLevel debug ? result : undefined; if (shouldRecordPerformance) { callData.duration performance.now() - startTime; if (config.logLevel debug) { console.log([Monitor] 函数执行耗时: ${callData.duration}ms); } } callRecords.push(callData); return result; } catch (error) { callData.error error; callRecords.push(callData); // 错误日志根据配置级别输出 if (config.errorMonitoring config.logLevel ! none) { console.error([Monitor] 函数执行错误:, error); } throw error; } }; }8. 调试技巧和工具8.1 浏览器开发者工具集成利用浏览器开发者工具进行钩子调试// 增强的调试钩子与DevTools集成 function createDevToolsHook(fn, options {}) { const { name fn.name || anonymous, groupName Hook Debug, collapsed true } options; return function devToolsHookedFn(...args) { const logMethod collapsed ? console.groupCollapsed : console.group; logMethod( ${groupName}: ${name}); console.log(参数:, args); console.log(调用栈:, new Error().stack); const startTime performance.now(); try { const result fn.apply(this, args); const endTime performance.now(); console.log(返回值:, result); console.log(执行时间: ${(endTime - startTime).toFixed(2)}ms); console.groupEnd(); return result; } catch (error) { const endTime performance.now(); console.error(错误:, error); console.log(执行时间: ${(endTime - startTime).toFixed(2)}ms); console.groupEnd(); throw error; } }; } // 使用示例 function businessLogic(data) { console.log(处理业务逻辑:, data); return data * 2; } const debuggedLogic createDevToolsHook(businessLogic, { name: businessLogic, groupName: 业务逻辑调试 }); // 在浏览器中运行可以看到分组日志 debuggedLogic(42);8.2 自定义调试面板创建简单的调试界面来管理钩子!-- debug-panel.html -- div idhook-debug-panel styleposition: fixed; top: 10px; right: 10px; background: white; border: 1px solid #ccc; padding: 10px; z-index: 10000; h3钩子调试面板/h3 div label input typecheckbox idhook-enabled 启用钩子 /label /div div label 日志级别: select idlog-level option valuenone无/option option valueerror错误/option option valuewarn警告/option option valueinfo信息/option option valuedebug调试/option /select /label /div div idhook-stats/div /div script // 调试面板逻辑 class HookDebugPanel { constructor() { this.stats new Map(); this.enabled true; this.logLevel info; this.initPanel(); } initPanel() { // 面板控件事件监听 document.getElementById(hook-enabled).addEventListener(change, (e) { this.enabled e.target.checked; }); document.getElementById(log-level).addEventListener(change, (e) { this.logLevel e.target.value; }); // 定期更新统计信息 setInterval(() this.updateStats(), 1000); } recordCall(hookName, duration, success true) { if (!this.stats.has(hookName)) { this.stats.set(hookName, { calls: 0, totalTime: 0, errors: 0 }); } const stat this.stats.get(hookName); stat.calls; stat.totalTime duration; if (!success) stat.errors; } updateStats() { const statsElement document.getElementById(hook-stats); let html h4统计信息/h4; for (const [name, stat] of this.stats) { const avgTime stat.calls 0 ? (stat.totalTime / stat.calls).toFixed(2) : 0; html div${name}: 调用${stat.calls}次, 平均${avgTime}ms, 错误${stat.errors}次/div; } statsElement.innerHTML html; } log(message, level info) { if (!this.enabled) return; if (this.getLogLevelValue(level) this.getLogLevelValue(this.logLevel)) return; const timestamp new Date().toISOString(); console.log([${timestamp}] [Hook] ${message}); } getLogLevelValue(level) { const levels { none: 0, error: 1, warn: 2, info: 3, debug: 4 }; return levels[level] || 0; } } // 全局调试面板实例 window.hookDebugPanel new HookDebugPanel(); /script9. 测试策略和质量保证9.1 钩子函数单元测试确保钩子功能的正确性// 钩子测试工具 class HookTestSuite { constructor() { this.tests []; } addTest(name, testFn) { this.tests.push({ name, fn: testFn }); } runTests() { let passed 0; let failed 0
