Question

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

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

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

!function ($) {

  $(function(){  

  })

}(window.jQuery)

以上代码的作用是什么？

Answer 1

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

function () {
}()

或经常写成

(function () {
})()

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

在Explain the encapsulated anonymous function syntax了解详情。

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

现在他们正在使用

function ($) {

}(window.jQuery)

我们暂时跳过!。

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

这样做会使$成为window.jQuery（原始jQuery对象）的别名，从而确保$始终引用jQuery object内的closure $ 1}}，无论其他图书馆是否已将其（$）置于外部。

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

另一个好处是scope chain作为匿名函数中的一个参数，它使$更接近，因此JS解释器找到$的时间更短如果我们使用全局$(function(){ })。

，那么闭包内的对象比其他情况下的对象要多

dom is ready

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

在http://api.jquery.com/ready/

了解详情

!所做的事情得到了很好的解释here或What does the exclamation mark do before the function?

简而言之：

为了证明(function() { alert('first'); }()) (function() { alert('second'); }())的好处，让我们考虑一个案例，

console

如果您将以上代码粘贴到TypeError: undefined is not a function中，您将收到两条提醒，但之后您会收到此错误

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

为什么会这样？让我们模拟JS引擎如何执行上面的代码块。它执行此匿名函数undefined显示警报，并且当它返回()内没有返回(undefined)(undefined)时。第二个功能也是如此。因此，在执行此块之后，它最终会出现类似

的内容

self-invoking anonymous

由于它的语法类似于(undefined)函数，它会尝试调用该函数，但第一个undefined is not a function不是函数。所以你得到!错误。 !修复此类错误。 !会发生什么。我引用了上面回答链接中的行。

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

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

这解决了上述问题，我们可以使用!(function() { alert('first'); }()) !(function() { alert('second'); }())重写上面的块，如

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

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

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

它会正常工作。

如果您只使用doc ready block而没有任何rel=tooltip，则此代码有可能会运行，但DOM中没有任何带$("[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>，

时无效的示例标记

a rel="tooltip"

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

因此，对于上述情况，document ready为空，因此工具提示无效。所以将所有JS代码放在$(function){ // put all your JS code here });块中就像

一样安全

{{1}}

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

什么！function（$）{$（function（）{}）}（window.jQuery）呢？

1 个答案: