如果$（'document'）准备好，jQuery最佳做法 [英] jQuery best practices in case of $('document').ready
问题描述
我正在研究jQuery最佳做法，并发现这篇文章 by Greg Franko
通常，我做：
$ b $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ /其余的代码在这里}）;
但是文章建议使用：
// IIFE - 立即调用函数表达式
（function（$，window，document）{
// $现在本地作用域
//收听文档上的jQuery ready事件
$（function（）{
// DOM已经准备好了！
}）;
//其余代码到这里！
}（window.jQuery，window，document））;
//全局jQuery对象作为参数传递
我可以看到这里的意见但是我无法弄清楚它究竟在说什么。
那么哪个是更好的方法，为什么？
我知道这两种方法都可以正常工作，但第二种方法如何成为更好的？
立即调用函数表达式（IIFE）
FE IIFE是局部全局变量/属性范围的理想解决方案，并保护您的JavaScript代码库免受外部干扰（例如第三方库）。如果您正在编写将在许多不同环境（例如jQuery插件）中运行的jQuery代码，那么使用IIFE来本地实现jQuery是非常重要的，因为您不能假定每个人都使用$ to alias jQuery。这是你将如何做：
// IIFE - 立即调用函数表达式
（function（$，window ，document）{
// $现在本地作用域
//其余代码到这里！
}（window.jQuery，window，文件））;
//全局jQuery对象作为参数传递
如果不喜欢不得不滚动到源文件的底部，看看你传递给IIFE的全局变量/属性，你可以这么做：
// IIFE - 立即调用函数表达式
（function（yourcode）{
//全局jQuery对象作为参数传递
yourcode（window.jQuery，窗口，文档）;
}（函数（$，窗口，文档）{
//其余的代码到这里！
}
））;
要阅读有关IIFE的更多信息，您可以阅读我的博客文章，标题为我爱我的IIFE 。
jQuery Ready事件
许多开发人员将所有的代码都包含在jQuery ready事件中，如下所示：
（$（$）$（$）$（$）$（$）$（$）$（$）$
}）;
或者这样一个较短的版本：
$（function（）{
// DOM准备好了！
//其余代码到这里！
}）;
如果您正在执行上述任何一种模式，那么您应该考虑移动应用程序例如方法），它不依赖于DOM，在ready事件处理程序之外。像这样：
// IIFE - 立即调用函数表达式
（function（yourcode）{
//全局jQuery对象作为参数传递
yourcode（window.jQuery，window，document）;
}（function（$，window，document）{
// $现在本地范围
$（function（）{
// DOM已准备好！
}）;
//其余代码到这里！
}
））;
此模式使得更轻松地分离逻辑（从代码设计透视图），因为并不是所有东西都必须包含在一个单独的事件处理程序回调函数中。它也将改善您的应用程序的页面加载性能，因为并非所有需要立即初始化。一个很好的例子是，当DOM准备就绪时，不需要绑定的懒惰绑定DOM事件处理程序。
改编自我的jQuery最佳做法博文： http://gregfranko.com/blog/jquery-best-practices/
I was researching on jQuery best practices and found this article by Greg Franko
Normally, I do:
$("document").ready(function() {
// The DOM is ready!
// The rest of the code goes here
});
But the article recommends to use:
// IIFE - Immediately Invoked Function Expression
(function($, window, document) {
// The $ is now locally scoped
// Listen for the jQuery ready event on the document
$(function() {
// The DOM is ready!
});
// The rest of the code goes here!
}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter
I can see the comments there, but I couldn't figure out what it exactly saying.
So, which is the better approach and why?
I know that both methods will work, but how does the second one become the better?
Immediately Invoked Function Expressions (IIFEs)
IIFEs are an ideal solution for locally scoping global variables/properties and protecting your JavaScript codebase from outside interference (e.g. third-party libraries). If you are writing jQuery code that will be run in many different environments (e.g. jQuery plugins), then it is important to use an IIFE to locally scope jQuery because you can’t assume everyone is using the $ to alias jQuery. Here is how you would do it:
// IIFE - Immediately Invoked Function Expression
(function($, window, document) {
// The $ is now locally scoped
// The rest of your code goes here!
}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter
If you don’t like having to scroll to the bottom of your source file to see what global variables/properties you are passing to your IIFE, you can do this:
// IIFE - Immediately Invoked Function Expression
(function(yourcode) {
// The global jQuery object is passed as a parameter
yourcode(window.jQuery, window, document);
}(function($, window, document) {
// The rest of your code goes here!
}
));
To read more about IIFEs, you can read my blog post titled, I Love My IIFE.
jQuery Ready Event
Many developers wrap all of their code inside of the jQuery ready event like this:
$("document").ready(function() {
// The DOM is ready!
// The rest of your code goes here!
});
Or a shorter version like this:
$(function() {
// The DOM is ready!
// The rest of your code goes here!
});
If you are doing either of the above patterns, then you should consider moving the pieces of your application (e.g. methods), that don’t depend on the DOM, outside of the ready event handler. Like this:
// IIFE - Immediately Invoked Function Expression
(function(yourcode) {
// The global jQuery object is passed as a parameter
yourcode(window.jQuery, window, document);
}(function($, window, document) {
// The $ is now locally scoped
$(function() {
// The DOM is ready!
});
// The rest of your code goes here!
}
));
This pattern makes it easier to separate your logic (from a code design perspective) since not everything has to be wrapped inside of a single event handler callback function. It will also improve your application’s page load performance, since not everything needs to initialized right away. A great example of this is lazy binding DOM event handlers that do not need to be bound when the DOM is ready.
Adapted from my jQuery Best Practices blog post: http://gregfranko.com/blog/jquery-best-practices/
这篇关于如果$（'document'）准备好，jQuery最佳做法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
