在浏览器端，对路由的理解一般是根据不同的 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 以及所传输的相关数据。

动态添加与移除子级对象

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

Example3: {
 xml: "<ViewStack id='viewstack'>\
    <button id='foo'>foo</button>\
   </ViewStack>"
 fun: function (sys, items, opts) {
  var xml = "<button id='bar'>bar</button>";
  sys.viewstack.append(xml).trigger("switch", "bar");
 }
}

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

优化配置

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

Example4: {
 xml: `<ViewStack>
    <button id='foo'>foo</button>
    <button id='bar'>bar</button>
    <button id='alice'>alice</button>
   </ViewStack>`
 map: { defer: "bar alice" }
}

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

与 HTML5 History API 的配合使用

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

Example5: {
 xml: `<ViewStack id='example'>
    <button id='foo'>foo</button>
    <button id='bar'>bar</button>
    <button id='alice'>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);
  });
 }
}

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

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

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

# xmlplus  # 组件  # 路由  # ViewStack  # xmlplus组件设计系列之网格（DataGrid）(10）  # xmlplus组件设计系列之分隔框（DividedBox)（8）  # xmlplus组件设计系列之树（Tree）（9）  # 值得分享和收藏的xmlplus组件学习教程  # 移除  # 是一个  # 文档  # 在这里  # 过了  # 则是  # 还会  # 会在  # 你对  # 将对  # 非常好  # 可供  # 跳转  # 呈现出  # 可以根据  # 设置为  # 来完成  # 值为  # 大家多多  # 也即 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何使用Livewire构建动态组件？（入门代码）  WordPress 子目录安装中正确处理脚本路径的完整指南  如何用JavaScript实现文本编辑器_光标和选区怎么处理  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  Laravel怎么写单元测试_PHPUnit在Laravel项目中的基础测试入门  如何在阿里云完成域名注册与建站？  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  如何快速搭建二级域名独立网站？  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  如何在万网开始建站？分步指南解析  EditPlus 正则表达式 实战(3)  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  个人网站制作流程图片大全,个人网站如何注销？  Windows10电脑怎么设置虚拟光驱_Win10右键装载ISO镜像文件  标题：Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  高防网站服务器：DDoS防御与BGP线路的AI智能防护方案  zabbix利用python脚本发送报警邮件的方法  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  Edge浏览器怎么启用睡眠标签页_节省电脑内存占用优化技巧  Laravel如何实现模型的全局作用域？（Global Scope示例）  如何快速登录WAP自助建站平台？  Laravel API资源类怎么用_Laravel API Resource数据转换  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  大连 网站制作,大连天途有线官网？  如何选择PHP开源工具快速搭建网站？  LinuxShell函数封装方法_脚本复用设计思路【教程】  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  JS去除重复并统计数量的实现方法  javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】  音响网站制作视频教程,隆霸音响官方网站？  Laravel怎么导出Excel文件_Laravel Excel插件使用教程  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  Laravel中的withCount方法怎么高效统计关联模型数量  Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践  Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决  Laravel用户密码怎么加密_Laravel Hash门面使用教程  高性价比服务器租赁——企业级配置与24小时运维服务  Laravel Sail是什么_基于Docker的Laravel本地开发环境Sail入门  Win11怎么设置默认图片查看器_Windows11照片应用关联设置  简单实现jsp分页  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  制作公司内部网站有哪些,内网如何建网站？  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  html5audio标签播放结束怎么触发事件_onended回调方法【教程】  Python数据仓库与ETL构建实战_Airflow调度流程详解