Kann ich eine JavaScript-Funktion benennen und sofort ausführen?

Ich habe einige davon:

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

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

Das erneute Hinzufügen der Ereignisse ist erforderlich, da sich das DOM geändert hat und zuvor angehängte Ereignisse nicht mehr vorhanden sind. Da sie anfangs auch angebracht werden müssen (duh), haben sie eine gute Funktion, um trocken zu sein.

An diesem Setup ist nichts auszusetzen (oder gibt es das?), Aber kann ich es ein wenig glätten? Ich möchte die addEventsAndStuff()Funktion erstellen und sofort aufrufen, damit sie nicht so amateurhaft aussieht.

Beide folgenden antworten mit einem Syntaxfehler:

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

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

Irgendwelche Abnehmer?

An dem Beispiel, das Sie in Ihrer Frage gepostet haben, ist nichts auszusetzen. Die andere Vorgehensweise mag seltsam aussehen, aber:

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

Es gibt zwei Möglichkeiten, eine Funktion in JavaScript zu definieren. Eine Funktionsdeklaration:

function foo(){ ... }

und eine Funktion zum Ausdruck, das ist eine beliebige Art und Weise eine andere Funktion als die oben definieren:

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

...etc

Funktionsausdrücke können benannt werden, aber ihr Name wird nicht an den enthaltenen Bereich weitergegeben. Das heißt, dieser Code ist gültig:

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

aber das ist nicht:

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

Um Ihre Funktion zu benennen und sofort aufzurufen, müssen Sie eine lokale Variable definieren, Ihre Funktion als Ausdruck zuweisen und dann aufrufen.

Hierfür gibt es eine gute Abkürzung (es müssen keine Variablen deklariert werden, außer für die Zuweisung der Funktion):

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

An diesem Setup ist nichts auszusetzen (oder gibt es das?), Aber kann ich es ein wenig glätten?

Verwenden Sie stattdessen die Ereignisdelegierung. Dort suchen Sie tatsächlich nach dem Ereignis in einem Container, der nicht verschwindet, und verwenden dann event.target(oder event.srcElementim Internet Explorer), um herauszufinden, wo das Ereignis tatsächlich aufgetreten ist, und es korrekt zu behandeln.

Auf diese Weise hängen Sie die Handler nur einmal an und sie funktionieren auch dann weiter, wenn Sie Inhalte austauschen.

Hier ist ein Beispiel für die Ereignisdelegierung ohne Verwendung von Hilfsbibliotheken:

(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);
  }

})();

Live Beispiel

Beachten Sie, dass beim Klicken auf die Nachrichten, die dynamisch zur Seite hinzugefügt werden, Ihr Klick registriert und verarbeitet wird, obwohl kein Code zum Verknüpfen von Ereignissen mit den neu hinzugefügten Absätzen vorhanden ist. Beachten Sie auch, dass Ihre Handler nur Einträge in einer Karte sind und Sie einen Handler auf dem haben document.body, der den gesamten Versand erledigt. Nun, Sie wurzeln dies wahrscheinlich in etwas gezielterem als document.body, aber Sie bekommen die Idee. Im obigen Abschnitt versenden wir grundsätzlich nach id, aber Sie können das Matching so komplex oder einfach durchführen, wie Sie möchten.

Moderne JavaScript-Bibliotheken wie jQuery , Prototype , YUI , Closure oder eine von mehreren anderen sollten Funktionen zur Ereignisdelegierung bieten, um Browserunterschiede auszugleichen und Randfälle sauber zu behandeln. jQuery bietet sowohl seine liveals auch seine delegateFunktionen, mit denen Sie Handler mit einer ganzen Reihe von CSS3-Selektoren (und noch einige mehr) angeben können.

Hier ist zum Beispiel der entsprechende Code, der jQuery verwendet (außer ich bin sicher, dass jQuery Randfälle behandelt, die in der obigen Rohversion ohne Manschette nicht behandelt werden):

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

Live-Kopie

Möglicherweise möchten Sie eine Hilfsfunktion wie folgt erstellen:

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

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

Ihr Code enthält einen Tippfehler:

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

so

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

funktioniert. Prost!

[ bearbeiten ] basierend auf Kommentar: und dies sollte ausgeführt werden und die Funktion auf einmal zurückgeben:

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

Mit ES6 noch einfacher:

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"

Wenn Sie eine Funktion erstellen und sofort ausführen möchten -

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

Versuchen Sie es so:

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