# 视图名称

## 概述

视图名称的作用，是为了辅助开发者实现 “使用抽象名称，而非确切的视图ID完成视图跳转” 的效果。

通常情况下，开发者并不需要声明视图名称。但当开发者实现了视图的动态集成，并且相同作用的视图可能存在多个的时候，通过使用视图名称，基本就可以不用修改代码，便能保证视图之间动态集成的有效性了。

> 如果使用确切的视图ID，开发者会面临 “如何得知跳转的目标视图ID是否已集成到页面中” 这一问题。为此不得不借助视图配置，或分别撰写跳转代码，这样就无形之中提高了视图之间的耦合度，降低了代码的有效复用度。

## 声明视图名称

开发者可以通过在视图的 DOM 骨架上声明 `data-view-name` 属性来声明视图名称。例如：

{% tabs %}
{% tab title="main.html" %}

```markup
<section
    data-view-id = "b2c_goods-detail"
    data-view-name = "goods-detail"
></section>
```

{% endtab %}
{% endtabs %}

> 视图名称当前不支持通过API动态设定。

## 使用视图名称

只有在进行视图跳转时，开发者才需要使用视图名称。此时，视图名称将作为导航目标而存在，例如：

{% tabs %}
{% tab title="main.html" %}

```markup
<section
    data-view-id = "home-page"
    data-view-title = "首页"
>
    <!--
    导航至 商品详情。
    '~' 符号用于告诉 View.js 'goods-detail' 是视图名称
    -->
    <a data-view-rel = "~goods-detail">商品详情</a>
</section>

<section
    data-view-id = "goods-detail_01"
    data-view-title = "商品详情"
></section>
```

{% endtab %}

{% tab title="action.js" %}

```javascript
/* 导航至 商品详情 */
View.navTo("~goods-detail");
```

{% endtab %}
{% endtabs %}

当使用视图名称执行视图跳转时，View\.js 将自动检索所有声明为给定名称的视图，并将检索到的第一个作为目标视图跳转过去。

对于上述代码，当用户点击 “商品详情” 链接时，View\.js 将自动跳转至 `goods-detial_01` 视图。

## 延申

为了最大限度的节约研发成本，提升软件利润，软件公司会将一套程序销售给多家需求相近的客户。

&#x20;这些客户大多对软件的整体UI和功能基本满意，但细微之处又各有各的诉求。可能是界面布局，也可能是业务逻辑，抑或是功能的丰富完善或调整。

&#x20;相比整个软件功能，这些差异化的诉求所占据的工作量，可能不足10%，也可能高达40%，甚至于70%。&#x20;

软件公司不可能因为这些客户不是“没有一点意见的完美客户”就放弃订单，但把代码在工程中分别硬拷贝生成多份的操作，又会把摊子铺的太大，担心维护成本会一下子放大很多。

软件公司的担心不无道理。没有人会乐意将同一个故障的修复过程一遍遍的向多个工程中同步。

针对这个问题，View\.js 建议软件公司将实现的视图功能放到一个巨大的视图仓库中，借助构建脚本将视图动态集成到客户的页面上去。对于客户提出的个性化诉求，软件公司可以将其以视图为单位进行实现。

借助这种方式，差异化诉求的实现成本，就降低到了可量化计算的多个视图的功能开发上，而对于没有个性化诉求的共用视图，则始终只有一份副本。如此一来，可以“头疼医头，脚疼医脚”，能够极大地节约软件公司的开发资源。与此同时，开发团队也能够持续不断地积累仓库，使得复用能力越来越强。

虽然 View\.js 当前只是一个运行在浏览器中的单页框架，但不远的未来某天，我们会给开发者提供给模板化的开发工程，使得开发者轻松实现视图的动态集成。


---

# 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/shi-tu-ming-cheng.md?ask=<question>
```

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.
