Question

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

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

我不太明白。为什么我不能这样做：

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

Answer 1

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

是简写版：

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

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

或者你可以等待body完成加载，但是这将包括等待图像，这需要更长时间才能加载。

说实话，you don't have to wait for document.ready。如果你知道DOM中存在元素，你可以继续使用$('#saySomething').click(...)：

<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（）函数。每个就绪块中的代码保持不变，直到达到就绪状态，然后按照添加的顺序执行代码。

Answer 3

第一个示例在页面完全加载后执行。第二个例子直接执行（可能会失败）。

所以，第一个是简写：

$(document).ready(function(){
  // Do something after the page is loaded.
});

Answer 4

这是“文档加载”的简写，他们也使用了带有$ aliased的简写“jQuery”来避免使用$符号与其他库冲突。

如果您不等待文档加载，事情就会变得无法预测/无法正常工作。此外，如果你有命名冲突，事情就会爆发。

Answer 5

对于更多信息，

$(function() {})是jQuerys文档就绪函数http://api.jquery.com/jQuery/#jQuery3和http://api.jquery.com/ready/的缩写

Answer 6

直接从docs

复制并粘贴

jQuery( callback )返回：jQuery

描述：绑定DOM完成时要执行的函数   负荷。
version added: 1.0jQuery( callback )

`callback` The function to execute when the DOM is ready.
此函数的行为与$(document).ready()类似，应该如此用于包装页面上依赖于其他$()操作的操作 DOM准备好了。虽然这个功能在技术上是可连接的，但在那里真的没有太多用于链接它。

请查看api

Answer 7

它取决于代码的上下文，但JavaScript中有一种通用的设计实践，用于在命名空间或模块模式中封装变量和方法。此代码可能是该意图的衍生物。

模块设计模式背后的原因可归结为全局变量的复杂性以及“破坏”的危险。

当同名的任何变量（或函数）被定义两次时，就会发生Clobbering。第二个定义将覆盖第一个，实质上是破坏它。

因此，将代码包装在一个构造中是一个经验法则，该构造将变量（和函数）与全局名称空间隔离开来。 Douglas Crockford很好地描述了这些类型的场景。

这个example显示了一个名为'closure'的略微更常见的化身：

var jspy = (function() {
    var _count = 0;

    return {
      incrementCount: function() {
        _count++;
      },
      getCount: function() {
        return _count;
      }
    };
})();

一开始很迷惑，但一旦你认识到它，它就变成了第二天性。关键是将_count变量封装为返回对象的私有成员，该对象具有两个可访问的方法。

这很强大，因为全局命名空间现在只包含一个var（jspy）而不是一个包含两个方法的var。它强大的第二个原因是它保证_count变量只能由两个方法中的逻辑访问（incrementCount，getCount）。

正如我所说，你的代码可能是这个经验法则的化身。

无论哪种方式，在JavaScript中了解这种模式都很重要，因为它为框架之间的更强大的交互打开了大门，例如，在AMD的异步加载中。

这是一个不错的namespace示例。

总之，有一个高级JavaScript设计模式可以帮助您了解，相关术语是模块模式，命名空间模式。其他相关术语是关闭和AMD。

希望有所帮助。祝一切顺利！纳什

Answer 8

此jQuery(function(){...}是jQuery(document).ready(function(){...})的缩略图。在DOM准备就绪时触发就绪事件，这样您就可以确定自己还没有访问尚未提供的内容。

另一方面，如果您像第二个代码段那样绑定click方法。该代码将立即执行，因此您需要确保在#saySomething声明后将其放置。

Answer 9

jQuery(function($) { ... });是在完全呈现和访问DOM（HTML）之前阻止代码执行的原因。

Answer 10

如果你的jquery不需要完全加载DOM，你可以安全地使用任何一种形式。要在执行jquery之前保证DOM已完全加载，请将您的jquery语句包装在$(function...中。

$(function(){ ...});是$(document).ready(function(){ ... });的快捷方式 https://stackoverflow.com/a/6454695/209942 http://jqfundamentals.com/chapter/jquery-basics

包含在$(function中的Jquery代码将不会被执行，直到所有HTML已完全解析到内存中并且文档已准备好与之交互。

如果在您的环境中，在渲染器到达您的jquery之前无法保证DOM完全加载，那么您必须将jquery包装在$(function中。

你也可以试试这个备用的DOM-ready表单，它使$是一个局部变量，以避免与可能使用$符号的其他变量发生冲突：

jQuery的（函数（$）{...}）; https://stackoverflow.com/a/6454701/209942

如果jquery代码未包含在$(function中，它会起作用吗？如果您的DOM已加载，那么是。 DOM加载取决于您加载JavaScript的方式。
How to call a JavaScript function when the external JavaScript file is referenced at the end of the HTML body?

请注意，其他类似的表单不会等待DOM呈现。它是一个立即执行的函数文字。它没有领先的$或领先的jquery，但确实有尾随的开放+关闭的parens：

（函数（）{...}）（）;

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

10 个答案: