①. 将一个复杂应用根据预设规范封装为多个块并组合起来:
a. 对内实现数据私有化
b. 对外暴露接口、其它模块通信
②. 在前端工程化具体体现:
a. 在文件层面上对代码与资源实现拆分与组装
b. 将一个大文件拆分为互相依赖的小文件,再统一拼装与加载
(1). Rails Style:
①. 特点:
a. 专注纵向的"层"的划分
b. 同一类文件放置在同一目录下
②. 优势:
a. 便于合并导出
b. 便于进行"层"的扩展
③. 不足:
a. 依赖关系难以直接地分析
b. 对功能的修改会涉及到大量的目录切换
c. 难以水平拆分
(1). Rails Style:
// egg应用典型结构
|── app
| ├── config
| ├── controller
| ├── extend
| ├── public
| ├── router.ts
| ├── service
| └── view
├── app.ts
├── agent.ts
├── config
├── logs
├── test
└── typings
// Rails Style TodoList
root
|── reducers
| ├── todoReducer.js
| └── fileterReducer.js
├── actions
| ├── todoActions.js
| └── filterAction.js
├── components
| ├── todoList.jsx
| ├── todoItem.jsx
| └── filter.jsx
├── containers
| ├── todoListContainer.jsx
| ├── todoItemContainer.jsx
| └── filterContainer.jsx
├── App.jsx
└── index.js
(1). 单一功能的项目:
①. 场景:
a. 库
b. 第三方包fs-extra、axios等
②. 风格:
Rails Style
③. 理由:
a. 不存在水平拆分的必要性
b. 易于扩展
c. 减少重复代码
目录层级:
// Axios
root
|── dist
| └── ...
├── examples
| └── ...
├── lib
| ├── adapters
| | └── ...
| ├── cancel
| | └── ...
| ├── core
| | └── ...
| ├── defaults.js
| └── axios.js
├── sandbox
| └── ...
└── test