这是装饰者模式。。话说有点蒙
var decorator = function ( input , fn ) {
// 获取事件源
var input = document.getElementById(input);
// 若事件源是已经绑定的事件
if ( typeof input.onclick === 'function' ) {
// 缓存事件原有的回调函数
var oldClickFn = input.onclick;
// 为事件源添加新的事件
input.onclick = function () {
// 事件源原有回调函数
oldClickFn();
// 执行事件源新增回调函数
fn();
}
} else {
// 事件源未绑定事件,直接为事件源添加新增回调函数
input.onclick = fn;
}
};
// 电话输入框功能装饰
decorator( 'tel_input' , function () {
document.getElementById( 'tel_demo_text' ).style.display = 'none' ;
} )
这函数怎么理解呢?为什么执行了oldClickFn();还要执行fn();?
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
首先,你要清楚「装饰者模式」的含义:以对客户透明的方式动态地给一个对象附加上更多的责任,装饰者模式相比生成子类可以更灵活地增加功能。
然后,你给出的代码含义是,无论电话输入框
tel_input有没有绑定事件,在不影响原有功能基础上,再额外给它加上fn()事件,这也正是「装饰者模式」的意义所在。所以,如果电话输入框
tel_input原本就有oldClickFn()事件,则给它加多一个fn()事件,如果它原本没有绑定事件,则只需要执行fn()事件即可。oldClickFn()是以前注册的点击事件 fn()是你新增的事件操作
1、这函数怎么理解呢?
这个函数是对传入的元素 input 添加点击时触发的函数 fn
2、为什么执行了oldClickFn();还要执行fn();?
首先我们需要知道
会为 input 元素添加一个函数,该函数会在 onclick 事件触发时被执行,并且假如之前已有函数绑定在 input 元素上,旧的函数会被新的函数给覆盖掉;
理解这个后,我们就知道需要先判断是否已有函数绑定在 input 元素的 onclick 事件上了,如果有,我们将它缓存起来,也就是 oldClickFn 这个函数,然后用一个新的函数绑定到这个 input 元素的 onclick 事件,这个新的函数会调用执行旧的函数 oldClickFn 和新传入的函数 fn,从而避免多次绑定覆盖掉旧的绑定事件函数。
3、备注
这种实现方式就是所谓的 装饰者模式,它在不改变事物本质的前提下为事物添加更多的功能。