Ein bisschen eine architektonische Frage ...
Ich habe ursprünglich ein Javascript-Singleton erstellt, um Methoden zu integrieren, die benötigt werden, um ein Fotogallerie-Modul in einer Vorlagendatei für ein CMS-System zu betreiben. Die ursprüngliche Spezifikation erforderte nur eine Instanz dieses Fotogallerie-Moduls auf einer Seite. (Der folgende Code ist eine grobe Vereinfachung dessen, was ich tatsächlich geschrieben habe.)
Kurz nach der Freigabe des Codes, dämmerte es mir, dass, obwohl die Spezifikation eine Instanz dieses Moduls forderte, dieser Code auseinanderfallen würde, wenn eine Seite zwei Instanzen des Moduls hätte (dh der Benutzer fügt zwei Fotos zu einem Seite über das CMS). Jetzt ist das HTML-Markup sicher, weil ich Klassennamen verwendet habe, aber wie würde ich meine JavaScript- und jQuery-Event-Listener so umstrukturieren, dass sie mehrere Module handhaben können? Sie können davon ausgehen, dass jede Fotogalerie eine eigene JSON-P-Datei hat (oder Sie können eine einzelne JSON-P-Datei annehmen, wenn Sie der Meinung sind, dass sie mit einer JSON-P-Datei eleganter gehandhabt werden kann).
Ich denke, dass meine ursprünglichen jQuery-Event-Listeners möglicherweise in $ .delegate () konvertiert werden müssen, aber ich habe keine Ahnung, was ich danach tun soll und was ich tun soll, um mein Singleton zu konvertieren. Alle Leads würden geschätzt werden. Wenn Sie Code anbieten, bevorzuge ich Lesbarkeit gegenüber Optimierung.
Ich stelle diese Frage nicht, weil ich sofort das Problem für die Arbeit lösen muss. Ich stelle diese Frage, um vorwärts zu denken und ein besserer Javascript-Entwickler zu sein, weil ich erwarte, auf dieses Problem in der Zukunft zu stoßen und vorbereitet sein möchte.
Danke fürs Lesen.
HTML
%Vor%Das Javascript ist eine externe statische Datei und ruft über $ .getSCript (), das vom CMS erstellt wurde, eine JSON-P-Datei an.
Javascript / jQuery
%Vor%Inhalt von photo-gallery.json
%Vor%Ich denke, der einfachste Weg ist, deinen Code einfach in ein Plugin zu verwandeln. Also für den folgenden HTML:
%Vor% Sie würden das Plugin mit $.fn.photoGallery erstellen, wobei Sie einen Index als Parameter übergeben:
Und dann initiiere jede Galerie wie folgt:
%Vor% Wo Sie die Dateien photogallery1.json , photogallery2.json und photogallery3.json haben, die jeweils module.init({ ... }); mit den notwendigen Objektdaten aufrufen.
Tags und Links javascript jquery