// 在开发过程中 改动需求是必要的,在原有的函数中添加修改内容
// 封装一个类
function decorator (input,fn){
// 获取执行的 dom元素
let newInput = document.getElementById(input);
if(typeof newInput.onclick === "function"){
// 缓存原有的事件逻辑
let oldClickFn = newInput.onclick;
newInput.onclick = function () {
// 执行原有的事件逻辑
oldClickFn();
// 执行新添加的回调函数
fn();
}
}else{
newInput.onclick = fn;
}
}
// 假如原有的box元素有一个业务逻辑:
var box = document.getElementById('box');
// 原有的业务逻辑
box.onclick = function(){
alert(1)
}
// 新添加的业务逻辑
decorator('box',function(){
alert(2);
})
装饰者模式
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- 1. 装饰者模式 举个栗子,假如在一家饮料店中有两种饮料,分别是奶茶和咖啡,相对的有三种调料,蜂蜜、块糖和摩卡,这...
- 定义:装饰者模式指的是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能。他是通过创建一个包装对象,也...
- 欢迎访问我的博客:http://wangnan.tech 装饰者模式 定义 动态地将责任附加到对象上,想要扩展功能...
- 一、代理模式和装饰者模式还记得装饰者模式那个开咖啡店的例子吗?装饰者类图: 同样开咖啡店,使用代理模式,那么类图是...
- AOP在职责模式中也有使用,初学设计模式过程中,AOP是性价比最高的,在实际开发中的作用也很重要,学习AOP你可以...