Einführung in die Komponenten des JavaScript-Frameworks (xmlplus) (7) Routing (ViewStack)

xmlplus ist ein JavaScriptFramework für die schnelle Entwicklung von Front-End- und Back-End-Projekten. In diesem Artikel wird hauptsächlich das Routing der xmlplus-Komponentendesignreihe vorgestellt, das einen gewissen Referenzwert hat. Auf der Browserseite ist das Verständnis des Routings allgemein Schließt den Seitenwechsel basierend auf verschiedenen URLs ab. Auf der Serverseite werden relevante Seiten basierend auf unterschiedlichen URL-Anfragen zurückgemeldet. In diesem Kapitel definieren wir Komponenten-Routing im weitesten Sinne: Entsprechend den verschiedenen empfangenen Befehlen präsentiert das Komponenten-

-Objekt

verschiedene untergeordnete Seiten. Hier stellen wir eine Routing-bezogene Komponente vor, nämlich den Ansichtsstapel ViewStack.

Vorläufiger Ansichtsstapel

Diese Komponente ist bereits im letzten Kapitel des Abschnitts „Dokumentation“, „Verzögerte Instanziierung“, erschienen. Einige Details werden hier erläutert. Der Quellcode dieser Komponente ist weiter unten noch einmal angegeben.

Über die

ViewStack: { 
 xml: "<p id=&#39;viewstack&#39;/>",
 fun: function (sys, items, opts) {
  var args, children = this.children(),
   table = children.call("hide").hash(),
   ptr = table[opts.index] || children[0];
  if (ptr) ptr = ptr.trigger("show").show();
  this.on("switch", function ( e, to ) {
   table = this.children().hash();
   if ( !table[to] || table[to] == ptr ) return;
   e.stopPropagation();
   args = [].slice.call(arguments).slice(2);
   ptr.trigger("hide", [to+&#39;&#39;].concat(args)).hide();
   ptr = table[to].trigger("show", [ptr+&#39;&#39;].concat(args)).show();
  });
  return Object.defineProperty({}, "selected", { get: function() {return ptr;}});
 }
}

statische

-Schnittstelle ermöglicht diese Komponente die Bereitstellung eines statischen Parameterindex, der der Name eines untergeordneten Komponentenobjekts der Komponente ViewStack ist. which is used Gibt an, welche untergeordnete Komponente zuerst gerendert wird. Siehe das Beispiel unten.

In diesem Beispiel enthält ViewStack einen

Example1: {
 xml: `<ViewStack index=&#39;bar&#39;>
    <button id=&#39;foo&#39;>foo</button>
    <button id=&#39;bar&#39;>bar</button>
   </ViewStack>`
}

-Attribut-

-Index mit dem Wert bar, der angibt, dass bei der Instanziierung der Komponente zuerst die Objektleiste der Komponente gerendert wird. Standardmäßig wird die erste untergeordnete Komponente dieser Komponente als anfängliches Anzeigeobjekt verwendet. Betrachtet man die dynamische Schnittstelle, exportiert das -Funktionselement der Komponente ein schreibgeschütztes Attribut mit dem Namen „selected“, das zur Angabe des aktuell angezeigten untergeordneten Komponentenobjekts verwendet wird.

Zielkomponentenobjekt durch Ereignisse wechseln

Zum Umschalten zwischen untergeordneten Komponentenobjekten exportiert das Funktionselement der Komponente nicht die relevante Schnittstelle, sondern Switching wird durch den Empfang des Switch-Ereignisses abgeschlossen. Siehe das Beispiel unten.

Wenn der Benutzer in diesem Beispiel auf den Text klickt, wechselt der Text zwischen foo und bar, d. h. der Wechsel zwischen den beiden Seiten erfolgt durch Auslösen des Switch-Ereignisses von entsprechendes untergeordnetes Objekt. Darüber hinaus sendet die ViewStack-Komponente beim Seitenwechsel auch das Ereignis „show“ an die diesmal angezeigte Seite und das Ereignis „hide“ an die dieses Mal ausgeblendete Seite. Die relevanten Seiten können je nach Bedarf wählen, ob sie zuhören möchten oder nicht. Und in der Abhörfunktion können Sie die ID der zuvor angezeigten Seite und die zugehörigen übertragenen Daten abrufen.

Example2: {
 xml: "<ViewStack id=&#39;viewstack&#39;>\
    <button id=&#39;foo&#39;>foo</button>\
    <button id=&#39;bar&#39;>bar</button>\
   </ViewStack>"
 fun: function (sys, items, opts) {
  sys.viewstack.on("click", "*", function(e) {
   var to = this + &#39;&#39; == "foo" ? "bar" : "foo",
    data = "hello, world";
   this.trigger("switch", [to, data]);
  });
  sys.foo.on("show", function (e, prev, data) {
   console.log("previous page is " + prev, "from data is " + data);
  });
  sys.bar.on("hide", function (e, prev, data) {
   console.log("previous page is " + prev, "from data is " + data);
  });
 }
}

Untergeordnete Objekte dynamisch hinzufügen und entfernen

Die Komponente ViewStack unterstützt das dynamische Hinzufügen und Entfernen von untergeordneten Komponentenobjekten, siehe unten ein Beispiel.

In diesem Beispiel wird eine untergeordnete Komponente dynamisch zum Funktionselement hinzugefügt und die aktuell angezeigte Ansicht wird durch Auslösen des Switch-Ereignisses auf die neu hinzugefügte Ansicht umgeschaltet.

Example3: {
 xml: "<ViewStack id=&#39;viewstack&#39;>\
    <button id=&#39;foo&#39;>foo</button>\
   </ViewStack>"
 fun: function (sys, items, opts) {
  var xml = "<button id=&#39;bar&#39;>bar</button>";
  sys.viewstack.append(xml).trigger("switch", "bar");
 }
}

Optimierte Konfiguration

Die Komponente ViewStack wird im Allgemeinen in Verbindung mit der verzögerten Instanziierungsfunktion der Komponente verwendet. Bei einigen komplexeren Komponenten kann dies dazu beitragen, die Anzeige der Startseite der Anwendung zu beschleunigen. Hier ist eine einfache Demonstration.

In diesem Beispiel enthält das ViewStack-Kind drei Unterkomponenten, in denen die Komponentenobjekte bar und alice so eingestellt sind, dass sie eine verzögerte Instanziierung erfordern. Sie werden nur instanziiert, wenn die Funktionen dieser beiden Komponenten angezeigt werden Objekte werden aufgerufen.

Example4: {
 xml: `<ViewStack>
    <button id=&#39;foo&#39;>foo</button>
    <button id=&#39;bar&#39;>bar</button>
    <button id=&#39;alice&#39;>alice</button>
   </ViewStack>`
 map: { defer: "bar alice" }
}

Verwendung mit

HTML5History API
Hier sehen wir uns an, wie man die Komponente ViewStack zum Laufen bringt HTML5 Wird in Verbindung mit der History-API verwendet. Unten finden Sie ein einfaches Beispiel.

Der Kernpunkt dieses Beispiels ist, dass Sie, wenn sich die Unterseite des Ansichtsstapel-Komponentenobjekts ändert, die Funktion pushState verwenden müssen, um es aufzuzeichnen. Außerdem müssen Sie das Popstate-Ereignis abhören Wenn der Benutzer auf die Schaltflächen „Vorwärts“ und „Zurück“ klickt, wird der Wechsel zur entsprechenden Seite abgeschlossen. Diese Technologie eignet sich sehr gut zum Durchführen aktualisierungsfreier Sprünge in Einzelseitenanwendungen und kann den Benutzern ein sehr gutes Erlebnis bieten.

Example5: {
 xml: `<ViewStack id=&#39;example&#39;>
    <button id=&#39;foo&#39;>foo</button>
    <button id=&#39;bar&#39;>bar</button>
    <button id=&#39;alice&#39;>alice</button>
   </ViewStack>`,
 fun: function (sys, items, opts) {
  sys.example.on("show", "button", function (e, prev) {
   window.history.pushState({name: this + ""}, null, "/" + this);
  });
  window.addEventListener("popstate", function(e) {
   sys.example.trigger("switch", e.state.name);
  });
 }
}

Diese Artikelserie basiert auf dem xmlplus-Framework. Wenn Sie nicht viel über xmlplus wissen, können Sie www.xmlplus.cn besuchen. Eine ausführliche Dokumentation zu den ersten Schritten finden Sie hier.

[Verwandte Empfehlungen]

1.

Kostenloses JS-Online-Video-Tutorial

2.

JavaScript-Referenzhandbuch für Chinesisch

3.

php.cn Dugu Jiujian (3) – JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonEinführung in die Komponenten des JavaScript-Frameworks (xmlplus) (7) Routing (ViewStack). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!