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

JavaScript 2019-01-07

在浏览器端，对路由的理解一般是根据不同的 URL 完成页面的切换。在服务器端，则是根据不同的 URL 请求回馈相关的页面。在本章，我们广义的组件路由的定义：根据接收到的不同命令，组件对象呈现出不同的子级页面。在这里将介绍与路由相关的一个组件，即视图栈 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 某一儿子组件对象的名称，它用于指出哪一个子级组件会被最先呈现。请看下面的示例。

` }

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

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

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

\ \ \ " fun: function (sys,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","from data is " + data); }); } }

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

动态添加与移除子级对象

组件 ViewStack 支持动态添加与移除子级的组件对象，请看下面的一个示例。

\ \ " fun: function (sys,opts) { var xml = ""; sys.viewstack.append(xml).trigger("switch","bar"); } }

该示例中，函数项中动态添加了一个子级组件，并且通过派发事件 switch 将当前显示的视图切换为刚新添加的视图。

优化配置

组件 ViewStack 一般配合组件的延迟实例化功能使用。对于一些比较复杂的组件，这样有助于加快显示应用的初始页面。下面做简单示范。

` map: { defer: "bar alice" } }

此示例中，ViewStack 子级包含三个子组件，其中组件对象 bar 和 alice 被设置为需要延迟实例化，只有当这两组件对象的 show 函数得到调用时，它们才真正开始实例化。

与 HTML5 History API 的配合使用

这里我们看看如何让组件 ViewStack 与 HTML5 History API 的配合使用。下面是一个简单的例子。

`,opts) { sys.example.on("show","button",prev) { window.history.pushState({name: this + ""},null,"/" + this); }); window.addEventListener("popstate",function(e) { sys.example.trigger("switch",e.state.name); }); } }

该示例的关键点在于，当视图栈组件对象的子级页面发生变更时，使用函数 pushState 记录下来；另外需要侦听浏览器的 popstate 事件，当用户点击「前进」、「后退」按钮时，完成相应页面的切换。这种技术非常适合在单页应用中完成无刷新跳转，可以给用户带来非常好的体验。

本系列文章基于 xmlplus 框架。如果你对 xmlplus 没有多少了解，可以访问 nofollow" href="http://www.xmlplus.cn">www.xmlplus.cn。这里有详尽的入门文档可供参考。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

ViewStack xmlplus 组件组件组件路由路由

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支持第三个参数...

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其他强类型语言...

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提交） 2.资源...

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是须知的必须有...