Introduction aux composants du framework JavaScript (xmlplus) (7) Routage (ViewStack)

xmlplus est un JavaScriptframework pour le développement rapide de projets front-end et back-end. Cet article présente principalement le routage de la série de conception de composants xmlplus, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Du côté du navigateur, la compréhension du routage est générale. changement de page en fonction de différentes URL. Côté serveur, les pages pertinentes sont renvoyées en fonction de différentes requêtes URL. Dans ce chapitre, nous définissons le routage des composants au sens large : Selon les différentes commandes reçues, le composant objet présente différentes pages enfants. Nous allons introduire ici un composant lié au routage, à savoir la pile de vues ViewStack.

Pile de vues préliminaires

Ce composant est déjà apparu dans le dernier chapitre de la section "Documentation", "Instanciation différée". Certains détails seront expliqués ici. Le code source de ce composant est redonné ci-dessous.

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;}});
 }
}

Depuis l'interface statique , ce composant permet de fournir un index de paramètre statique, qui est le nom d'un objet composant enfant du composant ViewStack, qui est utilisé Indique quel composant enfant sera rendu en premier. Voir l'exemple ci-dessous.

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

Dans cet exemple, ViewStack contient un attribut index avec une valeur de bar, indiquant que lorsque le composant est instancié, la barre d'objet du composant sera rendue en premier. Par défaut, le premier composant enfant de ce composant sera utilisé comme objet d'affichage initial. En regardant l'interface dynamique, l'élément fonction du composant exporte un attribut en lecture seule nommé sélectionné, qui est utilisé pour indiquer l'objet du composant enfant actuellement affiché.

Changer l'objet composant cible via des événements

Pour basculer entre les objets composants enfants, l'élément de fonction du composant n'exporte pas l'interface correspondante, mais la commutation est complété par la réception de l'événement de commutation. Voir l'exemple ci-dessous.

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);
  });
 }
}

Pour cet exemple, lorsque l'utilisateur clique sur le texte, le texte basculera entre foo et bar, c'est-à-dire que la commutation entre les deux pages est effectuée en envoyant l'événement switch du. objet enfant correspondant. De plus, lors du changement de page, le composant ViewStack enverra également l'événement show à la page affichée cette fois, et l'événement hide à la page masquée cette fois. Les pages concernées peuvent choisir d'écouter ou non selon leurs besoins. Et dans la fonction d'écoute, vous pouvez obtenir l'ID de la page affichée précédente et les données associées transmises.

Ajouter et supprimer dynamiquement des objets enfants

Le composant ViewStack prend en charge l'ajout et la suppression dynamiques d'objets de composants enfants, veuillez consulter un exemple ci-dessous.

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");
 }
}

Dans cet exemple, un composant enfant est ajouté dynamiquement à l'élément de fonction et la vue actuellement affichée passe à la vue nouvellement ajoutée en distribuant l'événement switch.

Configuration optimisée

Le composant ViewStack est généralement utilisé en conjonction avec la fonction d'instanciation retardée du composant. Pour certains composants plus complexes, cela peut permettre d'accélérer l'affichage de la page initiale de l'application. Voici une démonstration simple.

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" }
}

Dans cet exemple, l'enfant ViewStack contient trois sous-composants, dans lesquels les objets du composant bar et alice sont définis pour nécessiter une instanciation retardée. Ils ne seront instanciés que lorsque les fonctions d'affichage de ces deux composants. les objets sont appelés. Commencez vraiment à instancier.

Utilisation avec HTML5 Historique API

Nous voyons ici comment faire fonctionner le composant ViewStack avec HTML5 Utilisé conjointement avec l'API History. Vous trouverez ci-dessous un exemple simple.

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);
  });
 }
}

Le point clé de cet exemple est que lorsque la sous-page de l'objet composant de la pile de vues change, utilisez la fonction pushState pour l'enregistrer en plus, vous devez écouter l'événement popstate de ; le navigateur. Lorsque l'utilisateur clique sur les boutons « Suivant » et « Retour » pour terminer le changement de page correspondante. Cette technologie est très adaptée pour effectuer des sauts sans actualisation dans des applications d'une seule page et peut apporter une très bonne expérience aux utilisateurs.

Cette série d'articles est basée sur le framework xmlplus. Si vous ne savez pas grand-chose sur XMLplus, vous pouvez visiter www.xmlplus.cn. Une documentation détaillée de démarrage est disponible ici.

[Recommandations associées]

1. Tutoriel vidéo en ligne js gratuit

2 Manuel de référence en chinois JavaScript

.

3. php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!