Funzione anonima vs. funzione separata denominata per l'inizializzazione in jquery

Question

Funzione anonima vs. funzione separata denominata per l'inizializzazione in jquery

#1 da (10 voti)
#2 da (7 voti)
#3 da (3 voti)
#4 da (2 voti)

9

Diciamo che abbiamo un codice che viene utilizzato per inizializzare le cose quando una pagina viene caricata e assomiglia a questo:

function initStuff() { ...}
...
$(document).ready(initStuff);

La funzione initStuff viene chiamata solo dalla terza riga dello snippet. Mai più. Quindi di solito le persone lo mettono in un callback anonimo come questo:

$(document).ready(function() { 
    //Body of initStuff
});

Avere la funzione in una posizione dedicata nel codice non aiuta molto la leggibilità, perché con la chiamata su ready () è ovvio che questo è il codice di inizializzazione.

Ci sono altri motivi per preferire uno rispetto all'altro?

coding-style jquery

posta Martin N. 11.06.2012 - 14:19

fonte

4 risposte

Leggi altre domande sui tag coding-style jquery

Cosa significa "promuovere" un file? Perché Java usa :: per i riferimenti ai metodi invece di.?

score 10 · Answer 1

Come menzionato @ Stargazer712, il primo clutter il namespace globale, quindi il secondo è il vincitore IMHO. Ora, detto questo, perché stai usando una funzione anonima nel secondo esempio, il callstack del tuo debugger sarà inutile e otterrà risultati diversi a seconda del debugger che usi. Di solito, quello con cui finisco è:

$(document).ready(function MODULE_init() { 
    //Body of initStuff
});

In questo modo, lo spazio dei nomi globale non diventa ingombrante e hai un utile callstack.

Tendo ad usare la convenzione di cui sopra in tutte le definizioni di funzioni anonime (beh, non anonimo più;)). È una convenzione che ho trovato durante l'esplorazione del codice JS di Firefox.

Modifica: Dopo aver detto tutto ciò, Oliver fa un buon punto con i test unitari. Quanto sopra è pensato per fungere da wrapper per operazioni più complesse, non per ospitare un sacco di codice non testato.

score 7 · Answer 2

In questo caso direi che non importa, ma se hai funzioni di callback anonimo, chiamando altre funzioni di callback anonimo, tendo a usare il primo approccio, in quanto rende il codice molto più leggibile e facile da seguire.

Per quanto riguarda il test delle unità, il primo approccio sarebbe migliore, in quanto sarebbe possibile testare la funzione initstuff in isolamento.

score 3 · Answer 3

Vorrei andare per il primo, per la leggibilità / debug / test, ecc. È possibile evitare il problema del disordine globale nello spazio dei nomi semplicemente creando uno spazio dei nomi locale per tutte le funzioni della pagina. Uso lo stile di notazione oggetto, come raccomandato da Paul Irish (vedere le diapositive 13-15 su link )

var MYPAGE = {
  onReady : function(){
  // init code
  },
  someOtherCallback : function(){}
};

jQuery(document).ready(MYPAGE.onReady);

score 2 · Answer 4

C'è anche un terzo modo per registrare i metodi init senza ingombrare lo spazio dei nomi globale che preferisco:

jQuery(function(){....});

È breve ed evita la ricerca di documenti DOM come

jQuery(document).ready(function(){...});

fa.