✔ Verständnisproblem bei einer JQuery-Funktion

[dodo123]

Hallo. Ich habe erst vor kurzem angefangen, mich mit JQuery zu befassen und habe mir von http://bradfrost.github.com/this-is-responsive/ ein Script für eine Toggle-Navigation gesucht.

Hier mal das Script

(function() {
$(document).ready(function() {
  $('body').addClass('js');
  var $menu = $('#menu'),
   $menulink = $('.menu-link');


$menulink.click(function() {
  $menulink.toggleClass('active');
  $menu.toggleClass('active');
  return false;
});});
})();

Finde den Aufbau irgendwie verwirrend, kann mir jemand evtl. erklären was da passiert? In dem Buch von Gallileo Computing, was ich zum lernen verwende, werden in den Beispielen immer erst die Funktionen geschrieben und dann weiter unten über $(document).ready aufgerufen. Welche Schreibweise sollte ich mir angewöhnen, bzw. welche ist die auf Dauer Übersichtlichere?
Ich will mir nichts Falsches beibringen, um dann später vielleicht wieder mühsam umlernen zu müssen.

 

[Parantatatam]

Den Block um das "ready"-Event ist nur nötig, wenn du das DOM manipulieren willst. Die Funktionen sind ansonsten unabhängig vom Ladezustand des Quelltextes. Du kannst sie also auch außerhalb dieses Blocks definieren.