# 视图
## 概述
视图，是 View\.js 驱动的单页应用的单元载体，用于定义用户视觉上看到的一屏内容。
视觉上一个界面向另一个界面的切换，在技术上是同一 HTML 页面中，可见区域从一个 DIV 区块向另一个 DIV 区块的切换。这些动态被切换显示的 DIV 区块就是视图。
## 创建视图
作为页面的功能单元，每个视图都是唯一的，都有唯一的ID及命名空间以将其与其它视图区分开来。
通过为特定的 DIV 区块添加属性：`data-view-id` 来定义视图的ID，开发者即可完成视图的创建：
```markup
个人资料
提交
...
```
上述代码展示了两个视图的创建。其中，ID 为 `view1` 和 `view2` 的两个 DOM 元素，分别是两个视图的内容骨架，他们共同定义了应用的视觉效果和使用体验。
当区块 `view1` 处于活动状态时，用户看到的是视图 `view1` 的表现效果；当活动视图（处于活动状态的视图）切换至 `view2` 时，用户看到的是视图 `view2` 的表现效果。
{% hint style="info" %}
检验视图创建是否成功，可以通过执行API：`View.ifExists(viewId: {String})` - 判断视图是否存在 得知。
{% endhint %}
## 赋能视图
视图在创建完成后，只具备了静态展现的能力，开发者需要手动开发脚本，实现视图内的数据展现和操作交互等，例如：
{% tabs %}
{% tab title="init.js" %}
```javascript
/**
* 为视图 view1 赋能：视图初始化
*/
var view = View.ofId("view1");
var bodyObj = view.find(".body");
var nameInputObj = view.find(".name input"),
addressInputObj = view.find(".address input");
/**
* 查询并呈现用户信息
*/
var queryAndShowUserInfo = function(){
$.post("/userInfo", {
onsuccess: function(data){
nameInputObj.value = data.userName || "";
addressInputObj.value = data.address || "";
}
});
};
/**
* 重置视图
*/
var resetView = function(){
/* 清空输入框的内容 */
nameInputObj.value = "";
addressInputObj.value = "";
/* 重置浏览位置，使其回到顶部 */
bodyObj.scrollTop = 0;
};
/**
* 视图进入时查询并展现用户信息
* 'enter' 是 View.js 预置的事件，代表视图的进入
*/
view.on("enter", queryAndShowUserInfo);
/**
* 视图离开时重置视图
*
* 'leave' 是View.js 预置的事件，代表视图的离开
*/
view.on("leave", resetView);
```
{% endtab %}
{% endtabs %}
{% tabs %}
{% tab title="action.js" %}
```javascript
/**
* 为视图 view1 赋能：添加交互支持
*/
var view = View.ofId("view1");
var nameInputObj = view.find(".name input");
var submitObj = view.find(".btn");
/**
* 提交数据
*/
submitObj.addEventListener("click", function(){
var name = nameInputObj.value.trim();
//do something
});
```
{% endtab %}
{% endtabs %}
{% hint style="info" %}
View\.js 能够很友好地与其它 *非路由类* 框架并存，例如：jQuery, knockout, vue 等，开发者可以一如既往地按照传统开发方式使用这些框架。
{% endhint %}
## 访问视图
开发者可以通过访问 html 页面，并使用 `#` 符号指定视图信息来访问视图。
例如，URL：
>
表示 “访问定义在 demo.html 中的，命名空间为 `default`，ID 为 `view1` 的视图”。而对于URL：
>
则表示 “访问定义在 index.html 中的，命名空间为 `myNamespace`，ID 为 `view2` 的视图”。其中，`@` 符号为 视图ID 与 视图命名空间的分隔符。
如果没有指定视图信息，那么页面打开后，View\.js 将自动展现默认视图。
当活动视图发生变化时，View\.js 将根据新的活动视图信息，实时构造新的 URL 并将其反馈到浏览器的地址栏中。
{% hint style="info" %}
视图当前仅支持 hash 形态的地址栏表示，且不支持自定义。出于简化开发的考虑，View\.js 当前也并不打算变更这一特性。
{% endhint %}
## 注意事项
每个视图都是以渲染模板的姿态唯一存在的，开发者需要使用 “静态模板 + 动态填充数据” 的方式完成视图的功能开发。
开发者可以动态、灵活调整视图内部的 DOM 结构，但不能删除、或替换视图的根结点 DOM 元素。
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://doc.view-js.com/main.-shi-tu.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.