View
获取当前的浏览状态。
签名:
可用版本:
1.6.2+
返回:
当前的浏览状态,反映了当前活动视图的浏览信息。
公用数据存取上下文,用于跨视图存取数据。 当需要抽取变量,使得可以跨视图访问时,开发者应当尽可能地使用公用上下文,而非window
,以降低变量污染的可能。
签名:
可用版本:
1.6.2+
返回:
公用的数据存取上下文。
判断浏览器的history
对象是否支持pushState
API。
签名:
View.checkIfBrowserHistorySupportsPushPopAction(): boolean
可用版本:
1.6.2+
入参:
无
返回:
true
- 浏览器的 history
对象支持 pushState
API。否则返回 false
。获取视图容器对应的 DOM 元素。
签名:
View.getViewContainerDomElement(): HTMLElement
可用版本:
1.6.2+
入参:
无。
返回:
视图容器对应的 DOM 元素。如果开发者没有另外设置,将返回
document.body
。从 DOM 树中获取匹配给定选择器的 DOM 元素。
签名:
View.find(rootObj?: HTMLElement, selector: string): HTMLElement
可用版本:
1.6.2+
入参:
rootObj?: HTMLElement
- 检索 DOM 元素的根元素,可选。默认为视图容器。selector: string
- 选择器。
返回:
给定根元素下, 匹配给定选择器的 DOM 元素。如果没有 DOM 元素与之对应,则返回
null
。调用举例:
/**
* 从 视图容器 中检索 class 名包含 btn 的 DOM 元素
*/
var btnObj = View.find(".btn");
/**
* 从 containerObj 中检索 class 名包含 btn 的 DOM 元素
*/
btnObj = View.find(containerObj, ".btn");
从 DOM 树中获取匹配给定选择器的多个 DOM 元素。
签名:
View.findAll(rootObj?: HTMLElement, selector: string): NodeList | null
可用版本:
1.6.2+
入参:
rootObj?: HTMLElement
- 检索 DOM 元素的根元素,可选。默认为视图容器。selector: string
- 选择器。
返回:
给定根元素下,匹配给定选择器的多个 DOM 元素。如果给定的
rootObj
为 null
,则返回 null
。获取视图实例。
签名:
View.ofId(viewId: string, viewNamespace?: string): View
可用版本:
1.6.2+
入参:
viewId: string
- 视图ID。viewNamespace?: string
- 视图隶属的命名空间。可选,默认为:default
。
返回:
匹配的视图实例。
如果视图容器中 没有 DOM 元素与给定的 ID 和 命名空间 匹配,则抛出异常。
判断视图是否存在。
签名:
View.ifExists(viewId: string, viewNamespace?: string): boolean
可用版本:
1.6.2+
入参:
viewId: string
- 视图ID。viewNamespace?: string
- 视图隶属的命名空间。可选,默认为:default
。
返回:
true
- 视图存在,false
- 视图不存在。如果在 View.js 完成初始化之前调用该方法,无论视图是否真正存在,都将返回
false
。列举所有视图。
签名:
View.listAll(viewName?: string): View[]
可用版本:
1.6.2+
入参:
viewName?: string
- 视图名称,可选。如果为空,则返回所有视图实例。否则返回声明为该名称的视图实例。不区分大小写。
返回:
匹配给定名称的,或者所有实例化的视图实例组成的数组。
列举被视图声明了的所有视图名称。
签名:
View.listAllViewNames(): string[]
可用版本:
1.6.2+
入参:
无。
返回:
被视图声明的所有视图名称。如果没有任何视图声明有视图名称,将返回空数组。
视图名称在视图的 DOM 骨架上,使用
data-view-name
属性声明。设置给定的视图为默认视图。
签名:
View.setAsDefault(viewId: string, viewNamespace?: string): View
可用版本:
1.6.2+
入参:
viewId: string
- 视图ID。viewNamespace?: string
- 视图隶属的命名空间。可选,默认为:default
。
返回:
window.View
以供开发者链式调用。判断所有视图默认是否可以直接访问。
签名:
View.isDirectlyAccessible(): boolean
可用版本:
1.6.2+
入参:
无。
返回:
true
- 视图默认可以直接访问,false
- 视图默认不可以直接访问。如果没有单独声明,视图将使用该默认值决定自己是否可以直接访问。
设置所有视图默认是否可以直接访问。
签名:
View.setIsDirectlyAccessible(isDirectlyAccessible: boolean): View
可用版本:
1.6.2+
入参:
isDirectlyAccessible: boolean
- 是否可以直接访问。
返回:
window.View
以供开发者链式调用。设置特定视图是否可以直接访问。
签名:
View.setIsDirectlyAccessible(viewId: string, viewNamespace?: string, isDirectlyAccessible: boolean): View
可用版本:
1.6.2+
入参:
viewId: string
- 视图ID。viewNamespace?: string
- 视图隶属的命名空间。可选,默认为:default
。isDirectlyAccessible: boolean
- 是否可以直接访问。
返回:
window.View
以供开发者链式调用。有别于
viewInstance.setIsDirectlyAccessible()
,该方法可以在 View.js 完成初始化之前调用。获取当前的活动视图。
签名:
View.getActiveView(): View | null
可用版本:
1.6.2+
入参:
无。
返回:
当前处于活动状态的视图。如果没有视图处于活动状态(如:View.js 尚未完成初始化),则返回
null
。获 取默认视图。
签名:
View.getDefaultView(): View | null
可用版本:
1.6.2+
入参:
无。
返回:
默认视图。如果 View.js 尚未完成初始化,则返回
null
。获取设置的视图跳转动画执行器。
签名:
可用版本:
1.6.2+
入参:
无。
返回:
设置的视图跳转动画执行器。如果没有设置,则返回
null
。设置视图跳转动画执行器。
签名:
可用版本:
1.6.2+
入参:
无。
返回:
window.View
以供开发者链式调用。获取体现在地址栏中的,当前活动视图的视图选项集合。
签名:
View.getActiveViewOptions(): Object | null
可用版本:
1.6.2+
入参:
无。
返回:
当前活动视图的视图选项集合。视图选项以 key-value 的形式存放在集合中。如果没有任何视图选项,则返回
null
。调用举例:
var options = View.getActiveViewOptions();
var paramValue1 = options["param-name1"],
paramvalue2 = options.paramName2;
判断当前活动视图的视图选项集合中,是否含有给定键名的参数。
签名:
View.hasActiveViewOptions(name: string): boolean
可用版本:
1.6.2+
入参:
name: string
- 参数的键名。
返回:
true
- 视图选项集合不为 null
,且集合中含有 key 为给定键名的数据。否则,返回 false
。从当前活动视图的视图选项集合中,获取给定键名的参数取值。
签名:
View.getActiveViewOptions(name: string): string | null
可用版本:
1.6.2+
入参:
name: string
- 参数的键名。
返回:
参数取值。如果集合为
null
,或参数不存在,则返回 null
。为当前活动视图设置视图选项。
签名:
View.setActiveViewOptions(name: string, value: string): View
可用版本:
1.6.2+
入参:
name: string
- 参数的键名。value: string
- 参数的取值。
返回:
window.View
以供开发者链式调用。“穿过”视图,用于在不渲染界面、不触发关联事件的情况下 “伪造” 视图的访问记录。该方法自1.7.0
开始被废弃(仍然可用),开发者可使用等价的View.navBy()
替代。
签名:
View.passBy(viewId: string, viewNamespace?: string): View
可用版本:
1.6.2+
入参:
viewId: string
- 视图ID。viewNamespace?: string
- 视图隶属的命名空间。可选,默认为:default
。
返回:
window.View
以供开发者链式调用。调用举例:
/**
* 导航至 我的银行卡列表 界面。
*
* 通过伪造 profile 的访问记录,实现 “虽然用户看到的是 银行卡列表 界面,
* 但点击页面中的返回按钮,将返回到 个人中心 界面”的目的
*/
View.passBy("profile").navTo("my-bankcard-list");
/**
* 1秒后页面将返回至 个人中心
*/
setTimeout(function(){
View.back();
}, 1000);
以 压入堆栈 的方式 “略过” 视图,用于在不渲染界面、不触发关联事件的情况下 “伪造” 视图的访问记录。
签名:
View.navBy(viewId: string, viewNamespace?: string): View
可用版本:
1.7.0+
入参:
viewId: string
- 视图ID。viewNamespace?: string
- 视图隶属的命名空间。可选,默认为:default
。
返回:
window.View
以供开发者链式调用。调用举例:
/**
* 导航至 我的银行卡列表 界面。
*
* 通过伪造 profile 的访问记录,实现 “虽然用户看到的是 银行卡列表 界面,
* 但点击页面中的返回按钮,将返回到 个人中心 界面”的目的
*/
View.navBy("profile").navTo("my-bankcard-list");
/**
* 1秒后页面将返回至 个人中心
*/
setTimeout(function(){
View.back();
}, 1000);
以 替换栈顶 的方式 “略过” 视图,用于在不渲染界面、不触发关联事件的情况下 “伪造” 视图的访问记录。
签名:
View.changeBy(viewId: string, viewNamespace?: string): View
可用版本:
1.7.0+
入参:
viewId: string
- 视图ID。viewNamespace?: string
- 视图隶属的命名空间。可选,默认为:default
。
返回:
window.View
以供开发者链式调用。调用举例:
/**
* 导航至 我的银行卡列表 界面。
*
* 通过伪造 my-wallet 的访问记录,实现 “虽然用户看到的是 银行卡列表 界面,
* 但点击页面中的返回按钮,将返回到 我的钱包 界面”的目的
*/
View.navTo("profile").changeBy("my-wallet").navTo("my-bankcard-list");
/**
* 1秒后页面将返回至 我的钱包
*/
setTimeout(function(){
View.back();
}, 1000);
以 压入堆栈 的方式跳转至目标视图。
签名1:
可用版本:
1.6.2+
签名2:
View.navTo(viewInstance: View): View
可用版本:
1.7.0+
入参:
viewId: string
- 视图ID,或视图名称,或伪视图,或外部链接。
支持的伪视图包括:
:back
- 前进,等同于View.back()
;:forward
- 后退,等同于View.forward()
;:default-view
- 默认视图;例如:/*** 后退,等同于 View.back()** 第一个参数指定了跳转目标;* 第二个参数指定了跳转控制选项,其中,关键字:'params' 用于指定视图参数集合。*/View.navTo(":back", {params: {paramName1: "boo"}});/*** 后退,等同于 View.forward()*/View.navTo(":forward", {params: {paramName1: "boo"}});/*** 跳转至默认视图* 第二个参数指定了跳转控制选项,其中,关键字:'options' 用于指定视图选项集合。*/View.navTo(":default-view", {params: {paramName1: "boo"},options: {paramName2: "foo"}});
当为视图名称时,需要使用~
符号前缀,例如:/*** 跳转至视图名称为 profile 的第一个视图上去*/View.navTo("~profile",{params: {param1: "value1"},options: {param2: "value2"}});
当为外部链接,且链接地址为完整路径时,可以直接赋值为链接地址,例如:/*** 跳转至完整的外部链接*/View.navTo("http://view-js.com");如果外部链接地址不完整,则需要使用@
符号前缀,例如:/*** 跳转至当前目录下的 index.html 页面*/View.navTo("@index.html");
viewNamespace?: string
- 视图隶属的命名空间。可选,默认为:default
。viewInstance: View
- 视图实例。
返回:
window.View
以供开发者链式调用。调用举例:
/**
* 以“压入堆栈”的方式跳转至 myNamespace 命名空间下, ID为 targetVieWId 的视图
*
* 第一个参数指定了跳转目标;
* 第二个参数指定了跳转控制选项,其中,关键字:'params' 用于指定视图参数集合,
* 'options' 用于指定视图选项集合。
*/
View.navTo("targetViewId", "myNamespace", {
/**
* 开发者可以在视图参数集合指定任意数量的参数,参数取值可以是
* 任意合法的js类型
*/
params: {
paramName1: "boo",/* 传导字符串 */
paramName2: true,/* 传导枚举值 */
paramName3: ['str', 123, false, new Object()],/* 传导数组 */
paramName4: View.find(".container"),/* 传导DOM元素 */
paramName5: function(data){doSth(data);}/* 传导回调方法 */
},
/**
* 视图选项只支持字符串类型
*/
options: {
paramName1: "boo"
paramName2: "bar"
}
});
自
1.7.0
开始,开发者可以通过 View.addSwitchInterceptor()
方法添加拦截器,阻止视图跳转动作的执行。以 替换栈顶 的方式跳转至目标视图。
签名1:
可用版本:
1.6.2+
签名2:
View.changeTo(viewInstance: View): View
可用版本:
1.7.0+
入参:
viewId: string
- 视图ID,或视图名称,或伪视图,或外部链接。
支持的伪视图包括:
:default-view
- 默认视图;
例如:/*** 跳转至默认视图* 第二个参数指定了跳转控制选项,其中,关键字:'options' 用于指定视图选项集合。*/View.changeTo(":default-view", {params: {paramName1: "boo"},options: {paramName2: "foo"}});
当为视图名称时,需要使用~
符号前缀,例如:/*** 跳转至视图名称为 profile 的第一个视图上去*/View.changeTo("~profile",{params: {param1: "value1"},options: {param2: "value2"}});
当为外部链接,且链接地址为完整路径时,可以直接赋值为链接地址,例如:/*** 跳转至完整的外部链接*/View.changeTo("http://view-js.com");如果外部链接地址不完整,则需要使用@
符号前缀,例如:/*** 跳转至当前目录下的 index.html 页面*/View.changeTo("@index.html");
viewNamespace?: string
- 视图隶属的命名空间。可选,默认为:default
。viewInstance: View
- 视图实例。
返回:
window.View
以供开发者链式调用。自
1.7.0
开始,开发者可以通过 View.addSwitchInterceptor()
方法添加拦截器,阻止视图跳转动作的执行。添加视图跳转拦截器。
签名:
可用版本:
1.7.0+
入参:
interceptor: ViewSwitchInterceptor
- 拦截器。
返回:
window.View
以供开发者链式调用。调用举例:
/**
* 添加拦截器:“修改密码” 页面要求登录
*/
View.addSwitchInterceptor(function(meta){
var targetViewId = meta.targetView.id;
/* 如果目标视图不是 “修改密码”,则放行 */
if("change-password" !== targetViewId)
return true;
if(user.isLogined())
return true;
toast("请登录");
//...
return false;
});
/**
* 添加拦截器:“删除商品” 页面要求有权限
*/
View.addSwitchInterceptor(function(meta){
var targetViewId = meta.targetView.id;
/* 如果目标视图不是 “删除商品”,则放行 */
if("delete-goods" !== targetViewId)
return true;
if(user.isAuthorized(targetViewId))
return true;
toast("没有权限");
//...
return false;
});
拦截器将按添加顺序顺序执行。
获取添加的视图跳转拦截器列表。顺序与添加 顺序保持一致。
签名:
可用版本:
1.7.0+
入参:
无。
返回:
与添加顺序保持一致的视图跳转拦截器列表。
设置在“没有视图可以继续向前返回”的情况下,尝试返回时要执行的动作。 开发者可以借助该特性,实现 “没有页面可以继续向前返回时,跳转至首页” 的效果。
签名:
View.setNoViewToNavBackAction(action: Function): View
可用版本:
1.6.2+
入参:
action: Function
- 要执行的动作。
返回:
window.View
以供开发者链式调用。调用举例:
View.setNoViewToNavBackAction(function(){
View.changeTo(":default-view");
});
返回至上一个视图。
签名:
可用版本:
1.6.2+
入参:
返回:
window.View
以供开发者链式调用。前进至下一个视图。
签名:
可用版本:
1.6.2+
入参:
返回:
window.View
以供开发者链式调用。设置文档标题。 在视图之间发生跳转时,View.js 会自动使用目标视图定义的标题更新文档标题。如果目标视图没有定义标题,则会使用初始化阶段捕获的浏览器标题呈现。如果初始化阶段的文档不是文档的最终标题,开发者需要在适当时机执行该方法。 View.js 默认在DOMContentloaded
事件触发后进行初始化。
签名:
View.setDocumentTitle(title: string): View
可用版本:
1.6.2+
入参:
title: string
- 文档标题。
返回:
window.View
以供开发者链式调用。执行所有视图的布局动作。 每个视图实例都可以通过setLayoutAction()
方法设置自己的布局动作。布局动作默认在视图进入时由 View.js 自动执行。必要时,开发者可以通过调用本方法强制所有视图重新布局。
签名:
View.reDoLayout(): View
可用版本:
1.6.2+
入参:
无。
返回:
window.View
以供开发者链式调用。判断是否可以继续向前返回。亦即,历史堆栈中,是否还有更早的视图浏览记录。
签名:
View.ifCanGoBack(): boolean
可用版本:
1.6.2+
入参:
无。
返回:
true
- 可以继续向前返回;false
- 已经返回到底了。添加 View.js 初始化前要执行的处理器。
签名:
View.beforeInit(action: Function): View
可用版本:
1.6.2+
入参:
action: Function
- 处理器。
返回:
window.View
以供开发者链式调用。所有处理器均以 同步 的方式被触发。
添加 View.js 就绪后要执行的处理器。
签名:
View.ready(action: Function): View
可用版本:
1.6.2+
入参:
action: Function
- 处理器。
返回:
window.View
以供开发者链式调用。所有处理器均以 同步 的方式被触发。
设置 View.js 的初始化触发器。
签名:
可用版本:
1.6.2+
入参:
返回:
window.View
以供开发者链式调用。自
1.7.0
开始,本方法被标记为 “已废弃” (仍然可用),建议开发者使用新增的 View.init()
方法实现手动初始化 。初始化 View.js 。
签名:
View.init(): View
可用版本:
1.7.0+
入参:
无。
返回:
window.View
以供开发者链式调用。添加宏观事件监听器。预置的宏观事件包括: 1.beforechange
- 活动视图即将切换(同步触发) 2.change
- 活动视图正在切换(同步触发) 3.afterchange
- 活动视图切换完成(异步触发)开发者也可以使用该方法监听自定义事件。
签名:
可用版本:
1.6.2+
入参:
eventName: string
- 事件名称。
返回:
window.View
以供开发者链式调用。调用举例:
/**
* 监听预置事件
*/
View.on("change", function(e){
var info = e.data;
/**
* 跳转到的目标视图
*/
var targetView = e.data.targetView;
//...
});
/**
* 监听自定义事件
*/
View.on("myEvent", function(e){
var data = e.data;
// doSth(data);
});
移除宏观事件监听器。预置的宏观事件包括: 1.beforechange
- 活动视图即将切换(同步触发) 2.change
- 活动视图正在切换(同步触发) 3.afterchange
- 活动视图切换完成(异步触发)
签名: