javascript - IIFE inside $(document).ready 或相反

Question

我的同事一直在他的代码中广泛使用 IIFE inside (document).ready。现在，我已经阅读了这篇文章:

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

这让我开始思考我们是应该在 IIFE 中使用 $(document).ready 还是像我的同事那样反过来也行。

基本上，他的代码是这样设置的:

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

他做的事情总体上还好吗？

Answer 1

有些人可能会争辩说这是风格/意见的问题，但是如果您在这种情况下考虑 IIFE 的典型目标，我相信答案是是的，使用您的替代方式是可以接受的，但是是一个潜在的缺点。

Wikipedia不得不说:

Immediately-invoked function expressions can be used to avoid variable hoisting from within blocks, protect against polluting the global environment and simultaneously allow public access to methods while retaining privacy for variables defined within the function.

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

---

您同事使用的方式的一个缺点:如果您确实想执行一些不依赖于 DOM 准备就绪的 javascript 逻辑，那么您将不会享受到IIFE 如果您将代码放在 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);