javascript - 使用 $(function 等启动 javascript 代码

Question

我正在研究来自 http://todomvc.com/ 的 Backbone 和 todo 示例应用程序 我注意到有 3 种启动文件中代码的方法:

$(function() {
 // code here
});

$(function( $ ) {
 // code here
});

(function() {
 // code here
}());

我不明白其中的区别以及何时应该使用其中一个。

我还看到一些人用它来开始他们的代码:

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

据我所见，这是完整的写法吧？

以更一般的方式，我是否应该始终将我的 javascript 代码包含在每个文件中的类似内容中？

感谢您的建议。

Answer 1

1. $(document).ready(function(){}) 确保您的代码在 DOM 上运行就绪，以便您可以访问 DOM。您可以在 jQuery's documentation 中阅读更多相关信息.

2. $(function(){}) 只是#1 的别名。此处的任何代码都将等待 DOM 就绪 ( see the docs )。

3. $(function($){}) 等同于#1 和#2，只是您在 local scope 中获得了对 jQuery 的清晰引用。 (见下面的注释)。您同样可以将 $ 传递给 #1 中的函数，它会做同样的事情(创建对 jQuery 的本地引用)。

4. (function(){}()) 只是一个 self-executing-anonymous-function , 用于创建一个新的闭包。

请注意，这些都不是 Backbone 特有的。前 3 个特定于 jQuery，而 #4 只是普通的 JavaScript。

---

注意:要理解上面#3 中发生的事情，请记住 $ 是 jQuery 的别名。然而，jQuery 并不是唯一使用 $ 变量的库。由于 $ 可能会被其他人覆盖，因此您要确保在您的范围内，$ 将始终引用 jQuery - 因此 $ 参数.

---

最后，基本上归结为以下2个选项:

1. 如果您的 JavaScript 在 head 中加载，您必须等待文档准备就绪，因此请使用:

   jQuery(function($) {
       // Your code goes here.
       // Use the $ in peace...
   });
   

2. 如果您在文档底部加载 JavaScript(在结束正文标记 - which you should definitely be doing 之前)，则无需等待文档准备就绪(因为 DOM 已在解析器构建时完成)获取你的脚本)和一个SEAF (又名 IIFE )就足够了:

   (function($) {
       // Use the $ in peace...
   }(jQuery));
   

---

P.S. 要更好地理解闭包和作用域，请参阅 JS101: A Brief Lesson on Scope .