前端性能优化四十七：工程目录设计范式种类

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