代码说明

Question

为什么要像这样编写代码Jquery？

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

Answer 1

这称为闭包，以避免与使用$的其他库发生冲突。这样，您可以确保在该函数中使用$并将jQuery作为参数传递。

(function ($) {
   $(function () {
    .......
   });
})(jQuery); //<----passing jquery to avoid any conflict with other libraries.

来自docs：

最佳做法是将jQuery传递给IIFE（立即调用的函数表达式），将其映射到美元符号，以便在执行范围内不被其他库覆盖。

This is generally used to author plugins. Read out more here

Answer 2

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

这指定了一个函数在DOM完全加载时执行。传递给.ready（）的处理程序保证在DOM准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。使用依赖于CSS样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素很重要。 Read more
(function(){ ... })();

当浏览器解释您的ecma-/javascript时，这是一个自行调用的功能。因此，您不太可能在此DOM elements成功采取行动。它将在Javascript中遇到后立即执行。

代码说明

(function ($) { <--  $ is just an alias for jQuery
    $(function () {
     .......  <--- Here you can use the $ without an issue.
    });
})(jQuery); <--- This is done usually to avoid conflicts. Passing jQuery object here

如果你看一下jQuery核心。它说

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

jQuery.noConflict()

Answer 3

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

这种类型的模块模式在那里非常常用。它调用自身传递对jQuery的引用，提供对变量的更快访问，因为它现在位于函数的范围内，并且还可以防止全局污染。

第二个：

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

加载DOM后运行匿名函数，确保在执行任何代码之前一切准备就绪。

Answer 4

其他一些库也使用$作为变量名，因此为了确保您使用jQuery而不是其他lib var，您将把它传递给函数并在该范围内将其命名为$。

(function ($) { //<--- naming jQuery to $
   $(function () {//now we are sure that we are using $  as jQuery  
    .......
   });
})(jQuery); //<----passing jquery .

为什么要像这样编写代码Jquery

4 个答案:

来自docs：

This is generally used to author plugins. Read out more here

代码说明