html页隐藏框架里的参数,十七、HTML5单页框架View.js介绍 - 视图参数

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

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

正如前文所说，视图是View.js的核心概念，也是实现业务的核心载体。如果业务相对简单，每个视图都各自为营，彼此互相独立，那么问题不大，开发工作会相当轻松。但真实的世界里，终端往往是需要多个页面进行互相交互、彼此传递数据，共享信息的。比如这样的场景：

网购确认订单界面，需要与收货地址列表界面交互，使得用户在收货地址列表界面触摸特定收货地址后，界面自动切回确认订单界面，并把选定的收货地址信息呈现到界面上

View.js能够实现吗？当然能。这是View.js的实现效果：

那么视图之间是如何协作呢？又是如何以一种清晰明了的规则保持视图之间较低的耦合关系的呢？借助视图参数。

视图参数，是指视图切换(亦即，活动视图发生变化)时，原视图(要离开的视图)向目标视图(要进入的视图)传递的参数。

作为视图交互的媒介和桥梁，视图参数支持所有类型，如：方法、数组、对象，以及DOM元素等，使得开发者不再受限于地址栏，突破地址栏只能传递类型简单，尺寸较小数据的限制，例如：

View.navTo("detail", {params: {id: "001", count: 2, callback: function(){}});

View.back({params: {showHeader: true}});

其中，对象：{params: xxx}是视图切换选项，使用关键字：params 指定视图参数这一选项。(除视图参数外，视图切换还有其它控制选项，后面的章节会有介绍。)

View.js为所有视图切换API均加上了参数传递支持，包括：

View.navTo()

View.changeTo()

View.back()

View.forward()

目标视图则可以使用API：view.hasParameter()及view.getParameter()等方法检索相关参数，如：

var view = View.ofId("detail");

view.hasParameter("id");// -> true

view.getParameter("count");// -> 2

view.seekParameter("callback");// -> function(){}

有了视图参数这一工具，对于文章开头提出的问题，我们就可以使用如下伪代码实现：

/* 确认订单视图 */

View.navTo("recipient-list", {params: {

selectCallback: function(recipient){

//呈现收货人信息：recipient

}

}});

/* 收货地址视图 */

Hammer(recipientListObj).on("tap", function(e){

var recipentItemObj = getItemObj(e.srcEvent.target);// 根据触摸位置获取对应的收货地址DOM

var recipient = recipentItemObj .data;// 前文中附加data至dom中

view.getParameter("selectCallback")(recipient);// 调用指定的“选择回调”

});

需要注意的是，视图参数区分大小写，且在离开后均会被清空，并不会保留。如果开发者需要持久化使用相关参数，则可以将其手动放至上下文中。

[第一篇]

[上一篇 - 视图上下文] [下一篇 - 视图选项]