Question

在这个例子中使用jQuery，虽然这应该与答案无关。

我在页面加载时触发了两个事件：

triggerEvent(SNVisitsForm); 
$('#email').blur(triggerEvent(SNEnterEmail));

第一个只是在用户访问页面时触发，另一个是在用户模糊电子邮件字段时将触发的侦听器。

triggerEvent是一个函数，我用它来用一个简单的条件“包装”许多不同的函数。目标是让这个条件能够包装任意函数：

function triggerEvent(wrapped_function) {
if (typeof _cookie !== 'undefined') {
        wrapped_function();
        console.log('Doing the event, because the cookie is defined');
    }
}

该函数适用于两个示例中的第一个（即，{triggerEvent(SNVisitsForm);完美地运行）。

但是，因为SNEnterEmail开头是这样的：

function SNEnterEmail(event) {
    var email = event.target.value;

我需要通过包装函数将事件传递给包装函数。如您所见，有时事件不存在（如两个示例中的第一个例子）。

有更多的“javascript”方式吗？当然答案不是“只是将条件代码放在需要它的每一个调用中”或“将它放入需要它的每个函数中”。什么是javascript批准的方法来实现这种避免重复？

编辑：我应该补充一点，答案可能与在函数中包装函数完全不同。这是我能想到的最好的方式来说明我想要做的事情。

接受的答案如何解决这个问题：

我确实使用了adrian的包装函数，然后快速修改我的调用使一切正常工作：

if (window.location.pathname == '/') {
    (triggerEvent(SNVisitsForm)()); 
}
$('#email').blur(triggerEvent(SNEnterEmail));

我不确定为什么adrian将包装的函数更改为vars，我将它们保留为函数。然后我简单地对包装函数进行“标准”调用（即那些未绑定到侦听器的函数）立即调用函数表达式。

Answer 1

只需创建一个返回函数的函数装饰器。关闭将照顾其余的。

function triggerEventWrapper(wrapped_function) {
 return function(){
   if (typeof _cookie !== 'undefined') { 
      console.log('Doing the event, because the cookie is defined');
      return wrapped_function.apply(this,arguments);
     }
 }
}


var SNEnterEmail = triggerEventWrapper(function(){
   ...... the function decloration
});
$('#email').blur(SNEnterEmail);


var  SNVisitsFormWrapped = triggerEventWrapper(SNVisitsForm); 
SNVisitsFormWrapped();

如何在函数中包装函数以避免代码重复

1 个答案: