molily: Weiterführende Frage

Beitrag lesen

Worin unterscheiden sich

  1. var Navigation = { ... }

und

  1. function Navigation(Argumente) { ... }

?

Von 1. kann man immer nur ein Objekt gleichzeitig haben, oder? Von zweitem kann man durch var nav = new Navigation(Argumente) soviele erzeugen wie man benötigt?

Ja, richtig.

Gibt es dabei etwas bestimmtes zu beachten?

Anstatt »Navigation« musst du immer »this« verwenden - bei Event-Handlern und Co. ist es nicht immer einfach, Zugriff auf das Instanzobjekt zu bekommen, weil »this« nicht automatisch an dieses gebunden wird. Das ist leider nicht ganz so trivial:
http://molily.de/js/organisation-instanzen.html
und speziell
http://molily.de/js/organisation-verfuegbarkeit.html

Ich möchte den Code einmal bei Fiddle hinterlegen und deine Meinung dazu hören. Wenn ich es richtig verstanden habe ist var that = this nötig, sobald man eine weitere (innere) Funktion betritt, da der Kontext von this dann auf window steht?

Ja, das funktioniert - vorausgesetzt, die Methoden werden im Konstruktor verschachtelt und damit für jede Instant neu angelegt. Das ist kein Problem, solange man eh nur zwei Instanzen erzeugt. Wenn man tausende Instanzen erzeugen würde, sollte man die Methoden lieber am Prototyp erzeugen und dann binden (die dortige bind-Funktion haben viele Browser mittlerweile schon nativ implementiert, ich muss das mal aktualisieren).

Meine jetzige Implementierung hat glaube ich ausschließlich globale Funktionen? Sollte man sowas vermeiden? Mit privaten hat der Code leider nicht mehr funktioniert.

Wirkliche private Methoden gibt es nicht. Man kann lediglich lokale Funktionen im Konstruktor schachteln, ohne diese am Instanzobjekt zu speichern, siehe http://molily.de/js/organisation-instanzen.html#private-objekte. Das heißt, man kann dann auch nicht über das Instanzobjekt darauf zugreifen. Wahrscheinlich hattest du das versucht und dabei kommt natürlich nichts.

Habe dort nur addEvent global gelassen, da dort ja von außen zugegriffen wird, funktionierte aber nicht.

Im Prinzip kannst du sämtliche Funktionen lokal notieren, ohne sie ans Instanzobjekt zu hängen. Dein Code ist ja bisher in sich abgeschlossen.

Hier der Fiddle-Link:

http://jsfiddle.net/mXvrw/

Das sieht sehr gut aus!
Dort sind dir zwei »var« abhanden gekommen in den Methoden scrollRight und scrollLeft. Den »el«-Shortcut kann man sich jetzt sparen und direkt »container« verwenden.
Außerdem solltest du Zeilen mit »;« anstatt »,« beenden (ist wahrscheinlich ein Copy-n-Paste-Fehler vom alten Code). Das Komma ist ein Operator und dient nur in var-Statements oder Objekt-Literalen dazu, einzelne Einträge zu trennen. Wenn man das anstelle vom Semikolon verwendet, kann es auch schnell zum Problem werden.

Hier noch mal ein Beispiel, bei dem sätmliche Funktionen »privat« sind (also keine richtigen Methoden am Instanzobjekt sind). Zudem habe ich alles in eine weitere selbstausführende anonyme Funktion verpackt, damit die Variablen Navigation, navigationFirst und navigationSecond nicht global werden.

http://jsfiddle.net/molily/ENNrH/1/

Ansonsten hat sich die Funktionalität nicht geändert – es zeigt nur, dass man die Kapselung noch weiter treiben kann. Diese Instanz ist schlicht ein leeres Objekt. Man kann natürlich darüber streiten, ob man in solchen Fällen noch einen Konstruktor braucht, den man mit »new« aufruft.

Grüße,
Mathias