61

我正在使用 twitter bootstrap 创建一个站点并尝试初始化工具提示。除了添加以下内容：

$("[rel=tooltip]").tooltip()
在 application.js 中，除非我保留引导文档中使用的以下代码，否则我的工具提示不会初始化。

!函数 ($) {

  $(函数(){  

  })

}（窗口.jQuery）

上面的代码是做什么的？

4

1 回答 1

164

让我们通过分解代码来解释

function () {
}()

或常写为

(function () {
})()

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

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

匿名函数是一项强大的功能，并且具有范围限定（“变量名称间距”）等优点，请参阅What is the purpose of a self execution function in javascript? .

现在他们正在使用

function ($) {

}(window.jQuery)

让我们暂时跳过!。

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

它的作用是$为（原始 jQuery 对象）创建一个别名window.jQuery，从而确保无论其他库是否将 that( ) 带到外部，$都将始终引用jQuery objectthat 的内部。closure$

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

另一个好处是$作为匿名函数中的一个参数，这使它更接近于 ，scope chain因此 JS 解释器$在闭包内找到对象所需的时间比使用 global 时要少$。

$(function(){  

})

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

在http://api.jquery.com/ready/阅读更多内容

!在这里或在函数前的感叹号做什么？

简而言之：

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

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


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

如果你把上面的代码粘贴进去console，你会得到两个警报，但是你会得到这个错误

TypeError: undefined is not a function

为什么会发生这种情况？让我们模拟一下 JS 引擎是如何执行上述代码块的。它执行这个匿名函数function() {alert('first');}()会显示警报，并且当它返回时，不会undefined在(). 第二个功能也是如此。所以在这个块执行之后，它最终会得到类似的东西

(undefined)(undefined)

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

当您使用 ! 时，该函数将成为一元（逻辑）NOT 运算符的单个操作数。

这会强制将函数作为表达式求值，从而允许立即内联调用它。

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

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


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

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

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

它会正常工作。

如果你只是$("[rel=tooltip]").tooltip()不使用 any doc ready block，那么当这段代码运行时，rel=tooltipDOM 中还没有任何元素。所以$("[rel=tooltip]")将返回一个空集并且tooltip不起作用。

一个示例标记，如果没有它就无法工作doc ready block，

.
.
.
<script type="text/javascript">
    $("[rel=tooltip]").tooltip();
</script>
.
.
.
.
<a href="#" rel="tooltip">Something</a>
<a href="#" rel="tooltip">Something</a>
<a href="#" rel="tooltip">Something</a>

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

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

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

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

于 2012-06-05T12:02:16.460 回答