201307Nov

Callback Hell: Leitfaden für asynchrone JavaScript-Apps

Im Zeitalter der ereignisgetriebenen Web-Anwendungen, die inzwischen sowohl client- als auch serverseitig auf JavaScript basieren, kann es schnell passieren, dass sich der Code in eine "Callback Hell" verwandelt und dadurch die Wartbarkeit verschlechtert wird. Callbacks sind asynchrone Funktionsaufrufe, die nach dem Eintreffen eines bestimmten Ereignisses ausgeführt werden und weitere Logik enthalten. Callbacks müssen nicht zwangsweise etwas mit Server-Abfragen, also XMLHttpRequests, zu tun haben: Sie können auch an anderen Stellen im Code verwendet werden, wodurch sie praktisch überall in einem JavaScript-Projekt enthalten sein können.
Die "Callback Hell" entsteht also, wenn Funktionsaufrufe sehr tief ineinander verschachtelt und zudem nicht gekennzeichnet sind. Wie Entwickler die Fallstricke im Callback-Dschungel umgehen können, kann nun auf der Website CallbackHell.com nachgelesen werden.

Callback Hell - A guide to writing asynchronous javascript programs

Dort finden sich typische Negativ-Beispiele von schlecht eingesetzten Callbacks sowie Tipps, um die Code-Qualität zu verbessern. Ein Beispiel:

  • var form = document.querySelector('form');
  •  
  • Ausgangssituation:
  • form.onsubmit = function(submitEvent) { …
  •  
  • Optimierung 1:
  • form.onsubmit = function formSubmit(submitEvent) { …
  •  
  • Optimierung 2:
  • function formSubmit(submitEvent) { …
  • document.querySelector('form').onsubmit = formSubmit;

Im Wesentlichen bestehen die Möglichkeiten der Optimierungen im Benennen von Funktionen sowie dem Modularisieren und Kapseln einzelner Funktionen. Letzteres ist gerade für Node.js-Anwendungen sehr gut anwendbar, da hier mit dem CommonJS-Modulsystem und der "exports"-Funktion bereits echte Module verwendet werden können.