545 lines
13 KiB
Markdown
545 lines
13 KiB
Markdown
# OOP vs Composables 架构对比分析
|
||
|
||
**日期**: 2026-01-31
|
||
**目的**: 探讨使用面向对象方式减少初始化顺序问题的可行性
|
||
|
||
---
|
||
|
||
## 1. 问题场景回顾
|
||
|
||
### 当前遇到的初始化问题
|
||
|
||
```typescript
|
||
// 问题1: 解构遗漏
|
||
const { previewUrl, isImageView, isAudioView } = useFilePreview()
|
||
// ❌ 忘记解构 updatePreviewUrl，导致后续 undefined
|
||
|
||
// 问题2: 函数定义顺序
|
||
const config = computed(() => useHelper()) // Line 362
|
||
const useHelper = () => { ... } // Line 869
|
||
// ❌ 相差507行，导致初始化错误
|
||
|
||
// 问题3: 返回值过多
|
||
const {
|
||
previewUrl, updatePreviewUrl, isImageView,
|
||
isVideoView, isAudioView, isPdfFile,
|
||
isHtmlFile, isMarkdownFile,
|
||
getPreviewUrl, previewImage,
|
||
// ... 还有15+个
|
||
} = useFilePreview()
|
||
// ❌ 难以维护，容易出错
|
||
```
|
||
|
||
---
|
||
|
||
## 2. 方案对比
|
||
|
||
### 方案A: Composables（当前方案）
|
||
|
||
#### 代码示例
|
||
|
||
```typescript
|
||
// composables/useFilePreview.ts
|
||
export function useFilePreview(options: UseFilePreviewOptions) {
|
||
const previewUrl = ref('')
|
||
const imageLoading = ref(false)
|
||
|
||
const updatePreviewUrl = (url: string) => {
|
||
previewUrl.value = url
|
||
}
|
||
|
||
const previewImage = async (path: string) => {
|
||
imageLoading.value = true
|
||
// ...
|
||
}
|
||
|
||
// 返回15+个值
|
||
return {
|
||
previewUrl,
|
||
imageLoading,
|
||
updatePreviewUrl,
|
||
previewImage,
|
||
isImageView,
|
||
isVideoView,
|
||
// ... 还有10+个
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 使用方式
|
||
|
||
```typescript
|
||
// index.vue
|
||
const {
|
||
previewUrl,
|
||
updatePreviewUrl,
|
||
isImageView
|
||
} = useFilePreview({ filePath })
|
||
|
||
// 使用
|
||
updatePreviewUrl(url)
|
||
```
|
||
|
||
#### 优点
|
||
- ✅ 符合 Vue 3 Composition API 理念
|
||
- ✅ 函数式，灵活性高
|
||
- ✅ 可以选择性解构需要的值
|
||
- ✅ Tree-shaking 友好
|
||
|
||
#### 缺点
|
||
- ❌ 解构时容易遗漏函数
|
||
- ❌ 返回值过多时难以管理
|
||
- ❌ 初始化顺序依赖手动保证
|
||
- ❌ 状态分散，内聚性低
|
||
|
||
---
|
||
|
||
### 方案B: OOP + Class（提议方案）
|
||
|
||
#### 代码示例
|
||
|
||
```typescript
|
||
// services/FilePreviewService.ts
|
||
export class FilePreviewService {
|
||
// ========== 状态 ==========
|
||
private readonly _previewUrl = ref<string>('')
|
||
private readonly _imageLoading = ref<boolean>(false)
|
||
private readonly _currentImageDimensions = ref<string>('')
|
||
|
||
// ========== 依赖注入 ==========
|
||
constructor(
|
||
private readonly filePath: Ref<string>,
|
||
private readonly fileServer: FileServerService,
|
||
private readonly options: FilePreviewOptions = {}
|
||
) {
|
||
// 构造函数保证初始化顺序
|
||
this.initialize()
|
||
}
|
||
|
||
// ========== 公共接口 ==========
|
||
|
||
// Getter（访问器）
|
||
get previewUrl(): string {
|
||
return this._previewUrl.value
|
||
}
|
||
|
||
get imageLoading(): boolean {
|
||
return this._imageLoading.value
|
||
}
|
||
|
||
// 方法
|
||
updatePreviewUrl(url: string): void {
|
||
this._previewUrl.value = url
|
||
}
|
||
|
||
async previewImage(path: string): Promise<void> {
|
||
this._imageLoading.value = true
|
||
try {
|
||
const url = await this.fileServer.getPreviewUrl(path)
|
||
this.updatePreviewUrl(url)
|
||
} finally {
|
||
this._imageLoading.value = false
|
||
}
|
||
}
|
||
|
||
isImageFile(path: string): boolean {
|
||
return FileTypes.isImage(path)
|
||
}
|
||
|
||
// ========== 私有方法 ==========
|
||
|
||
private initialize(): void {
|
||
// 初始化逻辑，保证顺序
|
||
this.loadPreviewSettings()
|
||
}
|
||
|
||
private async loadPreviewSettings(): Promise<void> {
|
||
// ...
|
||
}
|
||
}
|
||
|
||
// 工厂函数（可选）
|
||
export function createFilePreviewService(
|
||
filePath: Ref<string>,
|
||
fileServer?: FileServerService
|
||
): FilePreviewService {
|
||
return new FilePreviewService(
|
||
filePath,
|
||
fileServer ?? new FileServerService()
|
||
)
|
||
}
|
||
```
|
||
|
||
#### 使用方式
|
||
|
||
```typescript
|
||
// index.vue
|
||
// 方式1: 直接实例化
|
||
const previewService = new FilePreviewService(
|
||
filePath,
|
||
new FileServerService()
|
||
)
|
||
|
||
// 方式2: 工厂函数
|
||
const previewService = createFilePreviewService(filePath)
|
||
|
||
// 使用
|
||
previewService.updatePreviewUrl(url)
|
||
const isLoading = previewService.imageLoading
|
||
```
|
||
|
||
#### 优点
|
||
- ✅ **构造函数保证初始化顺序**
|
||
- ✅ **状态和行为绑定（高内聚）**
|
||
- ✅ **类型安全，IDE 自动完成更好**
|
||
- ✅ **不会遗漏方法（都有实例.提示）**
|
||
- ✅ **依赖注入，易于测试**
|
||
- ✅ **私有方法封装性好**
|
||
|
||
#### 缺点
|
||
- ❌ 与 Vue 3 Composition API 理念不完全一致
|
||
- ❌ 需要手动管理实例生命周期
|
||
- ❌ 失去 composables 的部分灵活性
|
||
- ❌ 可能带来额外的内存开销
|
||
|
||
---
|
||
|
||
## 3. 混合方案（推荐）
|
||
|
||
### Composables + Service Layer
|
||
|
||
```typescript
|
||
// composables/useFilePreview.ts（轻量级）
|
||
import { FilePreviewService } from '@/services/FilePreviewService'
|
||
|
||
export function useFilePreview(options: UseFilePreviewOptions) {
|
||
// 创建服务实例
|
||
const service = new FilePreviewService(
|
||
options.filePath,
|
||
new FileServerService()
|
||
)
|
||
|
||
// 返回响应式接口
|
||
return {
|
||
// 响应式状态（直接返回 ref）
|
||
previewUrl: service.previewUrlRef,
|
||
imageLoading: service.imageLoadingRef,
|
||
|
||
// 方法（绑定实例）
|
||
updatePreviewUrl: (url: string) => service.updatePreviewUrl(url),
|
||
previewImage: (path: string) => service.previewImage(path),
|
||
|
||
// 服务实例（可选，用于高级用法）
|
||
$service: service
|
||
}
|
||
}
|
||
|
||
// services/FilePreviewService.ts（核心逻辑）
|
||
export class FilePreviewService {
|
||
private readonly _previewUrl = ref<string>('')
|
||
|
||
constructor(
|
||
private readonly filePath: Ref<string>,
|
||
private readonly fileServer: FileServerService
|
||
) {}
|
||
|
||
get previewUrlRef(): Ref<string> {
|
||
return this._previewUrl
|
||
}
|
||
|
||
updatePreviewUrl(url: string): void {
|
||
this._previewUrl.value = url
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 使用方式
|
||
|
||
```typescript
|
||
// 简单使用（和之前一样）
|
||
const { previewUrl, updatePreviewUrl } = useFilePreview({ filePath })
|
||
|
||
// 高级使用（直接访问服务）
|
||
const { $service } = useFilePreview({ filePath })
|
||
$service.previewImage(path) // 访问所有方法
|
||
```
|
||
|
||
#### 优势
|
||
- ✅ 保留 Composition API 的便利性
|
||
- ✅ 核心逻辑使用 OOP，保证初始化顺序
|
||
- ✅ 两种使用方式，灵活性高
|
||
- ✅ 渐进式重构，成本低
|
||
|
||
---
|
||
|
||
## 4. 实际应用示例
|
||
|
||
### 文件系统服务架构
|
||
|
||
```typescript
|
||
// ========== 服务层（核心逻辑） ==========
|
||
|
||
// services/FileSystemService.ts
|
||
export class FileSystemService {
|
||
constructor(
|
||
private readonly fileApi: FileApiService,
|
||
private readonly previewService: FilePreviewService,
|
||
private readonly zipService: ZipBrowserService
|
||
) {
|
||
this.initializeServices()
|
||
}
|
||
|
||
private initializeServices(): void {
|
||
// 保证服务初始化顺序
|
||
this.previewService.initialize()
|
||
this.zipService.initialize()
|
||
}
|
||
|
||
async loadDirectory(path: string): Promise<FileItem[]> {
|
||
return await this.fileApi.listDirectory(path)
|
||
}
|
||
|
||
async previewFile(file: FileItem): Promise<void> {
|
||
if (file.is_dir) return
|
||
|
||
if (this.zipService.isBrowsingZip) {
|
||
await this.zipService.previewZipFile(file.path)
|
||
} else {
|
||
await this.previewService.previewFile(file.path)
|
||
}
|
||
}
|
||
}
|
||
|
||
// services/FilePreviewService.ts
|
||
export class FilePreviewService {
|
||
private readonly _previewUrl = ref<string>('')
|
||
private readonly _fileContent = ref<string>('')
|
||
|
||
constructor(
|
||
private readonly fileApi: FileApiService,
|
||
private readonly filePath: Ref<string>
|
||
) {}
|
||
|
||
async previewFile(path: string): Promise<void> {
|
||
const ext = FileTypes.getExtension(path)
|
||
|
||
if (FileTypes.isImage(ext)) {
|
||
await this.previewImage(path)
|
||
} else if (FileTypes.isCode(ext)) {
|
||
await this.loadCodeContent(path)
|
||
}
|
||
}
|
||
|
||
private async previewImage(path: string): Promise<void> {
|
||
const url = await this.fileApi.getImageUrl(path)
|
||
this._previewUrl.value = url
|
||
}
|
||
}
|
||
|
||
// services/ZipBrowserService.ts
|
||
export class ZipBrowserService {
|
||
private readonly _isBrowsingZip = ref<boolean>(false)
|
||
private readonly _currentZipPath = ref<string>('')
|
||
|
||
constructor(
|
||
private readonly fileApi: FileApiService,
|
||
private readonly previewService: FilePreviewService
|
||
) {
|
||
// 依赖注入，保证 previewService 已初始化
|
||
}
|
||
|
||
async enterZipMode(zipPath: string): Promise<void> {
|
||
this._currentZipPath.value = zipPath
|
||
this._isBrowsingZip.value = true
|
||
await this.loadZipRoot()
|
||
}
|
||
|
||
async previewZipFile(filePath: string): Promise<void> {
|
||
// 可以安全地调用 previewService
|
||
await this.previewService.previewFile(filePath)
|
||
}
|
||
}
|
||
|
||
// ========== Composables 层（轻量封装） ==========
|
||
|
||
// composables/useFileSystem.ts
|
||
export function useFileSystem() {
|
||
// 创建服务实例（初始化顺序由构造函数保证）
|
||
const fileApi = new FileApiService()
|
||
const previewService = new FilePreviewService(fileApi, filePath)
|
||
const zipService = new ZipBrowserService(fileApi, previewService)
|
||
const fileSystemService = new FileSystemService(
|
||
fileApi,
|
||
previewService,
|
||
zipService
|
||
)
|
||
|
||
// 返回响应式接口
|
||
return {
|
||
// 状态
|
||
fileList: ref<FileItem[]>([]),
|
||
fileLoading: ref(false),
|
||
|
||
// 方法（委托给服务）
|
||
loadDirectory: (path: string) => fileSystemService.loadDirectory(path),
|
||
previewFile: (file: FileItem) => fileSystemService.previewFile(file),
|
||
|
||
// 服务实例（可选）
|
||
$services: {
|
||
fileSystem: fileSystemService,
|
||
preview: previewService,
|
||
zip: zipService
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 使用示例
|
||
|
||
```typescript
|
||
// index.vue
|
||
const {
|
||
fileList,
|
||
fileLoading,
|
||
loadDirectory,
|
||
previewFile,
|
||
$services // 访问完整服务
|
||
} = useFileSystem()
|
||
|
||
// 简单使用
|
||
await loadDirectory(path)
|
||
|
||
// 高级使用（访问所有服务方法）
|
||
if ($services.zip.isBrowsingZip) {
|
||
await $services.zip.navigateToZipDirectory(path)
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 5. 对比总结表
|
||
|
||
| 维度 | Composables | OOP + Class | 混合方案 |
|
||
|-----|-------------|-------------|---------|
|
||
| **初始化顺序保证** | ❌ 手动保证 | ✅ 构造函数保证 | ✅ 构造函数保证 |
|
||
| **内聚性** | ⚠️ 状态分散 | ✅ 高 | ✅ 高 |
|
||
| **类型安全** | ⚠️ 解构容易出错 | ✅ 严格 | ✅ 严格 |
|
||
| **IDE 支持** | ⚠️ 中等 | ✅ 优秀 | ✅ 优秀 |
|
||
| **代码复用** | ✅ 灵活 | ⚠️ 需要继承 | ✅ 灵活 |
|
||
| **测试性** | ⚠️ 需要模拟依赖 | ✅ 依赖注入 | ✅ 依赖注入 |
|
||
| **学习曲线** | ✅ 平缓 | ⚠️ 需要OOP经验 | ⚠️ 中等 |
|
||
| **重构成本** | ✅ 低 | ❌ 高 | ⚠️ 中等 |
|
||
| **与 Vue 3 兼容** | ✅ 完美 | ⚠️ 需要适配 | ✅ 良好 |
|
||
| **性能** | ✅ 轻量 | ⚠️ 可能有开销 | ✅ 轻量 |
|
||
|
||
---
|
||
|
||
## 6. 推荐方案
|
||
|
||
### 短期（1-2周）：保持 Composables + 改进规范
|
||
|
||
```typescript
|
||
// 添加分区注释，保证顺序
|
||
// ========== 1. 工具函数 ==========
|
||
const isEditableWithPreview = (filename: string): boolean => { ... }
|
||
|
||
// ========== 2. 状态变量 ==========
|
||
const fileList = ref<FileItem[]>([])
|
||
|
||
// ========== 3. Composables ==========
|
||
const { previewUrl, updatePreviewUrl } = useFilePreview({ filePath })
|
||
|
||
// ========== 4. Computed ==========
|
||
const config = computed(() => ({
|
||
canPreview: isEditableWithPreview(filename) // ✅ 函数已定义
|
||
}))
|
||
```
|
||
|
||
### 中期（1-2月）：混合方案
|
||
|
||
```typescript
|
||
// 新功能使用 OOP 服务
|
||
// 老功能保持 Composables
|
||
// 逐步迁移
|
||
```
|
||
|
||
### 长期（3-6月）：全面 OOP 架构
|
||
|
||
```typescript
|
||
// 所有核心逻辑使用服务类
|
||
// Composables 仅作为轻量级适配器
|
||
```
|
||
|
||
---
|
||
|
||
## 7. 实施建议
|
||
|
||
### 如果采用混合方案，分步骤：
|
||
|
||
#### 步骤1：创建服务层（不影响现有代码）
|
||
|
||
```typescript
|
||
// services/FilePreviewService.ts
|
||
export class FilePreviewService {
|
||
// 新代码使用 OOP
|
||
}
|
||
```
|
||
|
||
#### 步骤2：创建适配器 Composable
|
||
|
||
```typescript
|
||
// composables/useFilePreview.ts
|
||
export function useFilePreview(options) {
|
||
const service = new FilePreviewService(...)
|
||
|
||
return {
|
||
// 响应式接口
|
||
previewUrl: service.previewUrlRef,
|
||
// 方法
|
||
updatePreviewUrl: (url) => service.updatePreviewUrl(url)
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 步骤3：逐步迁移现有代码
|
||
|
||
```typescript
|
||
// 老代码
|
||
const { previewUrl, updatePreviewUrl } = useFilePreview({ filePath })
|
||
|
||
// 新代码（可以直接使用服务）
|
||
const service = new FilePreviewService(filePath)
|
||
service.updatePreviewUrl(url)
|
||
```
|
||
|
||
---
|
||
|
||
## 8. 结论
|
||
|
||
### OOP 方案能解决当前问题吗？
|
||
|
||
**✅ 能解决：**
|
||
1. 初始化顺序问题（构造函数保证）
|
||
2. 解构遗漏问题（实例.调用）
|
||
3. 返回值过多问题（清晰的接口）
|
||
4. 内聚性问题（状态+行为绑定）
|
||
|
||
### 但需要权衡：
|
||
|
||
**❌ 潜在问题：**
|
||
1. 与 Vue 3 理念不完全一致
|
||
2. 重构成本较高
|
||
3. 团队学习曲线
|
||
|
||
### 最佳方案：
|
||
|
||
**🎯 推荐：混合方案**
|
||
- 核心逻辑使用 OOP 服务类
|
||
- Composables 作为轻量适配器
|
||
- 渐进式迁移，降低风险
|
||
|
||
---
|
||
|
||
**生成时间**: 2026-01-31
|
||
**下一步**: 是否创建一个示例服务类验证可行性？
|