像这样初始化 jQuery 有啥好处？

Posted 2023-05-07

【中文标题】像这样初始化 jQuery 有啥好处？

【英文标题】：What is the benefit to initializing jQuery like this?像这样初始化 jQuery 有什么好处？

【发布时间】：2017-09-14 21:14:18

【问题描述】：

我目前正在阅读 Greg Franko 关于“jQuery 最佳实践”的博客文章。

在他早期的幻灯片中，他解释了典型/更好/最好的做事方式。

典型 (link)

$("document").ready(function() 
    console.log('hello world');
);

或

$(function() 
    console.log('hello world');
);

更好 (link)

(function($, window, document) 
    $(function() 
        console.log('hello world');
    );
 (window.jQuery, window, document));

最佳 (link)

(function(yourcode) 
    yourcode(window.jQuery, window, document);
(function($, window, document) 
    $(function() 
        console.log('hello world');
    );
));

所以我想我的问题是 - 是什么让第三个示例比第二个示例更好？两者都是IIFE。我看到的唯一区别是#2 将 jQuery 对象（+ 窗口 + 文档）传入 IIFE 并运行代码，然后 #3 传入 jQuery 对象（+ 窗口 + 文档）AND将 javascript 代码放入 IIFE。这样做有什么好处？

【问题讨论】：

这里有一点信息：gregfranko.com/blog/jquery-best-practices

谢谢！这就说得通了。我无法理解它可能只是为了可读性。 :)

在此感谢Greg Franko ????，我从来没想过这样写，但是对比后才有意义！

好吧，一旦您使用 $ 而不是 ( ，您就有可能与其他暴露全局 $ 的库发生冲突。所以 ocf. 它是首选。“最佳”示例对我......将窗口和文档作为参数传递就像害怕它们不会存在于 IIFE 范围内......最好的就是 jQuery(function($) ); 它既是 DOM 就绪的，而且 $ 别名是安全的. 怕 jQuery 作为 glob 变量？...好吧....

除了 $ 也被其他库使用之外，还有（很少）人们尝试在同一页面上使用不同版本的 jQuery。这在 WordPress 的早期很常见，当时 WP 没有附带 jQuery，插件/主题开发人员会发布他们自己的版本，显然会导致冲突。这就是为什么默认情况下 WP 在 .noConflict() 中运行 jQuery 并需要一个闭包包装器将其作为引用传递的主要原因。

【参考方案1】：

@Minja，

我相信自执行函数包装器 (function() ... ()) 是提高性能的诀窍。

请参阅下面的试验。

我尝试用下面的代码缩短best code，这确实减少了执行时间。

(function($, window, document) 
    $(function() 
        console.log('hello world');
    );
(window.jQuery, window, document));

但以下确实进一步降低了它。这现在变成了最好的。 :)

(function()
  (function($, window, document) 
    $(function() 
        console.log('hello world');
    );
  (window.jQuery, window, document));
())

请参阅下面的屏幕截图以获取证据：