javascript - 书上的demo,这里应该怎么理解呢?
阿神
阿神 2017-04-11 13:15:18
[JavaScript讨论组]

这是装饰者模式。。话说有点蒙

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();?

阿神
阿神

闭关修行中......

全部回复(3)
PHPz

首先,你要清楚「装饰者模式」的含义:以对客户透明的方式动态地给一个对象附加上更多的责任,装饰者模式相比生成子类可以更灵活地增加功能。

然后,你给出的代码含义是,无论电话输入框 tel_input 有没有绑定事件,在不影响原有功能基础上,再额外给它加上 fn() 事件,这也正是「装饰者模式」的意义所在。

所以,如果电话输入框 tel_input 原本就有 oldClickFn() 事件,则给它加多一个 fn() 事件,如果它原本没有绑定事件,则只需要执行 fn() 事件即可。

巴扎黑

oldClickFn()是以前注册的点击事件 fn()是你新增的事件操作

PHP中文网

1、这函数怎么理解呢?

这个函数是对传入的元素 input 添加点击时触发的函数 fn

2、为什么执行了oldClickFn();还要执行fn();?

首先我们需要知道

input.onclick = function() {...}

会为 input 元素添加一个函数,该函数会在 onclick 事件触发时被执行,并且假如之前已有函数绑定在 input 元素上,旧的函数会被新的函数给覆盖掉;

理解这个后,我们就知道需要先判断是否已有函数绑定在 input 元素的 onclick 事件上了,如果有,我们将它缓存起来,也就是 oldClickFn 这个函数,然后用一个新的函数绑定到这个 input 元素的 onclick 事件,这个新的函数会调用执行旧的函数 oldClickFn 和新传入的函数 fn,从而避免多次绑定覆盖掉旧的绑定事件函数。

3、备注

这种实现方式就是所谓的 装饰者模式,它在不改变事物本质的前提下为事物添加更多的功能。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号