xmlplus组件设计系列之路由（ViewStack)（7）

在浏览器端，对路由的理解一般是根据不同的 URL 完成页面的切换。在服务器端，则是根据不同的 URL 请求回馈相关的页面。在本章，我们广义的组件路由的定义：根据接收到的不同命令，组件对象呈现出不同的子级页面。在这里将介绍与路由相关的一个组件，即视图栈 ViewStack。

视图栈初步

该组件在《文档》部分的最后一个章节《延迟实例化》已经出现过了。这里将对一些细节部分进行解读。下面再次给出该组件的源码。

ViewStack: {  xml: "<div id='viewstack'/>", 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+''].concat(args)).hide();   ptr = table[to].trigger("show", [ptr+''].concat(args)).show();  });  return Object.defineProperty({}, "selected", { get: function() {return ptr;}}); }}

从静态接口看，该组件允许提供静态参数 index，该参数是组件 ViewStack 某一儿子组件对象的名称，它用于指出哪一个子级组件会被最先呈现。请看下面的示例。

Example1: { xml: `<ViewStack index='bar'>    <button id='foo'>foo</button>    <button id='bar'>bar</button>   </ViewStack>`}

该示例中，ViewStack 包含一值为 bar 的属性 index，表明组件在实例化时，组件对象 bar 会最先呈现。而默认情况下，该组件的第一个子级组件会作为初始显示对象。再从动态接口看，该组件的函数项导出了一个名为 selected 的只读属性，该属性用于指示当前显示的子级组件对象。

通过事件切换目标组件对象

对于子级组件对象之间切换，该组件的函数项并未导出相关的接口，而是通过接收 switch 事件来完成切换。请看下面的示例。

Example2: { xml: "<ViewStack id='viewstack'>/    <button id='foo'>foo</button>/    <button id='bar'>bar</button>/   </ViewStack>" fun: function (sys, items, opts) {  sys.viewstack.on("click", "*", function(e) {   var to = this + '' == "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);  }); }}

对于该示例，当用户点击文字时，文字会在 foo 和 bar 之间切换，也即两个页面之间切换，切换是通过相应子级对象派发 switch 事件进行的。另外，组件 ViewStack 在切换页面时，还会对本次显示的页面派发事件 show，以及对本次隐藏的页面派发事件 hide，相关页面可以根据需要选择侦听与否。并且在侦听函数中，可以获知前一显示页面 ID 以及所传输的相关数据。