web-dev-qa-db-de.com

Bevorzugte clientseitige Routing-Lösung?

Ich entwerfe eine einseitige browserbasierte Webanwendung.

JQuery wird bereits in meiner Anwendung verwendet. Ich plane derzeit, KnockoutJS für die Datenbindung und die Verwaltung der Benutzeroberfläche zu verwenden. Ich habe jedoch Backbone.js in der Vergangenheit und ich war ziemlich beeindruckt von den Routing-Möglichkeiten, die die Controller-Schicht bietet.

Ich habe mir auch eine JQuery-basierte Lösung wie pathjs für das clientseitige Routing angesehen.

Es wäre toll, wenn jemand Vorschläge und Richtlinien für die Auswahl eines geeigneten Routingsystems unterbreiten könnte.

Ich bin nicht bereit, Backbone.js anstelle von KnockoutJS aufgrund der hervorragenden Datenbindungsfunktionen von KnockoutJS.

50
lorefnon

Nachdem ich ein bisschen nachgeforscht habe, habe ich die Lösung gefunden. Die Routing-Funktionen von @Eisenhauer Backbone sind fantastisch, aber was ist, wenn ich Backbone nicht verwende? Wie ich in meiner Frage dargelegt habe, verwende ich bereits KnockoutJS, das mir ein clientseitiges MVVM-Modell bietet, und daher ist es nicht wirklich eine gute Idee, eine zusätzliche MVC-Implementierung auf derselben Seite zu platzieren.

Für Benutzer, die eine eigenständige Routing-Lösung suchen, ist pathjs eine einfache und elegante Lösung.

Eine flexiblere, leistungsfähigere und eigenständige Routing-Lösung ist Crossroads.js unter http://millermedeiros.github.com/crossroads.js/ . Es ist sehr gut dokumentiert und sehr leistungsfähig und kann daher an jede Reihe von Anforderungen angepasst werden.

34
lorefnon

Sie könnten die History-API anstelle eines Hashbang-Ansatzes verwenden?

  • Hier können Sie die dem Benutzer angezeigte URL bearbeiten.
  • Es bedeutet, dass vorwärts und rückwärts sinnvoll arbeiten.
  • Das Bookmarken der Seite funktioniert sinnvoll.
  • Dies ist in Bezug auf die Leistung besser, da beim Aktualisieren einer Seite (oder beim Klicken auf einen Link von einer externen Quelle auf die Seite) der richtige Inhalt erst geladen wird, anstatt eine leere Seite zu laden und dann den richtigen Inhalt über AJAX abzurufen .

Der Nachteil ist, dass ältere Browser dies nicht unterstützen. Sie könnten auf einen Hashbang-Ansatz zurückgreifen (wenn Sie wirklich müssen). Ich kenne jedoch keine vorhandenen Frameworks, die dies tun. Ich würde es vorziehen, auf das nicht dynamische Laden von Inhalten zurückzugreifen (d. H. Das Neuladen einer ganzen Seite, wenn der Benutzer auf einen Link klickt). Die History-API wird immer weiter unterstützt, sodass sich dieses "Problem" im Laufe der Zeit verringern wird.

Hier ist ein Arbeitsbeispiel mit einer Dokumentation. In der Adressleiste wird anscheinend "old school" geladen (vollständige Seitenaktualisierung), aber wenn Sie sich die Konsole ansehen (Firebug, Chrome dev tools)), können Sie das sehen Der Inhalt wird über eine AJAX Anfrage abgerufen.

Mozilla hat einige docs darüber.

14
Spycho

Auch gibt es ausgezeichnete Director

12
Shekhar

Crossroads.js scheint einer der besten zu sein. Ein großer Vorteil ist, dass das Routing nicht von window.location abhängt. Es ist leichtgewichtig, da es sich nur um Routing und Routing alleine handelt.

Andere möchten Sie vielleicht versuchen: finch.js , davisjs (basierend auf pushState, so dass Sie vorhandene Links als Fallback verwenden können, wenn JS fehlschlägt)

Update anhängen: 30. März 2015 - Ich war Ende letzten Jahres zu AngularJS gezogen. Die zweifellos beste Switch-Form von JQ, verfügt über zahlreiche integrierte Module wie z. B. Routing.

4
Deepak Thomas