当前位置:首页 > Javascript技术文章 > xmlplus组件设计系列之路由(ViewStack)(7)

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

  • 发布时间:
  • 作者:码农之家原创
  • 点击:73

这篇文章主要知识点是关于xmlplus、组件设计、ViewStack、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下java相关资源

JavaScript ES6函数式编程入门经典

本书使用JavaScript ES6带你学习函数式编程。你将学习柯里化、偏函数、高阶函数以及Monad等概念。具有一定的参考价值,感兴趣的小伙伴们可以参考一下

查看详情

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 以及所传输的相关数据。

动态添加与移除子级对象

组件 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的全部知识点内容总结,大家还可以在下方相关文章里找到js实现淘宝放大镜效果的简、 JavaScript实现换肤功能实例、 Ionic2搭建开发环境步骤、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:JavaScript实现图片连播以及联级菜单的知识点

下一篇:Javascript实现的机器学习类库的原理

展开 +

收起 -

xmlplus组件设计 相关内容
你不知道的JavaScript 下卷

本书讲解JavaScript开发人员不求甚解的大趋势,深入理解语言内部的机制,全面介绍JavaScript中常被人误解和忽视的重要知识点,分为上中下三套,欢迎下载

查看详情
JavaScript从入门到精通

本书是javascript高级程序的权威指南,从初学者角度出发,通过通俗易懂的语言、丰富多彩的实例,详细介绍了使用JavaScript语言进行程序开发应该掌握的各方面技术,是一本入门经典书籍

查看详情
JavaScript之美

阅读文章这书好像是坐着来与一些JavaScript大师共进午餐,听她们探讨她们现场不断涌现出去的新念头。JavaScript能够说成全世界*异议和别人误会*多的程序语言。许多人企图用别的语言替代它的

查看详情
JavaScript和jQuery实战手册

JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精

查看详情
JavaScript框架设计

JavaScript,框架设计

查看详情
HTML5+CSS3+JavaScript从入门到精通

本书以基础知识、示例、实战案例相结合的方式详尽讲述了HTML,CSS,JavaScript及目前最新的前端技术

查看详情
Web前端开发精品课 JavaScript基础教程

《JavaScript基础教程》 共分为2大部分,第1部分是JavaScript基础知识,主要学习JavaScript基础概念如变量、运算符、表达式等。第二部分是JavaScript进阶知识,主要学习DOM、事件操作以及各种开发技

查看详情
xmlplus组件设计 学习笔记
网友NO.898474

xmlplus组件设计系列之分隔框(DividedBox)(8)

分隔框(DividedBox) 是一种布局类组件,可以分为两类,其中一类叫水平分隔框(HDividedBox),另一类叫垂直分隔框(VDividedBox)。水平分隔框会将其子级分为两列,而垂直分隔框则会将其子级分为两行。列与列之间以及行与行之间一般都会有一条可以拖动的用以改变子级组件大小的分隔条。下面仅以垂直分隔框为例来介绍此类组件是如何设计以及实现的。 成品组件用例 按照以往的设计经验,我们可以先写出想像中的成品组件用例,这将有助于我们后续的进一步的设计与实现。垂直分隔框既然是布局类的组件,那么它也一定是一个容器,该容器包含了上述我们提到的三种子级组件。为了使用方便,我们不应该把分隔框也写进去,分隔框应该由组件内部实现的。经过分析,我们得到下面的一个应用示例: Example1: { css: "#example div { width: 80%; height: 80%; bac……

网友NO.255103

xmlplus组件设计系列之按钮(2)

除了图标以外,按钮也许是最简单的组件了,现在来看看如何定义按钮组件。 使用原生按钮组件 在 xmlplus 中,HTML 元素也以组件的方式存在。所以,你可以直接通过使用 button 标签或者 input 标签来使用按钮组件。如下示例所示: Example: { xml: "div id='example'\ buttonDefault/button\ input type='submit'Primary/input\ /div"} 虽然原生按钮外观不那么吸引人,但原生按钮未经特殊包装,所以渲染起来最快,执行效率最高。 使用 Bootstrap 样式的按钮 如果你的项目在视觉上没有特别要求的话。使用 Bootstrap 样式来定义按钮组件是一个好主意。按传统方式使用 Bootstrap 按扭,你需要像下面这样使用。 button type="button" class="btn btn-default"Default/buttonbutton type="button" class="btn btn-primary"Primary/buttonbutton type="button" class="btn btn-success"Success/button 请认真观察,你是不是觉得它给你的比你要求的要多……

网友NO.972666

xmlplus组件设计系列之树(Tree)(9)

树形组件是一种具有层级结构的组件,广泛应用于各种场景。本章会实现一个简单的树形组件,尽管功能有限,但你可以通过扩展它来实现自己所需要的树形组件。 数据源 树形组件的数据源可以是 JSON 格式的数据对象,也可以是具有 XML 结构的数据或者是其它的具有层级结构的数据。本章将采用具有如下 JSON 格式的数据对象。 var data = { name: 'My Tree', children: [ { name: 'hello' }, { name: 'world' }, { name: 'child folder', children: [ { name: 'alice' } ] } ]}; 上述数据源中,name 值会作为树结点的名称显示,含 children 的数组代表节点的子级。 递归结构的设计 由 HTML 中的列表元素 ul 以及 li 组合而成对象具有天然的树形结构,我们不妨采用它们作为构建树形组件的基本元素。树形组件的最外层必然是一个 ul 元素,所以我们可以暂时定义树形组件如下: Tree: { xml: `ul id='tree' Item……

网友NO.554605

xmlplus组件设计系列之选项卡(Tabbar)(5)

这一章将设计一个选项卡组件,选项卡组件在手持设备上用的比较多,下面是一个示意图: 选项卡组成 在具体实现之前,想像一下目标组件是如何使用的,对于设计会有莫大的帮助。通过观察,可以将选项卡组件分为容器部分和子项部分,正如下面的 XML 结构所展示的。 Tabbar id="tabbar" TabItem id="home" label="首页"/ TabItem id="setting" label="设置"/ TabItem id="logs" label="日志"/ TabItem id="about" label="关于"//Tabbar 现在我们把目光切换到选项卡组件的子项部分,来看看子项部分是如何分解的。通过示意图,你可以发现子项部分可以分解为子项容器以及包含一个图标和一个文本的子级部分。 a id="tabitem" Icon id="icon"/ span id="label"首页/span/a 所以,现在我们的目标已经很明确了,主要设计三个组件:图标组件 Icon、选项卡组件的子项 TabItem 以及选项卡组件的容器 Tabbar。 结构图……

网友NO.448997

xmlplus组件设计系列之文本框(TextBox)(3)

文本框是页面中最常用的输入组件,它的默认使用方式如下: input type='text'/ 当然,这里的 `type='text' 可以略去不写。大部分情况下,使用默认的文本框作为输入组件是没什么问题的,但在具体的项目中,难免会有功能扩展的需求。这里仅以如何增加文本框数据的格式化输入输出能力为例说明如何扩展原生的文本框组件。除了本章的内容,你也可以参考官方文档中的 参数映射 一章。 目标组件的功能分析 对于原生的文本框,我们获取到的值是文本类型的,就像下面的示例所展示的: Example: { xml: "input id='input' value='text'/", fun: function (sys, items, opts) { console.log(typeof this.prop("value")); // string }} 如果需要其它类型的数值,就需要对获取到的数据进行格式化操作。比如,如果需要整型数,就需要用到 parseInt 函数;如果需要浮点型数,就需要用到 parseFloat 函数。如……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757