为什么我在jQuery中封装了一个jQuery函数(function($){});

Question

我遇到了一段看起来像这样的代码:

jQuery(function($) {
  $('#saySomething').click(function() {
    alert('something');
  });
});

我不太清楚.为什么我不能简单地这样做:

$('#saySomething').click(function() {
   alert('saySomething');
});

Answer 1

jQuery(function ($) {...});

是速记版本:

jQuery(document).ready(function ($) {...});

如果您不等待document准备好,那么您绑定事件的元素将不会存在于dom中,并且事件实际上不会被绑定.

或者,您可以等待body已完成加载,但这将包括等待图像,这需要更长的时间来加载.

说实话,你不必等待document.ready.$('#saySomething').click(...)如果你知道DOM中存在元素,你可以继续使用:

<button id="saySomething>Say Something!</button>
<script>
    jQuery('#saySomething').click(...);
</script>

jQuery(function ($) {...});你应该知道的最后一个细微差别.的$在函数参数用于别名jQuery来$,这将允许您使用的$函数内的速记,而不必担心与其它库(如原型)的冲突.

如果您不等待,document.ready通常会看到IIFE用于别名jQuery:

(function ($) {
    $('#saySomething').click(...);
}(jQuery));

Answer 2

jQuery(function($) {

是一个快捷方式

jQuery(document).ready(function(){

这将等待文档处于构建DOM的"就绪"状态.您可以使用jQuery脚本完成整个页面,而不会遗漏任何元素.

但是 - 没有它你可以运行jQuery.如果脚本在头部,则存在选择尚未创建的元素的风险.我在我希望影响的元素之后立即在我的文档正文中使用了jQuery,以便尽快对它们进行操作.这是一个不寻常的案例,我通常不会这样做.

使用ready函数的另一个原因 - 您可以多次运行它.如果包含多个脚本或者包含有条件包含的代码,则可以使用多个ready()函数.保持每个就绪块中的代码,直到达到就绪状态,然后按照添加的顺序执行代码.