【问题标题】:self executing function jquery vs javascript difference自执行函数 jquery 与 javascript 的区别
【发布时间】:2013-10-29 18:37:03
【问题描述】:

两者有什么区别-

第一:-

(function () {

    var Book = 'hello';

}());

第二:-

(function () {

    var Book = 'hello';

})();

第一个和第二个在工作方式上有些相似..

第三:-

(function ($) {

    var Book = 'hello';

})(jQuery);

我需要使用什么模式以及在我的编码中的什么位置。我在阅读与backboneJS 相关的文章时看到的第三个模块模式。

我从第三个“带有“jQuery”参数的自执行函数”中了解到的......

谁能给我一些关于立即调用函数表达式的想法(IIFE)

谢谢!!

【问题讨论】:

  • @Klaster 感谢您的编辑,是的,它确实与立即调用函数有关..
  • 为什么用backbone.js标记?

标签: javascript jquery iife


【解决方案1】:

在所有情况下,您都在执行匿名函数。我认为 1 与 2 相同。 在第三种情况下,您将 jQuery 作为参数传递。当您想将 jQuery 封装在函数的范围内时,就会这样做。

例如,在您的应用程序中,jQuery var 可以是 jQuery。但在您的匿名函数中,您可能希望将其用作 $。

(function ($) {
    //Here jQuery is $
    var Book = $(document.body).text();    

})(jQuery);

//Out of your function, you user jQuery as jQuery (in this example)
var Book = jQuery(document.body).text();

【讨论】:

    【解决方案2】:

    这称为闭包以避免与使用$ 的其他库(例如mootools)发生冲突。这样,您可以确保在该函数中使用$,并将jQuery 作为参数传递。

    (function ($) {
       $(function () { // Here in this block you can use '$' in place of jQuery
        .......
       });
    })(jQuery); //<----passing jquery to avoid any conflict with other libraries.
    

    【讨论】:

      【解决方案3】:

      立即调用函数表达式 (IIFE) 是 JavaScript 的核心功能之一。它的主要目的是不要用一次性函数和变量来混淆命名空间。

      如果您只使用一次变量或函数,则无需使其可用于其余代码(例如,您可以进行私有访问)。如果是函数,你可以让它们匿名,就像下面这样:

      (function(){
        console.log("Hello symfony world!");
      }());
      

      Please check with this link

      还有一个有用的explanatory video 不到 7 分钟

      【讨论】:

      • 在提供的链接中有很好的解释!
      • 上面的链接坏了。这是更正的链接Introduction to IFFEs
      【解决方案4】:

      正如其他答案指出的那样,它们都是自执行匿名函数或立即匿名函数。

      第三个例子用于为函数外的变量创建别名。这是防止名称冲突和创建可以轻松更改函数中使用的模块的代码的好方法。它本质上是一种依赖注入。

      (function (doc, win, $, myModule) {
          // Code
      }(document, window, jQuery, window.MYAPP.myModule));
      

      docwin$myModule 是注入变量。使用这种模式,更改任何注入的组件都是微不足道的。像这样

      (function (doc, win, $, myModule) {
          // Code
      }(document, window, jQuery, window.MYAPP.myModule2)); //Use myModule2 instead myModule
      

      【讨论】:

        【解决方案5】:

        就像其他答案所说的那样,在第三个函数中,您将 JQuery 传递给该函数。

        我想花点时间解释一下为什么前两个是一样的。

        当您创建一个函数时,该函数的名称实际上是 function pointer. 例如,在 function foo(){} 中,foo 是指向您刚刚创建的函数的指针(它解释了诸如 this 之类的东西) .您可以通过在函数名称末尾添加括号来取消引用该指针(并因此执行函数):foo()

        因此,如果我们再次查看该代码,在第一,首先创建函数:

        function () {
        
            var Book = 'hello';
        
        }
        

        然后你取消引用它,有效地执行函数:()

        在第二个示例中,您将整个函数创建括在括号中:

        (function () {
        
            var Book = 'hello';
        
        })
        

        这确保您在下一个命令之前执行创建操作,即再次取消引用该函数:()。在这种情况下,括号并不是必需的,因为无论如何都会在执行之前创建函数。

        【讨论】:

          【解决方案6】:

          所有三个示例都是立即调用函数表达式 (IIFE)。

          唯一的区别是,在第三个示例中,jQuery 作为变量传入,允许您在 IIFE 中使用其美元命名约定来使用它。例如

          (function ($) {
            var Book = 'hello';
            $('#bookelement').html(Book);
          })(jQuery);
          

          【讨论】:

            【解决方案7】:

            这些都是自执行函数。现在也称为立即调用函数表达式 (IIFE)。

            前两个完全相同,语法略有不同,第三个是将 parameter 作为 jQuery 对象传递。

            【讨论】:

            • 我已经添加了这些信息,并且我知道了.. 而不是它们之间有什么区别...
            【解决方案8】:

            事实上,这三个都是自执行函数,具体取决于你需要做什么。

            唯一的区别是3之间。1和2是一样的。

            与 3 的区别在于您将 jquery 的引用作为参数传递。现在这个 annoyomus 函数中的所有函数都可以访问 jque

            【讨论】:

              【解决方案9】:

              所有这些都是自调用函数的示例。

              这将使您清楚地看到:-

              var my_func = function(){
                  var internal_var = "Hello";
                  return internal_var;
              };
              
              var my_func2 = function(name){
                  var internal_var = "Hello";
                  return internal_var;
              };
              
              var long_var_name = "I can be some object or number or object or array";
              
              var result1 = (my_func());
              var result2 = (my_func)();
              var result3 = (my_func2)(long_var_name);
              
              console.log(result1, result2, result3);
              

              使用此示例,您可以将其与 FirstSecondThird 方法进行比较。

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 2019-11-06
                • 1970-01-01
                • 1970-01-01
                • 2014-09-08
                • 2012-03-15
                • 1970-01-01
                相关资源
                最近更新 更多