!function ($) { $(function(){ }) }(window.jQuery) 的作用是什么?

2023-11-29

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


 $("[rel=tooltip]").tooltip()    
in application.js , unless I retain, the following piece of code used in bootstrap docs, my tooltips don't initialize.


!function ($) {

  $(function(){  

  })

}(window.jQuery)
  

上面的代码做了什么?


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

function () {
}()

或者经常写成

(function () {
})()

Is a self-invoking anonymous函数,也称为立即调用函数表达式 (IIFE)。它立即内联执行匿名函数。

阅读更多相关信息,请访问解释封装的匿名函数语法.

匿名函数是一个强大的功能,并且具有范围界定(“变量名称间距”)等优点,请参阅javascript 中自执行函数的目的是什么?.


现在他们正在使用

function ($) {

}(window.jQuery)

让我们跳过!目前。

所以他们路过,window.jQuery进入该函数作为参数并接受为$.

这是做什么的$的别名window.jQuery(原始 jQuery 对象),因此确保$将始终参考jQuery object里面closure,无论其他图书馆是否采用了该方法($) 外部。

因此,您在该闭包内编写的代码使用$永远会起作用。

另一个好处是$作为匿名函数中的参数,这使得它更接近于scope chain因此 JS 解释器花费更少的时间来找到$闭包内的对象比我们使用全局的对象要多$.


$(function(){  

})

您可能已经知道,它是 jQuery 的文档就绪块,它确保此函数内的代码将在以下情况下运行:dom is ready,因此所有event binding's将正常工作。

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

那是什么!确实已经得到了很好的解释here or at 函数前面的感叹号有什么作用?

简而言之:

为了展示的好处!,让我们考虑一个案例,

(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 error. !修复此类错误。会发生什么!。我引用了上面答案链接中的内容。

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

这强制将函数计算为表达式,其中 允许立即内联调用它。

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

!(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>

作为浏览器,顺序解释标记,它一遇到它就会执行js代码。当它执行这里的JS块时,它还没有解析a rel="tooltip"标签还没有出现,因为它出现在 JS 块之后,所以它们当时不在 DOM 中。

所以对于上面的情况$("[rel=tooltip]")为空,因此工具提示不起作用。因此将所有 JS 代码放入其中始终是安全的document ready块状

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

!function ($) { $(function(){ }) }(window.jQuery) 的作用是什么? 的相关文章

随机推荐