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

How to wrap a function in a function to avoid code repetition

本文关键字：函数 代码 包装      更新时间：2023-09-26

在本例中使用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，我把它们作为函数。然后，我简单地对包装器函数（即那些未绑定到侦听器的函数）进行"标准"调用"立即调用函数表达式"。

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

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();
相关文章：