Posso nominare una funzione JavaScript ed eseguirla immediatamente?

Ne ho alcuni:

function addEventsAndStuff() {
  // bla bla
}
addEventsAndStuff();

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

È necessario aggiungere nuovamente gli eventi perché il DOM è cambiato, quindi gli eventi allegati in precedenza non sono più disponibili. Dal momento che devono essere attaccati anche inizialmente (duh), sono in una bella funzione per essere ASCIUTTI.

Non c'è niente di sbagliato in questa configurazione (o c'è?), Ma posso smussarla un po '? Vorrei creare la addEventsAndStuff()funzione e chiamarla immediatamente, quindi non sembra così amatoriale.

Entrambi i seguenti rispondono con un errore di sintassi:

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

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

Eventuali acquirenti?

Non c'è niente di sbagliato nell'esempio che hai pubblicato 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 per 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 contenitore. Significato questo codice è valido:

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

ma questo non è:

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

Quindi, per dare un nome alla tua funzione e chiamarla immediatamente, devi definire una variabile locale, assegnarle la tua funzione come un'espressione, quindi chiamarla.

C'è una buona scorciatoia per questo (non è necessario dichiarare alcuna variabile a barre dell'assegnazione della funzione):

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

Non c'è niente di sbagliato in questa configurazione (o c'è?), Ma posso lisciarla un po '?

Guarda invece l'utilizzo della delega degli eventi. È lì che si guarda effettivamente l'evento su un contenitore che non scompare, quindi si utilizza event.target(o event.srcElementsu IE) per capire dove si è effettivamente verificato l'evento e gestirlo correttamente.

In questo modo, colleghi i gestori solo una volta e continuano a funzionare anche quando cambi il contenuto.

Ecco un esempio di delega degli eventi senza utilizzare alcuna libreria di supporto:

(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 dinamicamente alla pagina, il tuo clic viene registrato e gestito anche se non è presente alcun codice per agganciare gli eventi ai nuovi paragrafi aggiunti. Nota anche come i tuoi gestori sono solo voci in una mappa, e hai un gestore su document.bodyche fa tutto il dispacciamento. Ora, probabilmente lo radichi in qualcosa di più mirato di document.body, ma hai l'idea. Inoltre, in quanto sopra stiamo fondamentalmente spedendo da id, ma puoi fare corrispondenze complesse o semplici come preferisci.

Le moderne librerie JavaScript come jQuery , Prototype , YUI , Closure o molte altre dovrebbero offrire funzionalità di delega degli eventi per appianare le differenze del browser e gestire i casi limite in modo pulito. jQuery fa certamente, con entrambe le sue livee delegatefunzioni, che consentono di specificare i gestori con una gamma completa di selettori CSS3 (e poi alcuni).

Ad esempio, ecco il codice equivalente che utilizza jQuery (tranne che sono sicuro che jQuery gestisce i casi limite, la versione grezza off-the-cuff sopra non lo fa):

(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) {
    $("<p>").html(msg).appendTo(document.body);
  }

})(jQuery);

Copia dal vivo

Potresti voler creare una funzione di supporto come questa:

function defineAndRun(name, func) {
    window[name] = func;
    func();
}

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

Il tuo codice contiene un errore di battitura:

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

così

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

lavori. Saluti!

[ modifica ] in base al commento: e questo dovrebbe eseguire e restituire la funzione in una volta sola:

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

Ancora più semplice con ES6:

var result = ((a, b) => `${a} ${b}`)('Hello','World')
// result = "Hello World"
var result2 = (a => a*2)(5)
// result2 = 10
var result3 = (concat_two = (a, b) => `${a} ${b}`)('Hello','World')
// result3 = "Hello World"
concat_two("My name", "is Foo")
// "My name is Foo"

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() i.e. alert("test")
a();

Prova a fare così:

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