xmlplus组件设计系列之路由（ViewStack)（7）
在浏览器端，对路由的理解一般是根据不同的URL完成页面的切换。在服务器端，则是根据不同的URL请求回馈相关的页面。在本章，我们广义的组件路由的定义：根据接收到的不同命令，组件对象呈现出不同的子级页面。在这里将介绍与路由相关的一个组件，即视图栈ViewStack。
视图栈初步
该组件在《文档》部分的最后一个章节《延迟实例化》已经出现过了。这里将对一些细节部分进行解读。下面再次给出该组件的源码。
ViewStack:{
xml:"
从静态接口看，该组件允许提供静态参数index，该参数是组件ViewStack某一儿子组件对象的名称，它用于指出哪一个子级组件会被最先呈现。请看下面的示例。
Example1:{
xml:`
foo
bar
`
}
该示例中，ViewStack包含一值为bar的属性index，表明组件在实例化时，组件对象bar会最先呈现。而默认情况下，该组件的第一个子级组件会作为初始显示对象。再从动态接口看，该组件的函数项导出了一个名为selected的只读属性，该属性用于指示当前显示的子级组件对象。
通过事件切换目标组件对象
对于子级组件对象之间切换，该组件的函数项并未导出相关的接口，而是通过接收switch事件来完成切换。请看下面的示例。
Example2:{
xml:"\
foo\
bar\
"
fun:function(sys,items,opts){
sys.viewstack.on("click","*",function(e){
varto=this+''=="foo"?"bar":"foo",
data="hello,world";
this.trigger("switch",[to,data]);
});
sys.foo.on("show",function(e,prev,data){
console.log("previouspageis"+prev,"fromdatais"+data);
});
sys.bar.on("hide",function(e,prev,data){
console.log("previouspageis"+prev,"fromdatais"+data);
});
}
}
对于该示例，当用户点击文字时，文字会在foo和bar之间切换，也即两个页面之间切换，切换是通过相应子级对象派发switch事件进行的。另外，组件ViewStack在切换页面时，还会对本次显示的页面派发事件show，以及对本次隐藏的页面派发事件hide，相关页面可以根据需要选择侦听与否。并且在侦听函数中，可以获知前一显示页面ID以及所传输的相关数据。
动态添加与移除子级对象
组件ViewStack支持动态添加与移除子级的组件对象，请看下面的一个示例。
Example3:{
xml:"\
foo\
"
fun:function(sys,items,opts){
varxml="bar";
sys.viewstack.append(xml).trigger("switch","bar");
}
}
该示例中，函数项中动态添加了一个子级组件，并且通过派发事件switch将当前显示的视图切换为刚新添加的视图。
优化配置
组件ViewStack一般配合组件的延迟实例化功能使用。对于一些比较复杂的组件，这样有助于加快显示应用的初始页面。下面做简单示范。
Example4:{
xml:`
foo
bar
alice
`
map:{defer:"baralice"}
}
此示例中，ViewStack子级包含三个子组件，其中组件对象bar和alice被设置为需要延迟实例化，只有当这两组件对象的show函数得到调用时，它们才真正开始实例化。
与HTML5HistoryAPI的配合使用
这里我们看看如何让组件ViewStack与HTML5HistoryAPI的配合使用。下面是一个简单的例子。
Example5:{
xml:`
foo
bar
alice
`,
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);
});
}
}
该示例的关键点在于，当视图栈组件对象的子级页面发生变更时，使用函数pushState记录下来；另外需要侦听浏览器的popstate事件，当用户点击「前进」、「后退」按钮时，完成相应页面的切换。这种技术非常适合在单页应用中完成无刷新跳转，可以给用户带来非常好的体验。
本系列文章基于xmlplus框架。如果你对xmlplus没有多少了解，可以访问www.xmlplus.cn。这里有详尽的入门文档可供参考。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。