关于javascript:!function(){}()vs(function(){})()

!function(){ }() vs (function(){ })()

在查看Twitter Bootstrap Javascript中编写的一些代码时,看起来他们正在调用立即调用的匿名函数,如下所示:

1
2
3
4
5
!function( $ ) {

     ...

}(window.jQuery || window.ender);

我传统上看到过这样的事情:

1
2
3
4
5
(function($) {

    ...

})(window.jQuery || window.ender);

第一种方式似乎有点hacky,我不确定这样做是否有任何好处或理由,而不是第二种方式? 请注意,我理解它是如何工作的,我希望了解为什么他们选择这种方式来做到这一点。


  • 缩小时少一个角色。
  • !应该处理此前其他JavaScript代码连接的位置,并且没有尾部分号。

没有太大的区别。我会使用你更舒服的任何东西。你可能应该在你的例子开头扔东西以避免......

base.js

1
2
3
var lol = function() {
   alert(arguments[0]);
}

IM-CONCAT到base.js

1
2
3
(function() {
    // Irrelevant.
})();

的jsfiddle。

折腾领先的;她工作......

的jsfiddle。

...或者像Twitter Bootstrap一样的! ......

的jsfiddle。


他们既是克服语法模糊性的两种方式。两者都不比另一个更"hacky"。这只是一种风格选择。

你也可以这样做:

1
2
3
0 + function( $ ) {
  // ...
} ( window.jQuery || window.ender );

要么:

1
2
3
parseInt(function( $ ) {
  // ...
} ( window.jQuery || window.ender ) );


除了!undefined的评估步骤,您还可以使用void运算符来消除歧义:

1
2
3
void function($) {
     ...
}(window.jQuery || window.ender);

对它有一种C质量;-)


我还没有看到的一个答案是它避免用括号包围你的整个函数。除了美学考虑之外,对于一些使用括号来确定线条缩进程度的编辑来说,这可能是一个加分。