Introduction to JavaScript framework (xmlplus) components (7) Routing (ViewStack)

xmlplus is a JavaScriptframework used for rapid development of front-end and back-end projects. This article mainly introduces routing of the xmlplus component design series, which has certain reference value. Interested friends can refer to

. On the browser side, the understanding of routing is general It completes page switching based on different URLs. On the server side, relevant pages are fed back based on different URL requests. In this chapter, we define component routing in a broad sense: component object presents different child pages according to different commands received. Here we will introduce a component related to routing, namely the view stack ViewStack.

View stack preliminary

This component has already appeared in the last chapter of the "Documentation" section, "Delayed Instantiation". Some details will be explained here. The source code of this component is given again below.

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

From the staticinterface, this component allows to provide a static parameter index, which is the name of a child component object of the component ViewStack. It is used to indicate which A child component will be rendered first. See the example below.

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

In this example, ViewStack contains a attribute index with a value of bar, indicating that when the component is instantiated, the component object bar will be rendered first. By default, the first child component of this component will be used as the initial display object. Looking at the dynamic interface, the component's function item exports a read-only attribute named selected, which is used to indicate the currently displayed child component object.

Switching the target component object through events

For switching between child component objects, the function item of the component does not export the relevant interface, but Switching is completed by receiving the switch event. See the example below.

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

For this example, when the user clicks on the text, the text will switch between foo and bar, that is, switching between the two pages. The switching is performed by dispatching the switch event through the corresponding child object. In addition, when switching pages, the component ViewStack will also dispatch the event show to the page displayed this time, and the event hide to the page hidden this time. The relevant pages can choose to listen or not as needed. And in the listening function, you can get the ID of the previous displayed page and the related data transmitted.

Dynamic addition and removal of child objects

Component ViewStack supports dynamic addition and removal of child component objects, please see an example below.

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

In this example, a child component is dynamically added to the function item, and the currently displayed view is switched to the newly added view by dispatching the switch event.

Optimized configuration

Component ViewStack is generally used in conjunction with the delayed instantiation function of the component. For some more complex components, this can help speed up the display of the application's initial page. Here is a simple demonstration.

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

In this example, the ViewStack child contains three subcomponents, of which the component objects bar and alice are set to require delayed instantiation. They only really start when the show functions of these two component objects are called. Instantiate.

Use with HTML5 History API

Here we look at how to make the component ViewStack work with HTML5 Used in conjunction with the History API. Below is a simple example.

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

The key point of this example is that when the sub-page of the view stack component object changes, use the pushState function to record it; in addition, you need to listen to the popstate event of the browser. When the user clicks "Forward", When pressing the "Back" button, the switching of the corresponding page is completed. This technology is very suitable for completing refresh-free jumps in single-page applications, and can bring a very good experience to users.

This series of articles is based on the xmlplus framework. If you don’t know much about xmlplus, you can visit www.xmlplus.cn. Detailed getting started documentation is available here.

【Related recommendations】

1. Free js online video tutorial

2. JavaScript Chinese Reference Manual

3. php.cn Dugu Jiujian (3) - JavaScript video tutorial

The above is the detailed content of Introduction to JavaScript framework (xmlplus) components (7) Routing (ViewStack). For more information, please follow other related articles on the PHP Chinese website!