Unsere Anwendung verwendet viele Konfigurationsoptionen. Diese Optionen müssen auf der Client-Seite in Form von Benutzerpräferenzen, Site-weiten Einstellungen usw. widergespiegelt werden.
Gegenwärtig übergeben wir serverseitige Einstellungen an die Clientseite in Form von JSON, die in benutzerdefinierten Attributen im Markup für ein bestimmtes Element gespeichert sind (und nein, unsere Anwendung kümmert sich derzeit nicht um die W3C-Validierung). Wir rufen dann die Daten aus dem benutzerdefinierten Attribut ab und parsen es in ein JSON-Objekt für die Verwendung in einem Skript mit jQuery.
Ein Nachteil besteht darin, Attribute auf Elemente innerhalb von Event-Handlern zu referenzieren. Ich weiß, dass dies verpönt ist, da es zirkuläre Referenzen und anschließend Speicherlecks erzeugen kann. Ich würde viel lieber die Datenfunktion von jQuery verwenden, aber Sie können dies nicht von der Server-Seite zum Zeitpunkt der Seitendarstellung aufrufen.
Was machen alle anderen in diesem Szenario?
Geben Sie die Serverdaten im JSON-Format zurück. Sie können dies über AJAX tun, indem Sie einen JSON-Header oder eine einfache Seitenauskopplung und JSON.parse() zurückgeben.
Sie können die JSON-Daten direkt den Daten eines Elements zuweisen.
%Vor% Nachdem Sie Ihre Situation besser verstanden haben, würde ich vorschlagen, dass Sie die Attribute data- aus drei Gründen verwenden.
.data . customAtt="value" nach data-customAtt="value"
Hier finden Sie weitere Informationen zu den Datenattributen.
Sie können in der Seite ein Inline-Skript rendern, das ein JS-Objekt mit allen Voreinstellungen definiert. Auf diese Weise haben Ihre Skripte Zugriff auf die Daten, sobald der Browser mit dem Laden der Seite fertig ist. Die Nachteile:
Oder Sie können in der Seite eine Verknüpfung zu einem externen Skript erstellen, das die Einstellungen deklariert. Auf diese Weise blockieren die Einstellungen das Seitenrendering nicht und können getrennt vom Browser zwischengespeichert werden. Nachteile:
Oder Sie könnten die Daten direkt zu einem Element hinzufügen, indem Sie die HTML5-Datenattribute verwenden (also HTML5-konform und jQuery.Data-kompatibel, da diese auch verwendet werden). Nachteil:
Bei meinen Projekten rendere ich normalerweise solche Daten als globale JavaScript-Variablen oben auf der Masterseite:
%Vor%Wenn das Projekt voll von AJAX ist und der Benutzer lange auf einer Seite bleiben kann, ist es möglich, die Einstellungen regelmäßig mit AJAX-Anfragen an den Server zu aktualisieren.
P.S. Ich habe Aspx-Syntax verwendet, aber ich glaube, dass Sie eine Idee haben, selbst wenn Sie eine andere Sprache verwenden.
Normalerweise verwende ich MVC, also mache ich AJAX-Aufrufe, wenn die Seite geladen wird, um Objekte zu erhalten, die ich vielleicht brauche. Ich bin mir nicht sicher, welche Technologie Sie verwenden, aber es sollte nicht zu schwierig sein, einen Endpunkt einzurichten, der diesen JSON zurückgibt und ihn aufruft, wenn das DOM bereit ist. Dann können Sie es als JavaScript-Variable speichern und sich nicht darum kümmern, es in die Attribute einiger Elemente einzufügen.
Ein guter Kompromiss besteht darin, ein einzelnes Konfigurationsobjekt zu rendern, das durch die IDs getastet wird, die Sie für die Knoten verwenden (oder ein anderes Schema, mit dem Ihre Handler die Daten finden). Anstatt Inline-Handler zu verwenden, legen Sie die Handler nach dem Laden der Seite fest. Dann sollte es einfach sein, den json-Server zu referenzieren, der erstellt wurde.
Dieses Beispiel verwendet Semi-Globals
%Vor%Alternativ können Sie, wenn Sie Ihre Variablen wirklich abgrenzen möchten, Folgendes tun:
%Vor%Das obige Beispiel ist weniger flexibel, da Sie die Befehlsvariable nicht von anderen Handlern wiederverwenden können, wenn Sie es benötigen.
Tags und Links javascript