Native JavaScript -Routing?

JavaScript bietet pushState und replaceState -APIs zum Manipulieren von Browser -URLs und erstellt die Erstellung von Einzelseiten -Anwendungen (SPAs), die ohne Seiten -Aktualisierung navigieren. Das Erstellen einer robusten Routing-Logik mit nur diesen APIs auf niedriger Ebene kann jedoch komplex sein. Bibliotheken wie React Router vereinfachen diesen Prozess und bieten einen deklarativen Ansatz zur Routendefinition mit JSX an.

Reagieren Sie Router<switch></switch> Komponenten iteriert durch verschachtelte<route></route> Komponenten, die die erste Matching -Route basierend auf der aktuellen URL rendern. Dieser Ansatz ähnelt einem regelmäßigen Expressions -Matching, jedoch mit zusätzlichen Funktionen wie parametrisierten Pfadsegmenten (z. B :id ). Diese Abhängigkeit von externen Bibliotheken fügt zwar effektiv, fügt zwar Overhead hinzu.

Die Webplattform entwickelt sich, um dies zu beheben. URLPattern bietet eine native Möglichkeit, URL -Routing -Muster zu definieren und zu testen. Es verwendet eine Syntax ähnlich wie reguläre Ausdrücke, jedoch mit domänenspezifischen Erweiterungen für den Umgang mit Pfadensegmenten.

 const p = neue urlpattern ({{
  Pfadname: '/foo/:image.jpg',
  BaseURL: 'https://example.com',,
});

let result = p.Test ('https://example.com/foo/cat.jpg'); // WAHR
result = p.exec ('https://imagecdn1.example.com/foo/cat.jpg');
// result.hostname.groups.subdomain wird 'imagecdn1' sein
// result.PathName.groups [0] wird 'foo' sein
// result.pathname.groups.image wird "Katze" sein

Das Potenzial von URLPattern liegt in der Vereinfachung der Spa -Routing ohne externe Bibliotheken, was zu kleineren, schnelleren Websites führt. Es könnte auch vorhandene Routing -Bibliotheken zugute kommen, indem es einen effizienteren zugrunde liegenden Mechanismus bereitstellt. URLPattern und ihre Polyfill bieten noch einen Einblick in die Zukunft des Webroutings.

Darüber hinaus zeigt sich der erneute Fokus der Webplattform auf Spas in der Wiederbelebung gemeinsamer Elementübergänge, die die Benutzererfahrung während der Navigation verbessern. Für ein tieferes Verständnis von URLPattern Wenden Sie sich an den entsprechenden Google Webdev -Blog -Beitrag.

Das obige ist der detaillierte Inhalt vonNative JavaScript -Routing?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!