iniziare codice javascript con $ (function, ecc

Question

sto studiando Backbone e l'esempio todo applicazioni da http://todomvc.com/ ho notato ci sono 3 severals modi di iniziare il codice nei file:

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

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

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

non lo faccio capire le differenze e quando devo usare uno sopra l'altro

ho anche visto alcune persone che utilizzano questo per iniziare il loro codice:.

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

Da quello che ho visto, questo è il modo completo di scrivere bene?

In un modo più generale, dovrei sempre includere il mio codice javascript in qualcosa del genere in ogni file?

Grazie per il vostro consiglio.

Answer 1

1. $(document).ready(function(){}) assicura che il codice venga eseguito su DOM pronto, in modo da poter accedere al DOM. Puoi leggere ulteriori informazioni a riguardo in jQuery's documentation.

2. $(function(){}) è solo un alias del numero # 1. Qualsiasi codice qui in attesa attenderà il DOM pronto (see the docs).

3. $(function($){}) equivale a # 1 e # 2, solo si ottiene un riferimento pulito a jQuery nel local scope (vedere la nota seguente). È anche possibile passare in $ alla funzione in # 1, e farà la stessa cosa (creare un riferimento locale a jQuery).

4. (function(){}()) è solo uno self-executing-anonymous-function, utilizzato per creare una nuova chiusura.

Si noti che nessuno di questi è specifico per Backbone. I primi 3 sono specifici per jQuery, mentre # 4 è solo per JavaScript.

---

Nota: Per capire quello che sta succedendo a # 3 di cui sopra, si ricordi che $ è un alias per jQuery. Tuttavia, jQuery non è l'unica libreria che utilizza la variabile $. Poiché lo $ potrebbe essere sovrascritto da qualcun altro, si desidera garantire che nell'ambito del proprio ambito, $ farà sempre riferimento a jQuery, da cui l'argomento $.

---

Alla fine, si riduce sostanzialmente verso il basso per i seguenti 2 opzioni:

1. Se è caricato il tuo JavaScript nel head, si deve attendere per il documento pronto, in modo da utilizzare questo:

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

2. Se si carica il tuo JavaScript in fondo del documento (prima del tag di chiusura corpo - which you should definitely be doing), allora non c'è bisogno di aspettare docum ent pronto (dal momento che il DOM è già costruito dal momento in cui il parser arriva al tuo script), e un SEAF (A.K.A. IIFE) sarà sufficiente:

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

---

P.S. Per una buona comprensione delle chiusure e dell'ambito, vedere JS101: A Brief Lesson on Scope.

Answer 2

Questi due:

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

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

sono direttamente equivalenti, sono entrambi il modo per iniziare un po 'jQuery quando il documento è stato caricato. Il primo è solo una versione più breve di quest'ultimo.

Questa:

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

è solo una funzione scope con parametri zero, che viene immediatamente chiamato con parametri di zero.

Answer 3

Suppongo che abbia senso iniziare, realizzando che $ = jQuery. Lo scopo di cui in basso durante la lettura di spazi dei nomi all'interno di funzioni anonime avrà più senso. Ma in sostanza, puoi usare entrambi. Uno userebbe jQuery() invece di $() se stavano usando più librerie e voleva che lo $ fosse usato dall'altro.

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

Mettere il $ entro la parentesi assicura la jQuery $ alias (si può essere sicuri che significa sempre jQuery in questo modo).

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

Infine si dispone di un IIFE (diementicato-Invocato espressione di una funzione) - 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)); 

Il $ in alto (con la sua corrispondenza jQuery sul fondo) significare che il $ (simbolo del dollaro) sta per jQuery nell'ambito di namepsace. Questo è fatto per assicurare che le altre librerie non entrino in collisione con ciò che lo sviluppatore intende/vuole usare con $.

(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

Ora, se siamo al di fuori dello spazio dei nomi, possiamo vedere come questi metodi pubblici/interni e le variabili vengono effettuate:

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