javascript - 书上的demo，这里应该怎么理解呢？

问题描述

问 题

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

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

解决方案

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

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

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

这篇关于javascript - 书上的demo，这里应该怎么理解呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！