这样初始化jQuery有什么好处?

8

我正在阅读Greg Franko的博客文章,标题是“jQuery最佳实践”。

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

典型链接

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

或者

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

Better (链接)

更好
(function($, window, document) {
    $(function() {
        console.log('hello world');
    });
 }(window.jQuery, window, document));

最佳实践 (链接)

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

所以,我想问的是- 第三个例子比第二个例子更好在哪里?两者都是IIFE。我唯一看到的区别是,#2将jQuery对象(+窗口+文档)传递给IIFE并运行代码,而#3将jQuery对象(+窗口+文档) JavaScript代码传递给IIFE。这有什么好处呢?

那么我的问题是:第三个例子比第二个例子更好在哪里?两者都是 IIFE。唯一的区别是 #2 将 jQuery 对象 (+ window + document) 传入 IIFE 并立即运行代码,而 #3 则将 jQuery 对象 (+ window + document) JavaScript 代码一起传入 IIFE。那么这有什么好处呢?


4
这里有一些信息:http://gregfranko.com/blog/jquery-best-practices/ - fabienheureux
谢谢!那很有道理。我无法理解它可能只是为了可读性。 :) - Minja
1
让我们在这里感谢 Greg Franko,我从未想过要这样写,但是通过对比后它变得有意义了! - fabienheureux
1
一旦您使用$而不是(,就有可能与其他公开全局$的库发生冲突。因此,ocf更受欢迎。对于“最佳”示例,我并不太理解...将window和document作为参数传递就好像害怕它们在IIFE范围内不存在一样...最好的方法是使用jQuery(function($){});,这既是DOM准备就绪,也保证了$别名的安全性。担心jQuery作为全局变量?...那么.... - Roko C. Buljan
1
除了其他库也使用 $ 之外,有时人们会尝试在同一页上使用不同版本的 jQuery(虽然很少见)。这在 WordPress 的早期经常发生,当时 WP 没有附带 jQuery,插件/主题开发人员会提供自己的版本,显然会引起冲突。这就是为什么默认情况下,WP 在 .noConflict() 中运行 jQuery,并需要一个闭包包装器将其作为引用传递的主要原因。 - tao
我已经给你所有的评论点了赞。对于Roko,作者甚至提到他这样做的唯一原因(并且他最近才开始这样做)是为了使阅读更容易,并知道他正在传递到IIFE中的全局变量是什么。 - Minja
1个回答

1

@Minja,

我相信自执行函数包装器(function() { ... }())是能提高性能的关键。

请看下面的试验。

我尝试使用以下代码缩短 最佳代码,结果确实减少了执行时间。

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

请参见下面的截图以获取证明: 输入图像描述

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接