Für ein kleineres Projekt habe ich vor einiger Zeit eine HTML5-Single-Page-Application entwickelt und stand dann vor dem Problem wie ich unterschiedliche Views innerhalb dieser Seite realisiere. Da ich möglichst ohne schwerfälliges Framework auskommen wollte, habe ich mich für eine Lösung mittels jQuery entschieden. Im HTML habe ich dazu mehrere Views definiert:
<div id="options" class="widget" style="display: none"> </div> <div id="game" class="widget"> </div>
Der Inhalt des div-Elements mit der Id options ist dabei standardmäßig ausgeblendet. Nun kann die Ansicht der beiden Views mittels der Funktion switchView gewechselt werden:
switchView() {
if(this.activeView==this.Views.Game) {
$("#game").css({"display": "none"});
$("#options").css({"display": "block"});
this.activeView = this.Views.Options;
}
else if (this.activeView==this.Views.Options) {
$("#options").css({"display": "none"});
$("#game").css({"display": "block"});
this.activeView = this.Views.Game;
}
}
In der Funktion wird das CSS der jeweiligen div-Elemente manipuliert. Dadurch wird die Sichtbarkeit der Blöcke gewechselt und man hat eine einfache View Umschaltung realisiert.
Von vornherein scheiße geplant also.
Es gibt gute Gründe, alle Infos gleich in der Seite zu haben und nur bei Bedarf diesen oder jenen Bereich einzublenden. Dadurch spart man z.B. die für noch einen oder mehrere Requests notwendige Ladezeit. Prominentes Beispiel ist TiddlyWiki, in dem alle Beiträge in einer einzigen HTML-Datei stehen und nur per Klick eingeblendet werden.
… was irgendwann bedeutet, daß die Startseite des wikis ewig lang läd…genial.
Eine sehr pauschale Aussage ohne wirkliche Substanz. Natürlich macht man sich Gedanken und plant. Je nach Wichtigkeit, mal mehr und mal weniger. In diesem Fall war es ein Spaßprojekt mit dem Fokus auf alles, aber sicherlich nicht die UI und so steht man manchmal halt vor ungeplanten Teilproblemen.
Was hast Du von tux. anderes erwartet ? :)
Allerdings hast Du Dich leider mit dem Satz hier selbst diskreditiert:
„Da ich möglichst ohne schwerfälliges Framework auskommen wollte, habe ich mich für eine Lösung mittels jQuery entschieden.“
Nicht nur, daß Du für einen Einzeiler, erstmal 150kb minified Javascript in Deine Seite einbindet, nein auch JQ an sich ist „nachgewiesener Maßen schwerfällig“ im Vergleich zu anderen Lösungen.
switchView() {
if(this.activeView==this.Views.Game) {
document.getElementByID(„game“).style.display = „none“;
document.getElementByID(„options“).style.display = „block“;
this.activeView = this.Views.Options;
}
else if (this.activeView==this.Views.Options) {
document.getElementByID(„options“).style.display = „none“;
document.getElementByID(„game“).style.display = „block“;
this.activeView = this.Views.Game;
}
}
Der Code oben ist zig mal schneller, als Dein schwerfälliges Jquery UND SELBST WENN man das hübsch $(„game“)… schreiben wollte, gäbs Alternativen die viel schneller als JQuery sind. Das richtige Maß zwischen Nutzen eines Frameworks und Verlangsamung durch Nutzen eines Frameworks, macht die Qualität des Webentwicklers aus.
Solange Du das als „Wie ändere ich in JQuery die CSS-Attribute?“ propagierst, habe ich keine Einwände, aber den Einsatz von JQ zum „empfehlen“, nur um zwei kleine CSS Änderungen zu machen, ist einfach falsch.
Bei deinen Ausführungen kann ich zum größten Teil mitgehen und bin auch immer dankbar für Hinweise und Verbesserungsvorschläge. Ich habe jQuery in dem Projekt als eierlegende Wollmilchsau, die aus meiner Sicht die passende Größe und Umfang hat, genutzt und von dem Standpunkt aus es natürlich auch bei der Umschaltung der Views genutzt.