这个JavaScript立即调用模式的原因是什么？ [英] What is the reason for this JavaScript immediate invocation pattern?

问题描述

当查看 SlickGrid 源代码：

 （function（$）{
 var SlickEditor = {
 
 TextCellEditor：function（args）{
 ... 
}，
 
 LongTextCellEditor：function（args）{
 ... 
} 
}; 
 
 $ .extend（window，SlickEditor）; 
 
}）（jQuery）; 
  

如果我正确理解，它正在使用立即调用来定义各种函数对象，然后将它们合并到全局命名空间。

所以我可以像这样定义我的全局函数，它会产生相同的效果吧？

  function TextCellEditor（args）{
 ... 
} 
 
函数LongTextCellEditor（args）{
。 .. 
} 
  

唯一的区别是，在第一个版本中，我可以使用 $ 简写来引用 jQuery 对象。除此之外，在两种情况下，结果都是一样的。

我想知道我是否缺少一些东西。可能还有另一个很好的理由这样做？

更新：请注意，我意识到使用这种立即调用模式可以让使用在匿名函数中声明的私有变量。但是在这种情况下没有声明任何变量，并且函数也被注入到全局范围内。所以我仍然想知道是否有真正的区别。

一些答案​​指出，引用局部变量比引用全局变量要快得多。如果从 TextCellEditor（）构造函数中引用 $ ，这仍然是正确的。 $ 不是真正在本地的 TextCellEditor（），因为它在外部匿名函数的范围内定义。 p>

所有评论都赞赏。

解决方案

区别在于您正在创建一个当您使用自己调用的函数（如您所显示的那样）时，私有变量的本地范围。

这种类型的自调用函数通常称为闭包，是许多javascript模式，如模块模式： http：//www.employatelygood .com / 2010/3 / JavaScript-Module-Pattern-In-Depth

您可以在这里阅读有关JavaScript范围的更多信息： http://www.ertsatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting

传递jQuery vairable的原因是2折叠：

1：通过$调用它更为方便，因为它作为一个局部变量传入，我们可以确定$不是别的东西， p>

2：更快 - 局部变量比全局变量更快地访问和使用

作为示例看看下面的代码块：

  var public_and_global = true; 
 
（function（）{
 var private_and_local = true; 
 
 function local_func（）{
 //可以使用private_and_local以及public_and_global 
} 
 
}）（）; 
 
 function global_func（）{
 //只能使用public_and_global 
} 
  

I came across the following pattern when looking through the SlickGrid source code:

(function ($) {
  var SlickEditor = {

    TextCellEditor: function (args) {
      ...
    },

    LongTextCellEditor: function (args) {
      ...
    }
  };

  $.extend(window, SlickEditor);

})(jQuery);

If I understand this correctly, it is using immediate invocation to define various function objects and then merge them into the global namespace.

So I could just define my functions globally like this and it would have the same effect, right?

function TextCellEditor (args) {
  ...
}

function LongTextCellEditor (args) {
  ...
}

The only difference I can see is that in the first version, I can use the $ shorthand to refer to the jQuery object. Apart from that the result would be identical in both cases.

I would like to know if I am missing something. Maybe there is another good reason for doing things this way?

UPDATE: Please note, I realise that using this immediate invocation pattern allows for the use of private variables declared in the anonymous function. But there aren't any variables declared in this case and the functions are being injected into the global scope anyway. So I'd still like to know if there's any real difference.

Some answers pointed out that referencing local variables is much faster than referencing global variables. Does this still hold true if I reference $from within the TextCellEditor() constructor. $ is not really local to TextCellEditor() since it is defined in the scope of the outer anonymous function.

All comments appreciated.

解决方案

The difference is that you are creating a local scope for private variables when you use a self invoking function like the one you have shown.

That type of self invoking function is usually called a closure and is the basis of many javascript patterns like the module pattern: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

You can read more about javascript scoping here: http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting

The reason for passing the jQuery vairable in is 2 fold:

1: it's more convinient to call it via $ and since it was passed in as a local variable we can be sure that $ isn't something else

2: it's faster - local variables are much faster to access and work with than global variables

As an example take a look at the following chunk of code:

var public_and_global=true;

(function(){
  var private_and_local = true;

  function local_func() {
   //can use private_and_local as well as public_and_global
  }

})();

function global_func() {
   //can only use public_and_global
}

这篇关于这个JavaScript立即调用模式的原因是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！