IIFE不适合准备好：

Question

我正在查看一段代码：

(function($) {    
   // other code here    
 $(document).ready(function() {   
    // other code here    
  });    
})(jQuery);

我虽然IIFE执行$（document）.ready的功能，这段代码是否正确？或者我可以删除$（document）.ready并将代码直接放在IIFE中。

Answer 1

不，IIFE不执行文档准备中的代码。

1。就在IIFE：

(function($) {
  console.log('logs immediately');
})(jQuery);

此代码会立即运行“立即记录日志”，而文档已准备就绪。

2.准备就绪：

(function($) {
   $(document).ready(function(){
     console.log('logs after ready');
   });
})(jQuery);

立即运行代码并等待文档就绪并记录“准备好后的日志”。

这可以更好地理解：

(function($) {
  console.log('logs immediately');
  $(document).ready(function(){
    console.log('logs after ready');
  });
})(jQuery);

在窗口加载后立即将“立即记录”记录到控制台，但只有在文档准备就绪后才会记录“准备好后记录”。

IIFE不适合准备好：

$(document).ready(function(){})的替代方案是：

$(function(){
   //code in here
});

更新

从jQuery 3.0版开始，就绪处理程序已更改。

Only the following form of ready handler is recommended.

jQuery(function($) {

});

Ready handler is now asynchronous.

$(function() {
  console.log("inside handler");
});
console.log("outside handler");

＆GT;外部处理程序

＆GT;内部处理程序

Answer 2

如果您需要准备DOM，则需要使用$(function() {/* DOM Manipulations goes here})
如果您想避免某种名称冲突，可以使用IIFE (function($) {/* safely use $ here*/}(jQuery))

你可以结合两种方法：

(function($) {
    /*Do smth that doesn't require DOM to be ready*/

    $(function() {
        /*Do the rest stuff involving DOM manipulations*/
    });

}(jQuery));

Answer 3

IIFE需要再创建一个范围。如果您删除IIFE并且$将不会被定义（即jQuery.noConflict()） - 您将收到错误消息。 <{1}}将定义带有库的javascript文件的所有位置。

所以这不是jQuery的最佳实践，它是一个javascript最佳实践。

JQuery最佳实践，在IIFE中使用$（document）.ready？

3 个答案:

1。就在IIFE：

2.准备就绪：

IIFE不适合准备好：

更新