2012-05-15 4 views
5

Ich versuche, eine jquery-ui Codebase anzupassen, um RequireJs zu verwenden, und ich verwende es auf einem viel langsameren (aber skalierbaren) virtualisierten Cloud-Dienst als der dedizierte Host, den ich vorher benutzt habe.Wie verhindert man, dass "hässliche" HTML-Vorläufer bei der Verwendung von jQuery UI und RequireJs angezeigt werden?

Meine Seiten sind standardmäßig eine hässliche Katastrophe von Vanille HTML. Das einzige, was dieses Chaos zum Leben erweckt, sind Aufrufe von JavaScript-Funktionen, die ihm die entsprechenden Registerkarten und das Layout geben. Tatsächlich ist die Seite lang und vertikal angeordnet ... eine Sektion nach der anderen ... bevor ich die .tabs() Funktion anrufe, die sie zu einer einzelnen Einheit mit einer horizontalen Steuerung zusammenfaltet.

(Ziemlich zuversichtlich, ich bin in der jQuery UI mindset „es richtig zu machen“. Indem sie nicht das ganze UI durch Code Aufbau mit zu beginnen, kann es zumindest sah mit JavaScript deaktiviert. Obwohl seinem Ich bezweifle jemand benutzt immer noch Lynx, es gibt Probleme mit der Zugänglichkeit ... oder stellen Sie sicher, dass Ihre Inhalte von Suchmaschinen analysiert werden können. Ich erspare Ihnen meine alte Rede darüber, wie dies eine absurde Art der Trennung von Inhalten/UI ist. /)

Wenn ich <script>-Tags wurde meine 3rd-Party-Bibliothek Abhängigkeiten und die $(document).ready ausführen, um die jQuery UI Voodoo zu laden, sah der Benutzer nie die Vanille-u Gly HTML. Jetzt, da ich RequireJs verwende, verzögert die page.js Datei und lädt asynchron nach das HTML ... Warten auf Bibliotheken, die nicht wirklich für die DOMready-Behandlung benötigt werden. Der langsamere Server macht dieses Aussehen wirklich schrecklich.

Ich könnte natürlich CSS-Styling verwenden, um die Hässlichkeit am Anfang zu verbergen, und überlagern mit einer "Loading ..." Grafik, bis die Benutzeroberfläche fertig war. Das ist, was in den Sinn kam zuerst, und ein ähnlicher Ansatz wird hier vorgeschlagen:

Jquery UI interface looks ugly before document.ready

(Hinweis: Es ist wie ein solches gemeinsames Problem scheint, dass ich fast würde denken, es wäre ein RequireJs Plugin sein, das ging Voraus und tat dies. Gibt es?)

In jedem Fall schien ich nicht zu sorgen, bevor ... und ich frage mich, ob ich eine einfachere Lösung vermisse. Wie verhindern Sie, dass Benutzer "hässlichen" HTML-Code sehen, wenn Sie RequireJs verwenden?

Antwort

3

Ich bin mit Ihnen, dass Sie einige CSS-Zauberei tun und dann in RequireJs "Kick-off" -Skript, verstecken Sie es. Sie sollten auch SEO-Auswirkungen und deaktivierte JavaScript-Szenarien in Betracht ziehen.

Denken Sie daran, am Ende des Tages, es ist nur HTML, CSS und JavaScript. Was auch immer Sie für ein Templates/Code-Generierungssystem verwenden, um am Ende des Tages dorthin zu gelangen, es ist nur HTML-Inhalt, mit CSS gestylt und mit JavaScript animiert.

+0

Danke für das Vertrauensvotum, obwohl es diesen Trend gibt, wo ich glaube, dass ich nur eine StackOverflow-Frage stellen werde, wenn ich die Antwort schon irgendwie kenne. Vielleicht sollte ich es eher in einem "lazyweb" -Geist verwenden und Fragen stellen * bevor * ich über sie nachdenke. :) That said think this könnte/sollte als requireJs Plugin getan werden? – HostileFork

+0

: D Einer der Vorteile von StackOverflow ist, dass Sie das Problem in viel klareren Worten durchdenken - http://en.wikipedia.org/wiki/Rubber_duck_debugging. Ich sage, gib dieses große kritische Denken nicht auf. – robrich

1

Ich würde argumentieren, dass es sinnvoller ist, etwas wie node-browserify zu verwenden, um alle von Ihrem Javascript-Modul require s zu tun und dann die einzelne JS-Datei zum Endbenutzer zu streamen.

Warum durchlaufen alle TCP-Handshakes und HTTP-Header das gleiche mit einer viel niedrigeren Leistung, wenn der Client offensichtlich nicht im Offline-Modus ausgeführt werden soll?

Hey Doc, es tut weh, wenn ich dieses tun.

Nun, dann tu das nicht!

+0

Meine Verwendung von requirejs basiert auf dem Wunsch, eine einheitliche Handhabung zwischen node.js und dem Browser zu erreichen, und hier stellen Sie diese Entscheidung in Frage. Ich bin schon genug verwirrt. :) Aber danke, ich werde es mir anschauen. Nach meinem Verständnis können RequireJs (wenn Sie und Ihre Bibliotheksmitglieder dem richtigen Prozess folgen) alle Ihre Javascripts in eine Datei zusammenfassen, und ich hatte gehofft, dass ich die Straße hinunter kommen könnte. Aber es ist immer ein schmerzhafter Schritt. Siehe: http://stackoverflow.com/questions/10302724/calling-methods-in-requirejs-modules-from-html-elements-such-as-onclick-handlers – HostileFork

+0

Nun, ich muss ein bisschen Voreingenommenheit zugeben seit ich ein paar Node.js-Bibliotheken geschrieben habe, aber ich denke, die CommonJS-'' require''-Syntax (die von Node.js übernommen wurde) ist viel vernünftiger als das System von RequireJS. Warum? Das Laden von Modulen ist in der Regel ein Initialisierungsschritt, bevor eine Aktion stattfindet. RequireJS verwandelt es in einen asynchronen Prozess, da das Laden aller Skripts im Browser * * asynchron ist, aber wenn Sie nichts tun können, bis alles geladen ist, macht ** ein ** HTTP-Roundtrip mehr Sinn als 5-10. Sie werden wahrscheinlich nicht den Vorteil * von RequireJS * nutzen: Laden Sie ein Modul dynamisch, während Ihre Seite läuft. –

+0

Zweiter Punkt: Der Browser pausiert das Rendering, während er ein ''