当前位置：首页 > ops >正文

js设计模式-装饰器模式

ops 2025/9/4 11:17:17

一.概念

装饰器模式核心价值:

非侵入式扩展：无需修改核心功能源代码
责任链模式：通过装饰器链组合复杂逻辑
避免条件判断：消除冗余的if (featureX)代码膨胀

二.使用举例

原型扩展

<html>
<button tag="login" id="button">点击打开登录浮层</button>
<script>Function.prototype.after = function (afterfn) {var __self = this;return function () {var ret = __self.apply(this, arguments);afterfn.apply(this, arguments);return ret;}};var showLogin = function () {console.log('打开登录浮层');}var log = function () {console.log('上报标签为: ' + this.getAttribute('tag'));}showLogin = showLogin.after(log); // 打开登录浮层之后上报数据document.getElementById('button').onclick = showLogin; 
</script></html>

工具函数扩展

<html><button tag="login" id="button">点击打开登录浮层</button><script>document.addEventListener('DOMContentLoaded', function() {// 工具函数：创建函数执行后的增强函数function composeAfter(original, afterFn) {return function(...args) {const result = original.apply(this, args);afterFn.apply(this, args);return result};}// 原始函数：不包含副作用const showLogin = () => {console.log('打开登录浮层');};// 副作用函数：需要访问触发元素属性const trackEvent = function() {console.log('上报标签为: ' + this.getAttribute('tag'));};// 函数组合：合并核心逻辑与监视记录const combinedFunction = composeAfter(showLogin, trackEvent);// DOM 交互封装在闭包内const button = document.getElementById('button');button.addEventListener('click', combinedFunction);});</script>
</html>

三. 应用场景

日志记录
实现对函数调用的跟踪，不改动原函数逻辑

function logDecorator(func) {return function (...args) {console.log(`Calling ${func.name} with ${args}`);const result = func.apply(this, args);console.log(`Result: ${result}`);return result;};
}// 使用装饰器
const add = logDecorator(function(a, b) {return a + b;
});add(2, 3); // 输出调用日志

性能分析
测量函数执行时间

function timerDecorator(func) {return function (...args) {const start = performance.now();const result = func.apply(this, args);console.log(`Time taken: ${performance.now() - start}ms`);return result;};
}// 装饰计算密集型函数
const fibonacci = timerDecorator(function(n) {return n <= 1 ? n : fibonacci(n-1) + fibonacci(n-2);
});fibonacci(30); // 输出耗时

3.参数校验
确保函数参数符合规范

function validateParams(func) {return function (...args) {args.forEach(arg => {if (typeof arg !== 'number') throw new Error('Invalid parameter type');});return func.apply(this, args);};
}const multiply = validateParams(function(a, b) {return a * b;
});multiply(2, 'three'); // 抛出参数类型错误