1. 模块化:

①. 将一个复杂应用根据预设规范封装为多个块并组合起来:a. 对内实现数据私有化b. 对外暴露接口、其它模块通信②. 在前端工程化具体体现:a. 在文件层面上对代码与资源实现拆分与组装b. 将一个大文件拆分为互相依赖的小文件,再统一拼装与加载

1. 工程目录设计范式种类:

(1). Rails Style:

①. 特点:a. 专注纵向的"层"的划分b. 同一类文件放置在同一目录下②. 优势:a. 便于合并导出b. 便于进行"层"的扩展③. 不足:a. 依赖关系难以直接地分析b. 对功能的修改会涉及到大量的目录切换c. 难以水平拆分

---

2. 目录结构:

(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

---

3. 如何选择工程范式:

(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