comenzar código javascript con $ (función, etc

Question

estoy estudiando la espina dorsal y las aplicaciones de ejemplo de tareas de http://todomvc.com/ que he notado que hay 3 severals formas de iniciar el código en los archivos:

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

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

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

no lo hago entender las diferencias y cuando debería utilizar uno sobre el otro

también vi algunas personas que utilizan este para iniciar su código:.

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

Por lo que he visto, esta es la manera completa de escribirlo, ¿verdad?

De una manera más general, ¿debería incluir siempre mi código de JavaScript en algo así en cada archivo?

Gracias por su consejo.

Answer 1

1. $(document).ready(function(){}) garantiza que el código se ejecuta en DOM listo, para que tenga acceso al DOM. Puede leer más sobre esto en jQuery's documentation.

2. $(function(){}) es solo un alias de # 1. Cualquier código aquí esperará listo para DOM (see the docs).

3. $(function($){}) es equivalente a # 1 y # 2, solo se obtiene una referencia limpia a jQuery en el local scope (ver la nota a continuación). También puede pasar $ a la función en el n. ° 1, y hará lo mismo (cree una referencia local a jQuery).

4. (function(){}()) es solo un self-executing-anonymous-function, que se utiliza para crear un nuevo cierre.

Tenga en cuenta que ninguno de estos son específicos de Backbone. Los primeros 3 son específicos de jQuery, mientras que el # 4 es simplemente JavaScript vano.

---

Nota: para entender lo que está pasando en el punto 3 anterior, recuerda que $ es un alias para jQuery. Sin embargo, jQuery no es la única biblioteca que usa la variable $. Como alguien más puede sobrescribir el $, debe asegurarse de que dentro de su alcance, $ siempre haga referencia a jQuery; de ahí el argumento $.

---

Al final, que básicamente se reduce a las siguientes 2 opciones:

1. Si su JavaScript está cargado en la head, usted tiene que esperar a que el documento preparado, a fin de utilizar esto:

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

2. Si carga su código JavaScript en la parte inferior de su documento (antes de que el cuerpo de la etiqueta de cierre - which you should definitely be doing), entonces no hay necesidad de esperar a docum ent listo (dado que el DOM ya está construido para el momento en que el analizador obtiene su secuencia de comandos), y un SEAF (A.K.A. IIFE) será suficiente:

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

---

P. S. Para una buena comprensión de Closures and Scope, vea JS101: A Brief Lesson on Scope.

Answer 2

Estos dos:

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

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

son directamente equivalentes, que son a la vez la manera de iniciar algún jQuery cuando el documento se ha cargado. El primero es solo una versión más corta de este último.

Ésta:

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

es sólo una función de ámbito con cero parámetros, que se llama inmediatamente con parámetros cero.

Answer 3

Supongo que tiene sentido comenzar, al darse cuenta de que $ = jQuery. El propósito de lo siguiente cuando lee sobre espacios de nombres dentro de funciones anónimas tendrá más sentido. Pero, en esencia, puedes usar cualquiera de ellos. Se usaría jQuery() en lugar de $() si usaban varias bibliotecas, y quería que el $ fuera utilizado por el otro.

$(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()

Poner el $ dentro del paréntesis asegura la jQuery $ alias (usted puede estar seguro que siempre significa jQuery esta manera).

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

Por último tiene una IIFE (Se invoca immidiately-expresión de función) - 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)); 

El $ en la parte superior (con ella es a juego jQuery en la parte inferior) significan que el $ (signo de dólar) representa jQuery dentro del alcance de la marca de nombre. Esto se hace para garantizar que otras bibliotecas no colisionen con lo que el desarrollador pretende/quiere que se use $.

(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

Ahora bien, si estamos fuera del espacio de nombres, podemos ver cómo se realizan estos métodos públicos internos y/variables:

// 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()); 
​