JQuery最佳实践,在IIFE中使用$(document).ready？

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);

此代码立即运行"立即记录日志",而文档已准备就绪.

准备好了:

(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版开始,就绪处理程序已更改.

建议只使用以下形式的就绪处理程序.

jQuery(function($) {

});

Ready处理程序现在是异步的.

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

>外部处理程序

>内部处理程序

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));