Posso nominare una funzione javascript ed eseguirla immediatamente?

Ne ho parecchi di questi:

function addEventsAndStuff() { // bla bla } addEventsAndStuff(); function sendStuffToServer() { // send stuff // get HTML in response // replace DOM // add events: addEventsAndStuff(); } 

Aggiungere nuovamente gli eventi è necessario perché il DOM è cambiato, quindi gli eventi precedentemente associati sono andati. Dal momento che devono essere collegati inizialmente (duh), sono in una bella funzione per essere ASCIUTTI.

Non c’è niente di sbagliato in questo setup (o c’è?), Ma posso arrotondarlo un po ‘? Mi piacerebbe creare la funzione addEventsAndStuff e chiamarla immediatamente, quindi non sembra così dilettantistica.

Entrambi seguono rispondono con un errore di syntax:

 function addEventsAndStuff() { alert('oele'); }(); (function addEventsAndStuff() { alert('oele'); })(); 

Qualche acquirente?

Non c’è niente di sbagliato nell’esempio che hai postato nella tua domanda .. L’altro modo di farlo potrebbe sembrare strano, ma:

 var addEventsAndStuff; (addEventsAndStuff = function(){ // add events, and ... stuff })(); 

Esistono due modi per definire una funzione in JavaScript. Una dichiarazione di funzione:

 function foo(){ ... } 

e un’espressione di funzione, che è un modo qualsiasi di definire una funzione diversa da quella sopra:

 var foo = function(){}; (function(){})(); var foo = {bar : function(){}}; 

…eccetera

le espressioni di funzione possono essere denominate, ma il loro nome non viene propagato all’ambito di contenimento. Significato questo codice è valido:

 (function foo(){ foo(); // recursion for some reason }()); 

ma questo non è:

 (function foo(){ ... }()); foo(); // foo does not exist 

Quindi, per denominare la funzione e chiamarla immediatamente, è necessario definire una variabile locale, assegnarvi la funzione come un’espressione, quindi chiamarla.

C’è una buona stenografia (non è necessario dichiarare alcuna variabile alla barra l’assegnazione della funzione):

 var func = (function f(a) { console.log(a); return f; })('Blammo') 

Non c’è niente di sbagliato in questo setup (o c’è?), Ma posso arrotondarlo un po ‘?

Guarda invece usando la delega degli eventi. È lì che si guarda effettivamente l’evento su un container che non va via, quindi si usa event.target (o event.srcElement su IE) per capire dove si è verificato effettivamente l’evento e gestirlo correttamente.

In questo modo, colleghi il / i gestore / i una volta sola e continuano a funzionare anche quando scambi i contenuti.

Ecco un esempio di delega degli eventi senza utilizzare alcuna lib di helper:

 (function() { var handlers = {}; if (document.body.addEventListener) { document.body.addEventListener('click', handleBodyClick, false); } else if (document.body.attachEvent) { document.body.attachEvent('onclick', handleBodyClick); } else { document.body.onclick = handleBodyClick; } handlers.button1 = function() { display("Button One clicked"); return false; }; handlers.button2 = function() { display("Button Two clicked"); return false; }; handlers.outerDiv = function() { display("Outer div clicked"); return false; }; handlers.innerDiv1 = function() { display("Inner div 1 clicked, not cancelling event"); }; handlers.innerDiv2 = function() { display("Inner div 2 clicked, cancelling event"); return false; }; function handleBodyClick(event) { var target, handler; event = event || window.event; target = event.target || event.srcElement; while (target && target !== this) { if (target.id) { handler = handlers[target.id]; if (handler) { if (handler.call(this, event) === false) { if (event.preventDefault) { event.preventDefault(); } return false; } } } else if (target.tagName === "P") { display("You clicked the message '" + target.innerHTML + "'"); } target = target.parentNode; } } function display(msg) { var p = document.createElement('p'); p.innerHTML = msg; document.body.appendChild(p); } })(); 

Esempio dal vivo

Nota come se fai clic sui messaggi che vengono aggiunti dynamicmente alla pagina, il tuo clic viene registrato e gestito anche se non c’è alcun codice per agganciare gli eventi sui nuovi paragrafi aggiunti. Nota anche come i tuoi gestori sono solo voci in una mappa e tu hai un gestore sul document.body che fa tutto il dispacciamento. Ora, probabilmente lo stai facendo in qualcosa di più mirato di document.body , ma ti viene l’idea. Inoltre, in quanto sopra stiamo praticamente inviando da id , ma puoi fare corrispondenze complesse o semplici come ti piace.

Le moderne librerie JavaScript come jQuery , Prototype , YUI , Closure , o una qualsiasi delle altre, dovrebbero offrire funzionalità di delega degli eventi per attenuare le differenze tra i browser e gestire i casi limite in modo pulito. jQuery fa certamente, con entrambe le sue funzioni live e delegate , che ti permettono di specificare i gestori usando una gamma completa di selettori CSS3 (e poi alcuni).

Ad esempio, ecco il codice equivalente usando jQuery (eccetto che sono sicuro che jQuery gestisca i casi limite, ma la versione non formattata precedente non funziona):

 (function($) { $("#button1").live('click', function() { display("Button One clicked"); return false; }); $("#button2").live('click', function() { display("Button Two clicked"); return false; }); $("#outerDiv").live('click', function() { display("Outer div clicked"); return false; }); $("#innerDiv1").live('click', function() { display("Inner div 1 clicked, not cancelling event"); }); $("#innerDiv2").live('click', function() { display("Inner div 2 clicked, cancelling event"); return false; }); $("p").live('click', function() { display("You clicked the message '" + this.innerHTML + "'"); }); function display(msg) { $("

").html(msg).appendTo(document.body); } })(jQuery);

Copia dal vivo

Il tuo codice contiene un refuso:

 (function addEventsAndStuff() { alert('oele'); )/*typo here, should be }*/)(); 

così

 (function addEventsAndStuff() { alert('oele'); })(); 

lavori. Saluti!

[ modifica ] in base al commento: questo dovrebbe essere eseguito e restituire la funzione in un colpo solo:

 var addEventsAndStuff = ( function(){ var addeventsandstuff = function(){ alert('oele'); }; addeventsandstuff(); return addeventsandstuff; }() ); 

Potresti voler creare una funzione di supporto come questa:

 function defineAndRun(name, func) { window[name] = func; func(); } defineAndRun('addEventsAndStuff', function() { alert('oele'); }); 

Se vuoi creare una funzione ed eseguirla immediatamente –

 // this will create as well as execute the function a() (a=function a() {alert("test");})(); // this will execute the function a() ie alert("test") a(); 

Prova a fare così:

 var addEventsAndStuff = (function(){ var func = function(){ alert('ole!'); }; func(); return func; })();