对于可交互性的应用程序，人们所能直观看到的就是图形用户界面；为了方便描述 和 组织项目结构，我把应用界面的构成元素抽离成了 模块、流程、页面、组件 这几个概念，并形象化地描述了它们之间的关系；然后，根据应用界面的结构规划项目的源码目录结构；
目录
- 一、应用软件用户界面的结构
- 二、概念详解
- 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/ # 公共组件的目录；
│ └── ...
└── ...
