Ich schreibe gerade, was eine sehr, sehr große Single-Seite Web / Javascript-Anwendung wird.
Technologien, die ich verwende, sind ASP.NET MVC4, jquery, knockout.js und amplify.js.
Das Problem, das ich habe, ist, dass die meisten wenn nicht alle Einzelseiten-Anwendungsbeispiele für kleinere Anwendungen sind, in denen alle Skriptvorlagen (sei es jquery, handlbars, etc ...) alle in der gleichen Datei sind mit dem Rest des HTML-Codes. Das ist gut für kleinere Apps, aber die Anwendung, die ich erstelle, ist eine komplette Wartungslogistikanwendung mit vielen, vielen, vielen Bildschirmen.
Der Ansatz, den ich bisher gemacht habe, ist eine äußere Shell (meine Hauptindex.cshtml Datei) und ich benutze jQuery's load () Methode, um die bestimmte Datei zu laden oder einzufügen, die ich brauche, wenn ein Benutzer eine bestimmte Auswahl trifft.
Beispiel:
%Vor%Hier ist der Code für die App.loadModule-Funktion:
%Vor%Alles lief gut, bis ich tatsächlich mit den verschiedenen Formularelementen auf dem neu geladenen Bildschirm interagieren musste. jQuery scheint sie nicht direkt in den Griff zu bekommen. Ich kann .live () oder .delegate () nicht verwenden, weil sie keine Ereignisse sind, sie sind Textfelder und Schaltflächen und manchmal muss ich ihre CSS-Klassen ändern.
Die einzige Möglichkeit, die ich gefunden habe, besteht darin, ein Element von der äußeren Shell (etwas, das nicht über .load () geladen wurde) zu bekommen und jquery's .find () -Methode wie folgt zu verwenden:
%Vor%Ich möchte natürlich nicht so etwas jedes Mal machen müssen, wenn ich mit Werten aus einem Formularelement interagieren oder sie sogar abrufen muss.
Hat jemand irgendwelche Ideen, wie ich eine wartbare, sehr große Einzelseitenanwendung mit möglicherweise hunderten von .html-Dateien erstellen kann, ohne dass der gesamte HTML-Code in einer einzigen Datei gespeichert sein muss, und trotzdem diese .load () umgehen kann Problem, das ich habe?
Alle Gedanken würden sehr geschätzt werden. : -)
V / R
Chris
AKTUALISIEREN
Ich dachte, ich würde ein Update veröffentlichen und darüber, wie die Dinge gelaufen sind und was funktioniert hat. Nach vielen Recherchen habe ich mich entschieden, mit dem AngularJS JavaScript-Framework von Google zu arbeiten. Es hat die Tortur exponentiell vereinfacht und ich würde definitiv allen, die einen großen SPA machen wollen, auf jeden Fall raten, es anzuschauen.
Links:
Hauptseite Ссылка
Super kostenlose kurze Videos auf Angular: Ссылка
Das ist eigentlich eine sehr komplizierte Frage, da es wirklich auf das Design Ihrer Architektur ankommt.
Für großformatige Einzelseitenanwendungen empfiehlt es sich, eine Art Front-End-MV * -Stil-Framework zu verwenden, z. B. backbone.js . was jQuery recht nützlich macht. Sie sollten auch darüber nachdenken, eine Art von Abhängigkeitsverwaltungs-Framework wie require.js zu verwenden, um Ihre Skripts und Abhängigkeiten asynchron und sogar besser zu laden - - Verwenden Sie das AMD-Muster in Ihrem Anwendungsdesign, um Ihre Architektur modularer und einfacher zu verwalten.
Soweit es sich um Ihr MVC4-Projekt handelt, haben Sie einige Möglichkeiten:
In jedem Fall müssen Sie einen Weg finden, Front-End-Ereignisse und Navigation zu handhaben (Backbone bietet beides, wenn es mit jQuery gekoppelt ist). Noch komplizierter ist das Muster, das Sie wählen, um eine Ansicht der Aktivitäten einer anderen Ansicht zu benachrichtigen (es gibt viele Möglichkeiten, dies zu tun) - zum Beispiel ein Publish / Subscribe-Muster.
Ich hoffe, ich habe ein bisschen geholfen, ich weiß, dass ich die Frage nicht vollständig beantworte, aber die Antwort könnte wirklich lang werden!
Mit Ihrem Ansatz sind viele Dinge falsch. Was ich empfehlen würde ist, einige Präsentationen zu sehen, wie Leute Single-Side-Anwendungen erstellen und welche Werkzeuge am häufigsten verwendet werden.
Das scheint etwas Vernünftiges zu sein: Ссылка
Sie werden zumindest wollen
Ein paar gute Links:
Wenn Sie keine wirklich komplizierte SOFEA Single Page App brauchen, dann empfehle ich Ihnen, die PJAX Route.
Dann schreiben Sie Ihre App einfach als normale Web 1.0-App mit den Leistungsvorteilen einer einzelnen Seitenladung. Ich fordere Sie auf, dies als eine Option zu betrachten, da Sie damit die meisten Ihrer Validierungsaufgaben auf der Serverseite erledigen können.
Die Idee ist sehr einfach bei jeder Antwort, die Sie die gesamte Seite zurück minus die Kopf- und Fußzeile (die das Javascript und CSS enthält) enthält. DOM Rendering Zeit ist unglaublich schnell in diesen Tagen ... was nicht ist eine vollständige Seite neu laden, Also mach dir keine Sorgen über die Größe des HTML zurückgeben.
Auch der "PJAX-Weg" ist viel einfacher zu cachen , Google SEO-freundlich und ist in der Tat das was neues Basecamp tut .
Hinweis: Wollte, dass dies ein Kommentar ist, keine Antwort, aber nicht genug Exp, um Kommentare zu posten; [Korrekturen von Community-Mitgliedern sind willkommen!]
Wichtige Punkte, die Sie bei Apps mit einer einzelnen Seite beachten sollten:
+1 für gryzzly's Punkt über die Verwendung eines Frameworks.
Sencha hat ein nettes MVC ähnliches Framework für ihr ExtJs Produkt. Sie haben Datenspeicher, Ajax, Lazy Loading, Klassenhierarchien und vieles mehr alles im Paket gebündelt. Sie haben eine gute API-Seite , um auch nach Objekteigenschaften und Methoden zu suchen (praktisch, da es nicht scheint um irgendein Intellisense für Javascript zu sein: /). Ihre API-Seite ist; Soweit ich weiß, ein Beispiel für eine einzelne Seite App. Ich weiß viel von dem Zeug, ExtJs, dass Sie eine Open-Source-Alternative finden können, aber ich mag, dass es nur die eine Bibliothek ist und ich nicht ein paar verschiedene Frameworks herunterladen muss, um verschiedene Operationen auszuführen. [Anmerkung: Ich habe keine Verbindung zu Sencha, außer dass ich ein Kunde von ihnen bin und ihre Sachen mag.]
Fazit:
Ich würde sagen, es wäre ziemlich schwierig, eine große Single-Page-App zu verwalten, ohne ein clientseitiges Framework zu verwenden. ob Open Source oder nicht und ohne Verwendung eines Architekturmusters wie eines Client-MVC.
Einzelseiten-Apps, die ich für etwas komplizierter halte, müssen Ihr Team ziemlich gut verstehen, um das Konzept einer einzelnen Page App zu verstehen und zu implementieren. Wenn Sie es abziehen, wird die Website in Bezug auf Benutzerfreundlichkeit erstaunlich sein.
Ich würde empfehlen, Sammy.js zu verwenden und verschiedene Viewmodels in eine separate URL zu teilen. Und wenn Sie asp.net mvc 4 verwenden, verwenden Sie Teilansichten (Benutzersteuerelemente), so dass Sie den gesamten Code in einer Datei ablegen. Und alle benennen und alle js-code auf eine sinnvolle Weise teilen, Dateiname und Namespace in js. Das wird auf lange Sicht viel in der Wartbarkeit und in der eigenen Gesundheit helfen. Und benutze gesunden Menschenverstand !
Wie ich es gemacht habe, war es, JavaScript-Code, der mit der Vorlage zusammenhängt, mit der Vorlage selbst zu verbinden. Und dann laden Sie die ganze Vorlage + Skript-Sache mit Ajax. Wenn Sie dies versuchen möchten, sollten Sie darauf hinweisen, dass die meisten Browser <script> -Tags, die in die Seite eingefügt werden, nicht ausführen. Besonders wenn es mit innerHTML gemacht wird. Als solches sollten Sie eval das Skript selbst markieren (alternativ können Sie document.createElement verwenden, um das Skript zu injizieren, aber das bietet keine zusätzlichen Vorteile gegenüber eval, da der Browser das Skript sowieso blind ausführt).
In meinem Fall speichere ich meine Templates in XML-Dateien anstatt in einfachem HTML-Code, um die HTML- und Script-Teile der Vorlage leichter zu erfassen. Auf diese Weise kann ich einfach .responseXML der Ajax-Anfrage verwenden, um die Vorlage zu analysieren. Meine Vorlage hat die folgende Grundstruktur:
Sie müssen auch daran denken, Ihren Server so zu konfigurieren, dass er mit dem richtigen Inhaltstyp für Ihre Vorlagen antwortet. Sonst funktioniert resultXML nicht. Dies ist natürlich nicht die einzige Möglichkeit, dieses System zu implementieren. Sie können Ihre Vorlagen einfach als HTML speichern und dann diesen HTML-Code analysieren, um die auszuführenden Skripts zu extrahieren.
Der Hauptteil Ihres Codes, die Funktionen, Konstruktoren, Objekte usw. können in einer js-Datei enthalten sein. Das Vorlagenskript muss nur diese Funktionen aufrufen, um dem Rest der Seite mitzuteilen, wie mit der Vorlage gearbeitet werden soll.
Wenn Sie Ihre Daten weiter von Ihrer Vorlage trennen und nur die Vorlage mit Daten auf der Seite ausfüllen oder eine separate Ajax-Anfrage für JSON-Daten durchführen, können Sie Ihren Server so konfigurieren, dass der Browser Ihre Vorlagen zwischenspeichert. Dies ist besonders nützlich für häufig verwendete Vorlagen (z. B. Vorlagen für Dialogfelder). Dadurch kann der Browser die Vorlage nur einmal herunterladen und die zwischengespeicherte Version beim nächsten Aufruf der Vorlage verwenden.
Wie auch immer, so habe ich es beim letzten Mal gemacht. Es wurde gut genug skaliert, um Facebook-Nutzern zu dienen (die Web-App war eine Facebook-App). Teilen Sie einfach meine Erfahrung. Hoffe es hilft.
Ich habe mit Dojo Toolkit ein paar riesige Einzelseiten-Anwendungen geschrieben. Ich bin mir ziemlich sicher, dass JavaScript-Framework, das Sie wählen, wahrscheinlich für Sie arbeiten wird. Ich benutze Dojo, weil es mir Funktionen zur Verfügung stellt, die die Verwaltung von einzelnen Einseiten-Anwendungen erleichtern.
Sie können das Widget-System von Dojo verwenden, um alle Ihre Bildschirme und Formulare als Widgets zu definieren. Wenn Sie sie brauchen, können Sie sie einfach instanziieren und einfügen, wo immer Sie sie brauchen. Wann immer Sie es loswerden wollen, können Sie einfach destroy oder destroyRecursive für dieses bestimmte Widget aufrufen und es ist weg. Das Widget-System von Dojo hilft Ihnen auch dabei, Ihren HTML-Code von Ihrem JavaScript-Code zu trennen, aber trotzdem zusammen zu halten, damit sie nicht überall verteilt sind.
Ich habe eine einfache Widgetdefinition für ein Login-Formular hinzugefügt.
Dies ist die HTML-Vorlage.
%Vor%Dies ist der JavaScript-Teil für das Widget.
%Vor%Es gibt einige Vorteile, die das Widget-System bietet:
${form_name} verwendet. Wenn Sie eine komplexere Einrichtung verwenden möchten, unterstützt Dojo auch eine Django-ähnliche Syntax-Template-Sprache. Auf diese Weise können Sie die meisten mit Django verfügbaren Tags wie für, wenn-dann-sonst usw. verwenden. data-dojo-attach-point ist sehr hilfreich. Wenn Sie dies verwenden, müssen Sie einem DOM-Element keine ID mehr zuweisen. Sie müssen das Element nicht in Ihrer HTML-DOM-Struktur finden. Die Variable, die Sie in data-dojo-attach-point benennen, wird automatisch zugewiesen, um auf das Widget oder DOM-Element zu verweisen, das Sie in Ihrer Vorlage definiert haben. Das obige Beispiel verwendet die _usrfld , _pwdfld und _lgbtn . data-dojo-attach-event ist auch sehr hilfreich. Wenn Sie dies verwenden, müssen Sie der Schaltfläche nicht unbedingt einen Ereignis-Hook hinzufügen, Dojo's Widget-System hakt es für Sie und löscht auch den Haken, wenn Ihr Widget zerstört wird. Dies sind nur einige der Features, die ich täglich nutze, wenn ich meine Projekte entwickle. Hoffentlich wird es Ihnen einige Einblicke geben, die Sie verwenden können, um Ihre Entscheidung zu treffen, wenn Sie das richtige JavaScript-Framework für Ihr Projekt auswählen. Als Nebenbemerkung befürworte ich nicht Dojo oder irgendetwas, wollte nur teilen, was für mich funktioniert.
Um große einseitige Anwendungen handhaben zu können, wird empfohlen, das einzelne Modul in verschiedene Apps zu zerlegen.
Beispiel : Apps wie Suchseiten-App und Ergebnisseiten-App.
Tags und Links javascript angularjs jquery asp.net-mvc-4 singlepage