什么!功能($){$(功能(){})}(window.jQuery)做什么?

我使用twitter引导来创建一个网站,并试图初始化工具提示。 除了添加如下内容:

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

!function ($) {

  $(function(){  

  })

}(window.jQuery)

上面的代码是做什么的?


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

function () {
}()

或者经常写成

(function () {
})()

是一个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/

那是什么! 在这里或者在这个函数之前,感叹号做了什么?

简而言之:

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

(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错误。 ! 修复这种或错误。 发生了什么! 。 我引用上述答案链接中的内容。

当你使用!时,函数变成一元(逻辑)非运算符的单一操作数。

这迫使函数被评估为一个表达式,这可以立即以内联方式调用它。

这解决了上述问题,我们可以用上面的块重写! 喜欢

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


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

对于你的情况,你可以简单地把你的工具提示代码放在文档就绪区块内

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

它会正常工作。

如果你只是使用$("[rel=tooltip]").tooltip()而没有任何doc ready block ,那么这段代码就有机会运行,DOM中没有任何带rel=tooltip元素。 所以$("[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
});

希望这一切对你有意义。

链接地址: http://www.djcxy.com/p/96897.html

上一篇: What does !function ($) { $(function(){ }) }(window.jQuery) do?

下一篇: what does `!function()` mean?