对于可交互性的应用程序，人们所能直观看到的就是图形用户界面；为了方便描述 和 组织项目结构，我把应用界面的构成元素抽离成了 模块、流程、页面、组件 这几个概念，并形象化地描述了它们之间的关系；然后，根据应用界面的结构规划项目的源码目录结构；

目录

• 一、应用软件用户界面的结构
• 二、概念详解
  • 1.软件
  • 2.界面
  • 3.模块
  • 4.流程
  • 5.页面
  • 6.组件
• 三、业务代码的目录结构
  • 1.项目业务逻辑的根目录
  • 2.模块的目录
  • 3.流程的目录
  • 4.页面的目录
  • 5.组件的目录
  • 6.业务代码的目录结构

内容

一、应用软件用户界面的结构

应用软件的界面由 模块、流程、页面、组件 这几元素组成，它们的关系如下图：

应用软件界面结构图

我对这些构成元素的概念作了非严谨的定义，如下：

• 软件： 是一系列按照特定顺序组织的计算机数据和指令的集合。如：微信、地图、天气 等等；
• 界面： 术语中，界面所表示的东西通常因场景而异；我简单概括如下；
  • 定义1： 应用软件的图形显示区域；
  • 定义2： 界面是应用软件中所有能被用户看到的图形的集合；
  • 定义3： 界面是应用软件在任意时刻时所显示的所有图形的集合； 规定：在本文中指：
    规定： 在本文中，界面的定义取 定义2 ；
• 模块： 软件中某类 或 某个 功能的集合；如：微信中的、通讯录、发现、朋友圈 等等；
• 流程： 软件中某个功能完整的操作序列；
• 页面： 应用软件中共享同一界面的所有信息的集合；
• 组件： 页面上的每个 独立的 可视 或者 可交互区域；

这些是定义，下文是对这几个概念的具体讲解；

二、概念详解

1.软件

软件是一系列按照特定顺序组织的计算机数据和指令的集合。如下图中红框内的每一个图标都代表一个应用；

应用

点击应用图标，即可启动应用，如下，以微信为例：

微信应用
我

2.界面

广泛意义的界面是指： 物质相与相的分界面 ； 在应用软件中就是指： 应用软件的图形显示区域； 所以，广泛意义的界面表示的是一个区域，一个面；

而在通常的软件语境中，人们用往往用界面表示的不一个区域 或 面，而是一个集合，此时，界面指的是： 应用软件中所有能被用户看到的图形的集合 或者 应用软件在任意时刻时所显示的所有图形的集合 ；

当界面表示 应用软件在任意时刻时所显示的所有图形的集合 时，便与本文中的定义的 页面 的概念相似，但不等效 ；

在本文中，为了概念不重叠 且 表述方便，规定，界面的定义是： 界面是应用软件中所有能被用户看到的图形的集合 ;

所以：

界面的构成元素：

• 模块
• 流程
• 页面

界面的概念构成子元素：

• 模块
• 流程
• 页面

界面的直接概念构成子元素：

• 模块

3.模块

模块是软件中某类 或 某个 功能的集合；

如微信软件底部的 我、发现、通讯录 等按钮，它们每个都对应一个模块，这些按钮充当这些模块的触发器，也可以理解为这些按钮是它们对应的模块的入口；

大模块

因为模块是 某类 或 某个 功能的集合，某类 是一个集合，某个 是一个成员 ，所以 模块 是可以相互包含的；即：模块里可以包含子模块；

比如：微信中 我 模块 的中 包含有 钱包、收藏、相册、卡包、表情、设置 等模块；其中，钱包 模块中还包有许多子模块(钱包模块中红框圈中的每个图标都对应一个子模块)，如下图；

模块关系
钱包子模块

所以：

模块的构成元素：

• 模块
• 流程
• 页面

模块的概念构成子元素：

• 流程
• 页面

模块的直接概念构成子元素：

• 流程

4.流程

流程是软件中某个功能完整的操作序列；
如下动图就展示了一个流程：

流程与页面

比如微信中的 发布朋友圈 的操作序列为：

点击 朋友圈 -> 点击右上角的照相机图标 -> 选择 从手机相册选择 -> 选中你想附带的图片 -> 预览你选中的图片 -> 点击 完成 -> 输入你要发表的文字 -> 点击 发表

发布朋友圈

这个 发布朋友圈的操作序列 就是一个流程，可以命名为 发布朋友圈流程

流程是可以有分支的，流程上的分支称为支流程，简称 支流 ；

所以：

流程的构成元素：

• 流程
• 页面

流程的概念构成子元素：

• 页面

流程的直接概念构成子元素：

• 页面

5.页面

页面是应用软件中共享同一界面的所有信息的集合；

比如：

发现页面
朋友圈页面

所以：

页面的构成元素：

• 组件

页面的概念构成子元素：

• 组件

页面的直接概念构成子元素：

• 组件

6.组件

组件是页面上的每个 独立的 可视 或者 可交互区域；

它与页面的关系如下图：

页面结构图

比如微信中的聊天记录界面：

组件示例

所以：

组件的构成元素：

• 组件

组件的概念构成子元素：

• 组件

组件没有直接概念构成子元素

三、业务代码的目录结构

根据 关注点分离的思想 和 应用软件用户界面的结构 ，可知，业务代码应根据 应用软件用户界面的结构 来划分；为了方便引用，对于共用的东西，应该抽离出来，放在所有使用者最近的共同祖先目录中；

1.项目业务逻辑的根目录

一般，项目的业务代码均放在 app/ 目录下，

根据 应用软件用户界面的结构 ，可知：

界面的构成元素是：

• 模块
• 流程
• 页面

其中，界面单由 页面 构成的情况不多，一般存在于非常简单的应用用；所以，app/ 目录下主要放置的是各个直接子模块、直接流程的目录；除此之外， app 目录下还可以放一此公共的 流程、页面、组件、资源 等等；如下：

app/  # 应用软件业务代码的根目录；
├── module1/    # 模块1的目录；
├── module2/    # 模块2的目录；
:
├── moduleN/    # 模块N的目录；
│
├── flow1/    # 流程1的目录；
├── flow2/    # 流程2的目录；
:
├── flowN/    # 流程N的目录；
│
├── publicModule/    # 公共模块的目录；
├── publicFlow/    # 公共流程的目录；
├── publicPage/    # 公共页面的目录；
├── publicComponent/    # 公共组件的目录；
│
├── assets/    # 私有资源文件的目录；
└── ...

所以：app目录是容器目录 ； 关于 容器目录 和 组件目录 的相关概念，请详见《Vue项目组织规范》

2.模块的目录

根据 应用软件用户界面的结构 ，可知：

模块的构成元素：

• 模块
• 流程
• 页面

所以，模块目录下主要放置的是各个直接子模块、直接流程、直接页面的目录；除此之外， 模块目录下还可以放一些公共的 子模块、流程、页面、组件、资源 等等；如下：

module/  # 模块的目录；
├── subModule1/    # 子模块1的目录；
├── subModule2/    # 子模块2的目录；
:
├── subModuleN/    # 子模块N的目录；
│
├── flow1/    # 流程1的目录；
├── flow2/    # 流程2的目录；
:
├── flowN/    # 流程N的目录；
│
├── publicSubModule/    # 公共子模块的目录；
├── publicFlow/    # 公共流程的目录；
├── publicPage/    # 公共页面的目录；
├── publicComponent/    # 公共组件的目录；
│
├── assets/    # 私有资源文件的目录；
└── ...

所以：模块目录是容器目录 ； 关于 容器目录 和 组件目录 的相关概念，请详见《Vue项目组织规范》

3.流程的目录

根据 应用软件用户界面的结构 ，可知：

流程的构成元素：

• 流程
• 页面

所以，流程目录下主要放置的是各个直接子流程、页面的目录；除此之外， 流程目录下还可以放一些公共的 子流程、组件、资源 等等；如下：

flow/  # 流程的目录；
├── page1/    # 页面1的目录；
├── page2/    # 页面2的目录；
:
├── pageN/    # 页面N的目录；
│
├── subFlow1/    # 子流程1的目录；
├── subFlow2/    # 子流程2的目录；
:
├── subFlowN/    # 子流程N的目录；
│
├── publicSubFlow/    # 公共子流程的目录；
├── publicComponent/    # 公共组件的目录；
│
├── assets/    # 私有资源文件的目录；
└── ...

所以：流程目录是容器目录 ； 关于 容器目录 和 组件目录 的相关概念，请详见《Vue项目组织规范》

4.页面的目录

根据 应用软件用户界面的结构 ，可知：

页面的构成元素：

• 组件

所以，页面目录下主要放置的是各个组件的目录；除此之外， 页面目录下还可以放一些 资源 等等；如下：

page/  # 页面的目录；
├── component1/    # 组件1的目录；
├── component2/    # 组件2的目录；
:
├── componentN/    # 组件N的目录；
│
├── assets/    # 私有资源文件的目录；
│
├── file1    # 文件1；
├── file2    # 文件2；
:
├── fileN    # 文件N；
└── ...

因为，通常页面本身也是一个组件，所以：页面目录是组件目录 ；且，页面目录中也可以放一些组件目录中会有的文件；

关于 容器目录 和 组件目录 的相关概念，请详见《Vue项目组织规范》

5.组件的目录

根据 应用软件用户界面的结构 ，可知：

组件的构成元素：

• 组件

所以，组件目录下主要放置的是各个子组件的目录；除此之外， 组件目录下还可以放一些 文件、资源 等等；如下：

component/  # 组件的目录；
├── subComponent1/    # 子组件1的目录；
├── subComponent2/    # 子组件2的目录；
:
├── subComponentN/    # 子组件N的目录；
│
├── assets/    # 私有资源文件的目录；
│
├── file1    # 文件1；
├── file2    # 文件2；
:
├── fileN    # 文件N；
└── ...

很显然：组件的目录就是组件目录 ； 关于 容器目录 和 组件目录 的相关概念，请详见《Vue项目组织规范》

6.业务代码的目录结构

综上所述，对于项目的业务代码大致可以规划出如下的源码目录结构：

app/  # 应用软件业务代码的根目录；
├── module1/    # 模块的目录；
│   ├── subModule1/    # 子模块1的目录；
│   ├── subModule2/    # 子模块2的目录；
│   :
│   ├── subModuleN/    # 子模块N的目录；
│   │
│   ├── flow1/      # 流程的目录；
│   │   ├── page1/      # 页面的目录；
│   │   │   ├── component1/     # 组件的目录；
│   │   │   │   ├── file1     # 文件；
│   │   │   │   ├── file2     # 文件；
│   │   │   │   └── ...
│   │   │   ├── component2/     # 组件的目录；
│   │   │   └── ...
│   │   ├── page2/      # 页面的目录；
│   │   │   └── ...
│   │   │
│   │   ├── subFlow1/    # 子流程1的目录；
│   │   ├── subFlow2/    # 子流程2的目录；
│   │   :
│   │   ├── subFlowN/    # 子流程N的目录；
│   │   └── ...
│   ├── flow2/      # 流程的目录；
│   │   └── ...
│   └── ...
│
├── module2/    # 模块的目录；
│   └── ...
│
├── publicModule/    # 公共模块的目录；
│   └── ...
├── publicFlow/    # 公共流程的目录；
│   └── ...
├── publicPage/    # 公共页面的目录；
│   └── ...
├── publicComponent/    # 公共组件的目录；
│   └── ...
└── ...