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


Posted in Javascript onMay 02, 2017

在浏览器端,对路由的理解一般是根据不同的 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。这里有详尽的入门文档可供参考。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
微信小程序上传图片实例
May 28 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 #Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 #Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 #Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 #Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 #Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 #Javascript
ES6学习教程之对象的扩展详解
May 02 #Javascript
You might like
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python递归查询菜单并转换成json实例
2017/03/27 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
Python学习之os模块及用法
2020/06/03 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
用Python开发app后端有优势吗
2020/06/29 Python
Python logging模块handlers用法详解
2020/08/14 Python
机械专业应届生求职信
2013/12/12 职场文书
护理学专业求职信
2014/06/29 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
确保工程质量承诺书
2015/04/29 职场文书
工资证明格式模板
2015/06/12 职场文书