视图名称

概述

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

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

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

声明视图名称

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

main.html

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

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

使用视图名称

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

main.html

<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>

action.js

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

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

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

延申

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

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

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

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

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

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

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

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