Question

我的同事一直在他的代码中广泛使用IIFE（文件）.ready。现在，我已经阅读了这篇文章：

JQuery best practise, using $(document).ready inside an IIFE?

这让我想到我们是否应该在IIFE中使用$（document）.ready，或者在我的同事正在做的情况下反之亦然。

基本上，他的代码设置如下：

jQuery(function() {
    (function($) {
        //...
        // Code here
        //...
    })(jQuery);
});

他一般做得好吗？

Answer 1

有些人可能会认为这是风格/意见的问题，但如果你考虑在这种背景下IIFE的典型目标，我相信答案是是的，使用你的替代方式是可以接受的，但那里是一个潜在的缺点。

Wikipedia必须说：

立即调用的函数表达式可用于避免块内的变量提升，防止污染全局环境，同时允许公共访问方法，同时保留函数中定义的变量的隐私。

这两种方法都不会污染全局命名空间，因为它们不会声明任何变量。因此，使用任何一种方法都应该没问题。虽然注意它是部分冗余，因为ready事件的函数处理程序已经创建了一个新范围，并且还注意到最常见的做法是看到IIFE函数封装所有文件中的代码。

您的同事使用方式的一个缺点：如果您确实想要做一些不依赖于DOM准备的javascript逻辑，那么您不会有好处如果你把你的代码放在IIFE之外的话。所以像这样的东西是不安全的：

// Non-DOM-ready-required code here (NOT scope-safe)
jQuery(function() {
    (function($) {
        //...
        // DOM-ready-required code here
        //...
    })(jQuery);
});

使用共同风格为您提供完整的IIFE优势：

(function($) {
    // Non-DOM-ready-required code here (scope-safe)
    $(function() {
      //...
      // DOM-ready-required code here
      //...
    });
 })(jQuery);

Answer 2

在我看来，你的同事正在无缘无故地跳过额外的箍。我将忽略外部$(document).ready，因为它没有真正的后果。

/*jQuery(*/function() {
    (function($) {
        //...
        // Code here
        //...
    })(jQuery);
}/*);*/

使用IIFE作为jQuery回调的整个主体，不会在作用域隔离中带来额外的好处。这与代码

相同

/*jQuery(*/function() {

        //...
        // Code here
        //...

});

IIFE唯一做的就是允许您将jQuery引用为$。

现在，如果回调中有更多实质性代码，那么使用内部IIFE可能会有一些好处。在以下示例中，回调包含两个IIFE，

jQuery(function() {
    // IIFE
    (function($) {
        //...
        // Code here
        //...
    })(jQuery);
    // IIFE 2
    (function($) {
        //...
        // Code here
        //...
    })(jQuery);
});

并且IIFE的使用允许在两个代码块之间进行范围隔离。

回到主要问题：

这让我想到我们是否应该在IIFE中使用$(document).ready 我的同事在做什么，反过来也很好。

现在，说实话，我不明白为什么即使在查看你的link后，其中任何一项都应被视为最佳做法。回答的人从未解释 为什么 它应该是最佳做法。

看着

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

与

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

确实没有任何重大优势。正如在我之前的示例中一样，IIFE的使用不提供范围隔离优势，除了允许您通过jQuery引用$之外什么都不做。

但是，在实际的链接问题中，代码如下所示：

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

在这种情况下，IIFE 确实的目的是使other code here 1中使用的变量不会泄漏到全局范围。但这与$(document).ready()没有任何关系。将代码重组为

(function($) {    
   // other code here 1   
})(jQuery);

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

做同样的事情。

这个答案的道德之处在于，使用IIFE来包装松散的代码，这些代码还没有在函数内部给你带来好处，而包装已经在函数内部的代码并没有给你任何东西（除非你计算更改引用）。

IIFE在$（文件）.ready或其他方面

2 个答案: