二十九、HTML5单页框架View.js介绍 - 视图命名空间

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

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

---

视图的唯一性，由 视图命名空间 和 视图ID 两部分决定。视图ID可以相同，但视图命名空间一定需要时空唯一。

默认情况下，开发者在创建视图时不需要指定命名空间，视图命名空间将默认为：default。当多个相同ID的视图需要共存时，开发者才需要设定不同的命名空间。

视图命名空间的设定，通过在视图的布局骨架上声明dom属性：data-view-namespace 完成。例如：

	<section id = "home-page" data-view-namespace = "b2c-mall">
		...
	</section>
	<section id = "home-page" data-view-namespace = "o2o-mall">
	</section>

设定命名空间后，开发者在实现视图之间的跳转逻辑时，需要同步指明目标视图所隶属的命名空间。如果目标视图的命名空间是 default，则无需显示声明。

正如 前文 所述，开发者有两种方式实现视图跳转：

1. 使用DOM属性：data-view-rel 显示声明
2. 使用API：View.navTo(), View.changeTo() 动态执行

当使用属性显示声明时，开发者需要使用 data-view-rel-namespace 属性指定目标视图所隶属的命名空间，例如：

	<div data-view-rel = "goods-detail" data-view-rel-namespace = 'seller'>商品详情</div>

当使用API时，开发者需要在API中提供目标视图所隶属的命名空间，例如：

	/* home-page 的视图命名空间为 default */
	View.navTo("home-page");
	
	/* goods-detail 的视图命名空间为 seller */
	View.navTo("goods-detail", "seller");
	
	/* confirm-order 的视图命名空间为 seller */
	View.changeTo("confirm-order", "seller", {params: {count: 1}});

当非default命名空间的视图在变为活动视图后，其视图命名空间将同步反映在地址栏中，形如下图所示：

---

[第一篇]
[上一篇 - 识别浏览器的前进与后退] [下一篇 - 视图直接访问]