SPA/MPA
project
├─ dist # 打包配置目录
│ ├─ prod # 生产环境
│ └─ test # 测试环境
├─ src # 源码目录
│ ├─ apis # 接口模块：包括全局接口请求的功能，控制数据定向转换
│ ├─ assets # 资源模块：包括样式、脚本、字体、图像、音频、视频等资源文件
│ ├─ components # 组件模块：包括全局通用的基础组件、皮肤主题和字体图标
│ ├─ layouts # 布局模块：包括以布局为最小粒度的组件集合，由至少一个基础组件组成
│ ├─ flows # 流程模块：包括以流程为最小粒度的组件集合，由至少一个基础组件组成
│ ├─ pages # 页面模块：包括以页面为最小粒度的组件集合，由至少一个基础组件组成
│ ├─ routes # 路由模块：包括全局页面跳转的功能，控制页面自由切换
│ ├─ stores # 数据模块：包括全局数据状态的功能，控制数据驱动视图
│ ├─ views # 视图模块：包括以视图为最小粒度的组件集合，由至少一个基础组件组成
│ ├─ utils # 工具模块：包括全局通用的常量与方法
│ ├─ index.html # 模板入口文件
│ ├─ index.js # 脚本入口文件
│ └─ index.scss # 样式入口文件
└─ package.json
①. 将一个具备通用功能的交互设计划分为模板、样式和逻辑组成的功能单元:
a. 对内管理内部状态满足交互需求
b. 对外提供属性接口扩展用户需求
②. 组件化是前端工程化的重要基础:
a. 代码更高层次的复用性,提升开发效率
b. 组件的封装也是对象的封装
c. 高内聚低耦合
d. 组件化的项目利于单元测试、需求迭代
③. 优秀的组件化遵循以下设计哲学:
a. 将设计图划分为最小组件层级
b. 使用预设规范创建组件静态版本
c. 确定组件内部最小且完整的状态的表示方式
d. 确定组件内部最小且完整的状态的存放方式
e. 实现数据流的正向传递与反向传递
④. 模块化与组件化区别:
a. 模块化着重在文件层面上对代码与资源实现拆分与组装
b. 组件化着重在功能层面上对交互与设计实现拆分与组装