十二、HTML5单页框架View.js介绍 - 视图容器

不需要 Npm 的单页应用框架:

View.js - http://view-js.com


在使用View.js开发移动端应用时,我们通常以视图为单位拆分并实施对应的功能开发。一个视图完整的包括了一个单独的界面所要展现的所有内容。也就是说,视觉上一个页面中的所有内容,都是一个特定的视图所提供的。虽然视图之间可能含有视觉上的共性元素,但出于简化问题的考虑,View.js并不打算支持视图内局部元素的跨视图复用。

针对“多个视图的视图正文中含有视觉相同的元素”的场景,View.js建议开发者将其在不同视图中分别定义。但对于视图正文之外的其它边界位置,如视图上方、视图下方等用于执行跨视图任务的区域,开发者则可以利用View.js提供的“视图容器”实现这种“页面局部区块是单页应用”的特性。

例如,对于所有视图都需要在底部展现导航入口的场景,开发者就可以按照下面代码展现的方式组织DOM:

<!DOCTYPE HTML>
<html>
<head>
    <link rel = "stylesheet" href = "main.css"/>
</head>
<body>
    <div data-view-container>
        <section id = "view1" data-view = "true" >
        ...
        </section>
        <section id = "view2" data-view = "true" >
            ...
        </section>  </section>ion>
    </div>
    <footer>
        <span>首页</span>
        <span>分类</span>
        <span>购物车</span>
        <span>我的</span>
    </footer>
</body>
</html>

其中,data-view-container属性用于告知View.js视图容器的位置。除非额外指定,否则View.js将使使用document.body作为视图容器。

 

同样地,在使用View.js完成诸如PC管理后台的功能开发时,开发者可以将主操作区域使用视图容器整合在一起,而将操作区域之外的顶部导航和侧边导航作为多视图共享使用的DOM单独定义。

 


[第一篇]
[上一篇 - 视图群组] [下一篇 - 事件驱动(1)]

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值