用 $(function 等启动 javascript 代码

Question

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

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

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

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

我不明白这些差异以及何时应该使用其中一个。

我还看到一些人使用它来启动他们的代码：

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

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

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

感谢您的建议。

Answer 1

我想从意识到$ = jQuery 开始是有意义的。在阅读匿名函数中的命名空间时，下面的目的会更有意义。但本质上，您可以使用其中任何一个。如果他们使用多个库，并且希望 $ 被另一个使用，那么他们将使用 jQuery() 而不是 $()。

$(document).ready(function(){
    // Here we have jQuery(document) firing off the ready event
    // which executes once the DOM has been created in 
    // order to ensure that elements you are trying to manipulate exist.
});

​$(function () {
    // Short-hand version of $(document).ready(function () { });
});

More information on Document.ready()

将 $ 放在括号内可确保 jQuery $ 别名（您可以放心，它总是以这种方式表示 jQuery）。

$(function ($) { /* code here : $ always means jQuery now */ }); 

最后你有一个IIFE（立即调用函数表达式） - IIFE explanation

(function (myNameSpace, $) {
    // This is an anonymous function - it is ran instantly
    // Usually used for namespaces / etc
    // This creates a scope/wrapper/closure around everything inside of it
}(window.myNameSpace, jQuery));

顶部的 $（与底部的 jQuery 匹配）表示 $（美元符号）代表命名空间范围内的 jQuery。 这样做是为了确保其他库不会与开发人员的内容发生冲突 打算/想要与 $ 一起使用。

(function (myNameSpace, $) {
    // Now because of all of this scope/wrapper/closure awesome...
    // you can create -INTERNAL- variables (sort of like Private variables from other langs) 
    // this variable cannot be accessed outside the namespace unless it is returned / exposed

    var internalVariable = '123'; // Internal

    // Even Internal functions!
    function privateFunction () {
        console.log('this is private!');
    }

    // --------------------------------------------------------
    // Public -method- of nameSpace exposing a private variable
    // Notice we're using the myNameSpace object we exposed at the top/bottom

    myNameSpace.nameSpaceMethod = function () {
        privateFunction(); // we can call the private function only inside of the namespace
        return internalVariable; // now we could get this variable
    };
}(window.myNameSpace, jQuery)); // notice these mirror the above arguments in the anon function

More information on anonymous functions

现在，如果我们在命名空间之外，我们可以看到这些内部/公共方法和变量是如何受到影响的：

// This will come up undefined
alert(internalVariable);

// This will trigger a -method- of the myNameSpace namespace - and alert "123"
// Showcasing how we access a Public method - which itself has access to the internal variable
// and exposes it to us!
alert(myNameSpace.nameSpaceMethod());
​

Answer 2

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 只是 vanilla 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），则无需等待文档准备好（因为在解析器到达您的脚本），SEAF（又名IIFE）就足够了：

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

---

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

Answer 3

这两个：

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

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

是直接等价的，它们都是在文档加载时启动一些 jQuery 的方式。前者只是后者的较短版本。

这个：

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

只是一个零参数的作用域函数，它会立即以零参数调用。