7

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

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

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

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

10 回答 10

17 
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 ($) {...});您应该知道最后一个细微差别。函数中的$参数用于别名jQueryto $，这将允许您$在函数内使用简写，而不必担心与其他库（例如原型）冲突。

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

(function ($) {
    $('#saySomething').click(...);
}(jQuery));
于 2012-06-13T14:26:56.253 回答
6 
jQuery(function($) {

是一个捷径

jQuery(document).ready(function(){

这会一直等到文档处于构建 DOM 的“就绪”状态。然后，您的 jQuery 脚本可以处理整个页面而不会错过任何元素。

但是- 你可以在没有它的情况下运行 jQuery。如果您的脚本在头脑中，则您冒着选择尚未创建的元素的风险。我在我想要影响的元素之后立即在我的文档正文中使用了 jQuery，以尝试尽快对它们进行操作。这是一个不寻常的案例，我通常不会这样做。

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

于 2012-06-13T14:27:01.337 回答
2

这将取决于代码的上下文，但在 JavaScript 中有一个常见的设计实践是在命名空间或模块模式中封装变量和方法。此代码可能是该意图的派生词。

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

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

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

这个例子展示了一个稍微更常见的化身，称为“闭包”：

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

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

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

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

正如我所说，您的代码可能是这个经验法则的体现。

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

这是一个很好的命名空间示例。

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

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

于 2012-06-13T14:42:43.350 回答
2

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

所以，第一个是简写：

$(document).ready(function(){
  // Do something after the page is loaded.
});
于 2012-06-13T14:27:02.120 回答
2

这是“文档加载”的简写，他们还使用了带有 $ 别名的简写“jQuery”，以避免使用 $ 符号与其他库发生冲突。

如果您不等待文件加载，事情可能会变得不可预测/不起作用。此外，如果您有命名冲突，事情就会简单地爆炸。

于 2012-06-13T14:27:12.197 回答
2

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

于 2012-06-13T14:27:17.873 回答
2

直接从文档复制并粘贴：

jQuery( callback )回报：jQuery

描述：绑定一个在 DOM 完成加载时要执行的函数。

version added: 1.0jQuery( callback )

`callback` The function to execute when the DOM is ready.

这个函数的行为就像$(document).ready()，因为它应该用于包装$()页面上依赖于准备好的 DOM 的其他操作。虽然从技术上讲，这个函数是可链接的，但链接它并没有太多用处。

请检查 api

于 2012-06-13T14:28:23.290 回答
1

这jQuery(function(){...}是jQuery(document).ready(function(){...}). Ready 事件在 DOM 准备就绪时触发，因此您可以确保您没有访问尚不可用的内容。

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

于 2012-06-13T14:29:27.157 回答
0

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

于 2012-06-13T14:27:22.883 回答
0

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

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

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

如果在您的环境中，DOM 不能保证在渲染器命中您的 jquery 之前完全加载，那么您必须将 jquery 包装在$(function.

您还可以尝试这种替代的 DOM 就绪形式，它使 $ 成为局部变量，以避免与可能使用 $ 符号的其他变量发生冲突：

jQuery(函数($){...}); https://stackoverflow.com/a/6454701/209942

如果 jquery 代码未包含在 中$(function，它会工作吗？如果您的 DOM 已加载，则可以。DOM 加载取决于您加载 javascript 的方式。
在 HTML 正文末尾引用外部 JavaScript 文件时如何调用 JavaScript 函数？

请注意，其他类似的表单不会等待 DOM 呈现。这是一个立即执行的函数字面量。它没有前导 $ 或前导 jquery，但有尾随 open+close 括号：

（功能（）{...}）（）;

于 2018-06-15T16:34:43.973 回答