R524809
163 lines
4.1 KiB
Markdown
163 lines
4.1 KiB
Markdown
# mathPages 目录重构方案
|
||
|
||
## 当前目录结构
|
||
|
||
```
|
||
mathPages/
|
||
├── addition/ # 页面
|
||
├── compare/ # 页面
|
||
├── countingSelect/ # 页面
|
||
├── countMatch/ # 页面
|
||
├── missingNumber/ # 页面
|
||
├── numberDecompose/ # 页面
|
||
├── numberFind/ # 页面
|
||
├── assets/ # 静态资源
|
||
├── common/ # 公共文件（mixin等）
|
||
├── components/ # 组件
|
||
└── service/ # 服务（Draw相关）
|
||
```
|
||
|
||
## 问题
|
||
|
||
- 页面和服务放在同一级，不易区分
|
||
- 目录较多，查找页面不够直观
|
||
- 公共服务散落在不同目录
|
||
|
||
## 推荐方案：使用 `shared/` 目录
|
||
|
||
### 重构后的目录结构
|
||
|
||
```
|
||
mathPages/
|
||
├── addition/ # 页面
|
||
├── compare/ # 页面
|
||
├── countingSelect/ # 页面
|
||
├── countMatch/ # 页面
|
||
├── missingNumber/ # 页面
|
||
├── numberDecompose/ # 页面
|
||
├── numberFind/ # 页面
|
||
├── assets/ # 静态资源
|
||
└── shared/ # 公共服务目录（新建）
|
||
├── service/ # 服务（从 service/ 移动）
|
||
├── common/ # 公共文件（从 common/ 移动）
|
||
└── components/ # 组件（从 components/ 移动）
|
||
```
|
||
|
||
### 优点
|
||
|
||
1. ✅ **语义清晰**：`shared/` 明确表示共享代码
|
||
2. ✅ **结构清晰**：页面和公共服务分离，一目了然
|
||
3. ✅ **易于维护**：所有公共服务集中在一个目录下
|
||
4. ✅ **符合常见实践**：`shared/` 在很多项目中都有使用
|
||
5. ✅ **扩展性好**：未来可以添加 `shared/utils/`、`shared/types/` 等
|
||
|
||
### 需要修改的导入路径
|
||
|
||
#### 页面文件中的导入
|
||
|
||
**之前：**
|
||
|
||
```typescript
|
||
import AdditionDraw from '../service/additionDraw';
|
||
import { createMathPage } from '../common/mathPageMixin';
|
||
import MathBottomButtons from '../components/math-bottom-buttons/math-bottom-buttons';
|
||
```
|
||
|
||
**之后：**
|
||
|
||
```typescript
|
||
import AdditionDraw from '../shared/service/additionDraw';
|
||
import { createMathPage } from '../shared/common/mathPageMixin';
|
||
import MathBottomButtons from '../shared/components/math-bottom-buttons/math-bottom-buttons';
|
||
```
|
||
|
||
#### service 文件之间的导入
|
||
|
||
**之前：**
|
||
|
||
```typescript
|
||
import { BaseDrawService } from './baseMathDraw';
|
||
```
|
||
|
||
**之后：**
|
||
|
||
```typescript
|
||
import { BaseDrawService } from './baseMathDraw';
|
||
// 或者如果跨目录
|
||
import { BaseDrawService } from '../baseMathDraw';
|
||
```
|
||
|
||
## 备选方案：使用 `lib/` 目录
|
||
|
||
如果不想用 `shared/`，也可以考虑 `lib/`：
|
||
|
||
```
|
||
mathPages/
|
||
├── addition/
|
||
├── compare/
|
||
├── ...
|
||
├── assets/
|
||
└── lib/ # 公共服务目录
|
||
├── service/
|
||
├── common/
|
||
└── components/
|
||
```
|
||
|
||
**优点：**
|
||
|
||
- 简洁
|
||
- 表示库文件
|
||
|
||
**缺点：**
|
||
|
||
- `lib/` 通常用于第三方库或编译产物
|
||
- 语义上不如 `shared/` 清晰
|
||
|
||
## 备选方案：使用 `core/` 目录
|
||
|
||
```
|
||
mathPages/
|
||
├── addition/
|
||
├── compare/
|
||
├── ...
|
||
├── assets/
|
||
└── core/ # 核心功能目录
|
||
├── service/
|
||
├── common/
|
||
└── components/
|
||
```
|
||
|
||
**优点：**
|
||
|
||
- 表示核心功能
|
||
|
||
**缺点：**
|
||
|
||
- `core/` 通常用于框架核心，不太适合业务代码
|
||
|
||
## 迁移步骤
|
||
|
||
1. **创建 `shared/` 目录**
|
||
2. **移动目录**
|
||
- `service/` → `shared/service/`
|
||
- `common/` → `shared/common/`
|
||
- `components/` → `shared/components/`
|
||
3. **批量更新导入路径**
|
||
- 所有页面文件中的 `../service/` → `../shared/service/`
|
||
- 所有页面文件中的 `../common/` → `../shared/common/`
|
||
- 所有页面文件中的 `../components/` → `../shared/components/`
|
||
- 检查 `shared/` 内部文件的相互导入
|
||
4. **更新配置文件**
|
||
- 检查是否有路径配置需要更新（如 `app.json` 中的组件路径）
|
||
5. **测试验证**
|
||
- 确保所有页面功能正常
|
||
- 确保导入路径正确
|
||
|
||
## 推荐使用 `shared/` 目录
|
||
|
||
综合考虑，**推荐使用 `shared/` 目录**，因为：
|
||
|
||
- 语义最清晰
|
||
- 符合常见实践
|
||
- 易于理解和维护
|