现在在JavaScript匿名函数中使用`return function()`怎么办?(最佳实践)

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (238)

我最近看到了很多javascript代码,我觉得这是不对的。在这种情况下,我应该提出什么更好的代码模式?我将复制我所看到的代码,并对每个代码进行简短的描述:

代码块1

这段代码不应该计算内部函数。程序员会感到困惑,因为代码应该运行。

$(document).ready( function() { 
  return function() { 
    /* NOPs */
  }
});

代码块2

程序员可能打算实现一个自调用函数。他们没有完全完成实现(他们缺少一个()在嵌套的PARAN的末尾。此外,由于它们在外部函数中没有执行任何操作,所以嵌套的自调用函数可以被内联到外部函数定义中。

实际上,我不知道他们是否打算使用自调用函数,因为代码仍然是错误的。但他们似乎想要一个自调用函数。

$(document).ready( (function() { 
  return function() { 
    /* NOPs */
  }
}));

代码块3

同样,程序员似乎正在尝试使用自调用函数。然而,在这种情况下,这是过分的。

$(document).ready( function() { 
  (return function() { 
    /* NOPs */
  })()
}); 

代码块4

示例代码块

$('#mySelector').click( function(event) { 
  alert( $(this).attr('id') );

  return function() { 
    // before you run it, what's the value here?
    alert( $(this).attr('id') );
  }
});

我想我只是很沮丧,因为它会引起人们不理解的令人讨厌的bug,改变他们没有摸索的范围,并且通常会产生非常奇怪的代码。这些都是来自某个地方的一些教程吗?如果我们要教人们如何编写代码,我们能教他们正确的方式吗?

作为一个准确的教程,您会给他们什么建议来向他们解释他们使用的代码为什么是不正确的?你建议他们学习什么模式呢?


我看到的所有让我问这个问题的样本都是这样的。下面是我遇到的最新一段,展示了这种行为。您会注意到,我并没有发布到这个问题的链接,因为用户似乎是新手。

$(document).ready(function() {
 $('body').click((function(){
  return function()
  {
   if (counter == null) {
    var counter = 1;
   }
   if(counter == 3) {
     $(this).css("background-image","url(3.jpg)");
     $(this).css("background-position","10% 35%");
     var counter = null;
   }
   if(counter == 2) {
     $(this).css("background-image","url(2.jpg)");
     $(this).css("background-position","10% 35%");
     var counter = 3;
   }
   if(counter == 1) {
     $(this).css("background-image","url(1.jpg)");
     $(this).css("background-position","40% 35%");
     var counter = 2;
   }


  }
 })());
});

下面是我建议他们重写代码的方式:

var counter = 1;
$(document).ready(function() {
    $('body').click(function() {
        if (counter == null) {
            counter = 1;
        }
        if (counter == 3) {
            $(this).css("background-image", "url(3.jpg)");
            $(this).css("background-position", "10% 35%");
            counter = 1;
        }
        if (counter == 2) {
            $(this).css("background-image", "url(2.jpg)");
            $(this).css("background-position", "10% 35%");
            counter = 3;
        }
        if (counter == 1) {
            $(this).css("background-image", "url(1.jpg)");
            $(this).css("background-position", "40% 35%");
            counter = 2;
        }
    });
});

注意,我实际上并不是说我的代码在任何方面都更好。我只删除匿名中介函数。我其实知道为什么这段代码最初不做他们想做的事情,我也不想重写每个人的代码,但是我确实希望这个家伙至少有可用的代码。

提问于
用户回答回答于

你的第一个例子很奇怪。我甚至不确定这是否会按照作者的意图运作。第二种简单地将第一种包装在不必要的包装中。第三个使用自调用函数,尽管匿名函数创建了自己的作用域(可能还有闭包),但我不确定它有什么好处(除非作者在关闭中指定了其他变量 - 请继续阅读)。

自调用函数接受该模式,(function f () { /* do stuff */ }())并立即进行评估,而不是在调用时进行评估。所以像这样:

var checkReady = (function () {
    var ready = false;
    return {
        loaded: function () { ready = true; },
        test: function () { return ready; }
    };
}())
$(document).ready(checkReady.loaded);

创建一个封闭的绑定对象返回checkready的变量ready(这是隐藏的关闭外的一切)。这将允许您通过调用来检查文档是否已加载(根据jQuery)checkReady.test()。这是一个非常强大的模式,并且有很多合法用途(名称空间,记忆,元编程),但在您的示例中并不是必需的。

编辑:啊,我误解了你的问题。没有意识到你在呼唤糟糕的做法,而不是要求澄清模式。更多关于您问到的最终形式的问题:

(function () { /* woohoo */ }())
(function () { /* woohoo */ })()
function () { /* woohoo */ }()
用户回答回答于

匿名函数适用于:

  • 将逻辑传递给另一个函数
  • 声明一次性使用功能
  • 在不向范围添加变量的情况下声明一个函数
  • 为变量提供范围
  • 动态编程

可以在以下链接阅读有关这些主题的更多信息:JavaScript匿名函数

扫码关注云+社区