现在javascript匿名函数中的`return function()`有什么用？(最佳实践)

Question

注意:已更新并已重写

此问题已重做并更新.请原谅下面的过时参考.谢谢.

我最近看到很多javascript代码看起来对我不对.在这种情况下,我应该建议什么是更好的代码模式？我将重现我见过的代码和每个代码的简短描述:

代码块#1

此代码永远不应评估内部函数.程序员会感到困惑,因为代码应该运行.

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

代码块#2

程序员可能打算实现自调用功能.他们没有完全完成实现(他们在()嵌套paren的末尾错过了一个.另外,因为他们没有在外部函数中做任何事情,嵌套的自调用函数可能只是内联到外部函数定义.

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

$(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') );
  }
});

评论:

我想我只是感到沮丧,因为它会导致人们不理解的蠕变错误,改变范围,他们不会徘徊,并且通常会产生非常奇怪的代码.这一切都来自某些教程吗？如果我们要教人们如何编写代码,我们能以正确的方式教他们吗？

您会建议哪些准确的教程向他们解释为什么他们使用的代码不正确？你建议他们学习什么模式？

---

我见过的所有样本都让我问这个问题已经问过了.这是我遇到的最新特定代码段,展示了这种行为.您会注意到我没有发布问题的链接,因为用户似乎非常新手.

$(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;
        }
    });
});

请注意,我实际上并没有说我的代码在任何方面都更好.我只是删除了匿名中介功能.我实际上知道为什么这段代码最初没有做他们想要的东西,而且我不是在重写每个人的代码,但我确实希望这个代码至少有可用的代码.

我认为一个真正的代码样本将不胜感激.如果你真的想要这个特定问题的链接,请在这个昵称gmail我.他得到了几个非常好的答案,其中我最好是中年级.

Answer 1

你的第一个例子很奇怪.我甚至不确定这是否会像作者可能想要的那样起作用.第二个简单地将第一个包裹在不必要的parens中.第三个使用自调用函数,但是因为匿名函数无论如何都创建了自己的范围(可能还有闭包),我不确定它有什么好处(除非作者在闭包中指定了其他变量 - 请继续阅读).

自调用函数接受模式(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().这是一个非常强大的模式,有很多合法用途(命名空间,memoization,元编程),但在你的例子中并不是必需的.

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

(function () { /* woohoo */ }())
(function () { /* woohoo */ })()
function () { /* woohoo */ }()

评估大致相同的事情 - 但第一种形式最不可能产生任何意想不到的后果.