开始的javascript code $用（功能等 [英] start javascript code with $(function, etc

问题描述

我从 http://todomvc.com/ 研究骨干和待办事项应用范例
我注意到有3 severals开始在文件中的code方式：

  $（函数（）{
 // code在这里
}）;$（函数（$）{
 // code在这里
}）;（函数（）{
 // code在这里
}（））;
 

我不明白的差异，当我应该使用一个比其他。

我也看到一些人用这个来启动其code：

  $（文件）。就绪（函数（）{
  // code在这里
}）;
 

这是我所看到的，这是写作的全部方式是正确的？

在一个更普遍的方式，我就应该总是有我的JavaScript code到每一个文件类似的东西？

谢谢你的建议。

解决方案

1. $（文件）。就绪（函数（）{}）确保您的code对DOM准备好运行，让你有机会获得DOM的。您可以在 jQuery的文档阅读更多关于这一点。




2. $（函数（）{}）只是一个别名＃1。这里的任何code将等待DOM就绪（看到文档）。




3. $（函数（$）{}）等同于＃1和＃2，只有你得到一个干净的参考jQuery的的的本地范围（参见下面的说明）。您可以在 $ 同样传递给函数在＃1，它会做同样的事情（创建一个本地引用jQuery的）。




4. （函数（）{}（））只是<一个href=\"http://stackoverflow.com/questions/592396/what-is-the-purpose-of-a-self-executing-function-in-javascript\">self-executing-anonymous-function,用于创建一个新的闭包。

请注意，这些都不是专门针对骨干。第3是特定于jQuery的，而＃4只是香草的JavaScript。

---

注意：：要明白这是怎么回事在上述第3项，记得 $ 是一个别名 jQuery的。然而，jQuery是不是使用了 $ 变量的唯一库。因为 $ 可能会被别人覆盖，要保证你的范围内， $ 将始终引用的jQuery - 因此 $ 参数

---

在最后，这基本上可以归结为以下2个选项：

1. 如果您的JavaScript在头装，你必须等待文件准备好，所以用这个：

    的jQuery（函数（$）{
       //你的code放在这里。
       //使用$和平...
   }）;
    




2. 如果您在您的文档的底部加载你的JavaScript（的结束标记之前 - 这你绝对应该做），那么就没有必要等待文件准备好（因为DOM已经由分析器到达你的脚本的时候建造）和<一个href=\"http://stackoverflow.com/questions/592396/what-is-the-purpose-of-a-self-executing-function-in-javascript\">SEAF （亦称 IIFE ）就足够了：

    （函数（$）{
       //使用$和平...
   }（jQuery的））;
    

---

PS 闭包及适用范围有很好的了解，请参见 JS101 ：在范围略教训

I am studying Backbone and the todo example apps from http://todomvc.com/ I have noticed there are 3 severals ways of starting the code in the files:

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

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

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

I do not understand the differences and when I should use one over the other.

I also saw some people using this to start their code:

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

From what I have seen, this is the full way of writing it right?

In a more general way, should I always include my javascript code into something like that in each files?

Thanks for your advice.

解决方案

1. $(document).ready(function(){}) ensures that your code runs on DOM ready, so that you have access to the DOM. You can read more about this in jQuery's documentation.

2. $(function(){}) is just an alias to #1. Any code in here will wait for DOM ready (see the docs).

3. $(function($){}) is equivalent to #1 and #2, only you get a clean reference to jQuery in the local scope (see the note below). You can likewise pass in $ to the function in #1, and it'll do the same thing (create a local reference to jQuery).

4. (function(){}()) is just a self-executing-anonymous-function, used to create a new closure.

Please note that none of these are specific to Backbone. The first 3 are specific to jQuery, while #4 is just vanilla JavaScript.

---

Note: To understand what's going on in #3 above, remember that $ is an alias to jQuery. However, jQuery is not the only library that uses the $ variable. Since the $ might be overwritten by someone else, you want to ensure that within your scope, $ will always reference jQuery - hence the $ argument.

---

In the end, it basically boils down to the following 2 options:

1. If your JavaScript is loaded in the head, you have to wait for document ready, so use this:

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

2. If you load your JavaScript at the bottom of your document (before the closing body tag - which you should definitely be doing), then there's no need to wait for document ready (since the DOM is already constructed by the time the parser gets to your script), and a SEAF (A.K.A. IIFE) will suffice:

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

---

P.S. For a good understanding of Closures and Scope, see JS101: A Brief Lesson on Scope.

这篇关于开始的javascript code $用（功能等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！