什么！function($){$(function(){})}(window.jQuery)呢？


What does !function ($) { $(function(){ }) }(window.jQuery) do?

我正在使用twitter bootstrap创建一个站点，并试图初始化工具提示。 除了在application.js中添加类似：

1
 $("[rel=tooltip]").tooltip()

之外，除非我保留，在bootstrap文档中使用以下代码，我的工具提示不会初始化。

1
2
3
4
5
6
7
!function ($) {

  $(function(){  

  })

}(window.jQuery)

上面的代码是做什么的？

让我们解释一下破解代码

1
2
function () {
}()

或者经常写成

1
2
(function () {
})()

是self-invoking anonymous函数，也称为立即调用函数表达式(IIFE)。其中立即执行内联匿名函数。

在解释封装的匿名函数语法中阅读更多相关内容。

匿名函数是一个强大的功能，并且具有诸如范围("变量名称间距")之类的好处，请参阅javascript中自执行函数的用途是什么？

现在他们正在使用

1
2
3
function ($) {

}(window.jQuery)

我们暂时跳过!。

所以他们将window.jQuery传递给该函数作为参数并接受为$。

这样做是为了使$成为window.jQuery(原始jQuery对象)的别名，从而确保$始终引用closure内的jQuery object，无论其他库是否已经采用(x3>) $)外面。

因此，使用$在该闭包内编写的代码将始终有效。

另一个好处是$作为匿名函数中的一个参数，它使它在scope chain中更接近，因此JS解释器在闭包内找到$对象所花费的时间比其他方式花费的时间少。如果我们使用全局$。

1
2
3
$(function(){  

})

它是你可能已经知道的jQuery的文档就绪块，它确保此函数内的代码将在dom is ready时运行，因此所有event binding's都能正常工作。

更多信息，请访问http://api.jquery.com/ready/

那个!做了什么在这里得到了很好的解释，或者在感觉标记之前做了什么？

简而言之：

为了证明!的好处，让我们考虑一个案例，

1
2
3
4
5
6
7
8
(function() {
    alert('first');
}())


(function() {
    alert('second');
}())

如果您在console中粘贴上述代码，您将收到两个警报，但之后您将收到此错误

1
TypeError: undefined is not a function

为什么会这样？让我们模拟JS引擎如何执行上面的代码块。它执行此匿名函数function() {alert('first');}()显示警报，并且当它返回()内没有返回任何undefined时。第二个功能也是如此。所以在执行这个块后，它最终会有类似的东西

1
(undefined)(undefined)

因为它的语法就像一个self-invoking anonymous函数，它试图调用该函数，但第一个，(undefined)不是函数。所以你得到undefined is not a function错误。 !修复了这种或错误。 !会发生什么。我引用了上面回答链接中的行。

When you use !, the function becomes the single operand of the unary
(logical) NOT operator.

This forces the function to be evaluated as an expression, which
allows it to be invoked immediately inline.

这解决了上面的问题，我们可以用!重写上面的块

1
2
3
4
5
6
7
8
!(function() {
    alert('first');
}())


!(function() {
    alert('second');
}())

对于您的情况，您可以简单地将工具提示代码放在文档就绪块中

1
2
3
$(function(){  
    $("[rel=tooltip]").tooltip();  
});

它会工作正常。

如果你只使用$("[rel=tooltip]").tooltip()而没有任何doc ready block，那么这个代码就有可能运行，但是在DOM中没有任何带有rel=tooltip的元素。所以$("[rel=tooltip]")将返回一个空集，tooltip将不起作用。

没有doc ready block时无法工作的示例标记，

1
2
3
4
5
6
7
8
9
10
11
12
13
.
.
.
<script type="text/javascript">
    $("[rel=tooltip]").tooltip();

.
.
.
.
Something
Something
Something

作为浏览器，按顺序解释标记，它将在面对它时立即执行js代码。当它在这里执行JS块时，它尚未解析a rel="tooltip"标签，因为它出现在JS块之后，所以它们当时不在DOM中。

因此，对于上述情况，$("[rel=tooltip]")为空，因此工具提示将不起作用。所以将所有JS代码放在document ready块中总是安全的

1
2
3
$(function){
    // put all your JS code here
});

希望这一切现在对你有意义。

相关讨论