Javascript 为什么我要将jQuery函数封装在jQuery中（函数（$）{}）；

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

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

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

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

是以下内容的简写版本：

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

如果不等待

文档

准备就绪，那么要绑定事件的元素将不存在于dom中，并且事件实际上也不会被绑定

或者，您可以等待

主体

完成加载，但这将包括等待图像，这需要更长的加载时间

说实话。您可以继续使用

$（'#saySomething'）。如果知道DOM中存在该元素，请单击（…）

：

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

这是一条捷径

jQuery(document).ready(function(){

这将一直等到文档处于“就绪”状态，在该状态下生成DOM。然后，jQuery脚本可以处理整个页面，并且不会遗漏任何元素

但是-您可以在不使用jQuery的情况下运行jQuery。如果脚本位于头部，则可能会选择尚未创建的元素。我已经在我想要影响的元素之后的文档正文中使用了jQuery，试图尽快对它们进行操作。这是一个不寻常的案例，我通常不会这样做

---

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

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

因此，第一个是以下的简写：

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

这是“文档加载”的简写形式，而且他们使用了带有$alias的长字体“jQuery”，以避免与使用$sign的其他库发生冲突

---

如果不等待文档加载，事情可能会变得不可预测/无法工作。另外，如果您有命名冲突，事情将完全崩溃。

$（function（）{}）

是jQuerys document ready函数的缩写，有关详细信息，请参见

jQuery（function（$）{…}）会阻止代码执行。
直接从以下位置复制和粘贴：

jQuery（回调）
返回：
jQuery

描述：绑定DOM完成时要执行的函数
装载

version added: 1.0jQuery( callback )

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

此函数的行为类似于
$（document）.ready（）
，因为它应该
用于在页面上包装依赖于
我准备好了。虽然从技术上讲，这个函数是可链接的，但是
用链子锁住它真的没有多大用处

请查看api
此
jQuery（function（）{…}
是
jQuery（document）.ready（function（）{…}）
的一个shorcut。当DOM准备就绪时，会触发ready事件，因此您将确保没有访问不可用的内容

另一方面，如果您像在第二个代码段上一样绑定click方法，那么代码将立即执行，因此您需要确保将它放在
#saySomething
声明之后。
这将取决于代码的上下文，但JavaScript中有一种封装变量和方法的常见设计实践在命名空间或模块模式中。
本规范可能是该意图的衍生产品

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

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

因此，经验法则是将代码封装在一个结构中，使变量（和函数）不受全局名称空间的影响

这显示了一种更常见的称为“结束”的化身：

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

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

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

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

正如我所说，您的代码可能是这一经验法则的化身

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

这里有一个很好的例子

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

希望有帮助。
祝你一切顺利！
Nash
如果jquery不需要完全加载DOM，则可以安全地使用任一表单。
要确保在执行jquery之前完全加载DOM，请将jquery语句包装在
$（函数…
）中

$（function（）{…}）；
是
$（document.ready（function（）{…}）；

用
$（函数
包装的Jquery代码在所有HTML完全解析到内存中并且文档准备好与之交互之前不会执行

如果在您的环境中，不能保证在呈现程序命中jquery之前完全加载DOM，那么您必须将jquery封装在
$（函数
）中

您还可以尝试使用这个备用的DOM就绪表单，它使$成为一个局部变量，以避免出现co
$(document).ready(function(){
  // Do something after the page is loaded.
});

version added: 1.0jQuery( callback )

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

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

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