# design-mode

**Repository Path**: ytxp/design-mode

## Basic Information

- **Project Name**: design-mode
- **Description**: 设计模式示例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-01
- **Last Updated**: 2025-04-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 设计模式示例项目

本项目使用 Vue 3 + TypeScript 实现，用于展示常见的设计模式及其实际应用场景。

## 享元模式（Flyweight Pattern）

### 概念介绍

享元模式是一种结构型设计模式，它通过共享对象来有效地支持大量细粒度对象的复用。享元模式通过共享已经存在的对象来大幅度减少需要创建的对象数量，避免大量相似对象的开销，从而提高系统资源的利用率。

### 核心要素

1. **内部状态（Intrinsic State）**
   - 存储在享元对象内部
   - 可以被多个对象共享
   - 不会随环境变化而改变

2. **外部状态（Extrinsic State）**
   - 取决于具体的场景
   - 不能被共享
   - 会随环境变化而改变

3. **享元工厂（Flyweight Factory）**
   - 负责创建和管理享元对象
   - 确保享元对象被正确共享
   - 通常使用单例模式实现

### 本项目示例说明

本项目实现了一个图书管理系统的示例，展示了享元模式的实际应用：

#### 核心实现

1. **享元对象（BookFlyweight）**
```typescript
class BookFlyweight {
  constructor(
    private intrinsicState: BookIntrinsicState,  // 内部状态：书名、作者、ISBN
    private extrinsicState: BookExtrinsicState   // 外部状态：位置、借阅者、到期日
  ) {}
}
```

2. **享元工厂（BookFlyweightFactory）**
```typescript
class BookFlyweightFactory {
  private flyweights: Map<string, BookIntrinsicState> = new Map();
  
  getFlyweight(isbn: string): BookIntrinsicState {
    if (!this.flyweights.has(isbn)) {
      this.flyweights.set(isbn, {
        title: `Book ${isbn}`,
        author: `Author ${isbn}`,
        isbn: isbn
      });
    }
    return this.flyweights.get(isbn)!;
  }
}
```

#### 使用场景

在本示例中：
- 内部状态：图书的基本信息（书名、作者、ISBN）
- 外部状态：图书的借阅信息（位置、借阅者、到期日）
- 当创建多本相同ISBN的图书时，它们共享相同的基本信息，只存储不同的借阅信息

#### 性能优势

1. **内存优化**：相同ISBN的图书共享内部状态，减少内存使用
2. **对象复用**：避免重复创建相同内容的对象
3. **状态分离**：将可变状态和不可变状态分离，便于管理

## 外观模式（Facade Pattern）

### 概念介绍

外观模式是一种结构型设计模式，它为复杂的子系统提供了一个简单的接口。外观模式定义了一个高层接口，这个接口使得子系统更容易使用。通过外观模式，我们可以将系统的复杂性隐藏起来，为客户端提供一个简单的接口。

### 核心要素

1. **外观（Facade）**
   - 为子系统提供一个统一的接口
   - 将客户端的请求委派给适当的子系统对象
   - 降低系统的复杂度

2. **子系统（Subsystem）**
   - 实现子系统的功能
   - 处理外观对象委派的任务
   - 相互独立，互不影响

### 本项目示例说明

本项目实现了一个家庭影院系统的示例，展示了外观模式的实际应用：

#### 核心实现

1. **子系统类**
```typescript
// 电视子系统
class TV {
  turnOn() { return "电视已开启"; }
  turnOff() { return "电视已关闭"; }
  setChannel(channel: number) { return `切换到频道 ${channel}`; }
  setVolume(volume: number) { return `音量设置为 ${volume}`; }
}

// 音响子系统
class SoundSystem {
  turnOn() { return "音响系统已开启"; }
  turnOff() { return "音响系统已关闭"; }
  setVolume(volume: number) { return `音量设置为 ${volume}`; }
  setMode(mode: string) { return `音效模式设置为 ${mode}`; }
}

// 灯光子系统
class LightingSystem {
  turnOn() { return "灯光已开启"; }
  turnOff() { return "灯光已关闭"; }
  setBrightness(brightness: number) { return `亮度设置为 ${brightness}%`; }
  setMode(mode: string) { return `灯光模式设置为 ${mode}`; }
}
```

2. **外观类**
```typescript
class HomeTheaterFacade {
  private tv: TV;
  private soundSystem: SoundSystem;
  private lighting: LightingSystem;

  constructor() {
    this.tv = new TV();
    this.soundSystem = new SoundSystem();
    this.lighting = new LightingSystem();
  }

  // 一键开启电影模式
  watchMovie() {
    return [
      this.lighting.turnOn(),
      this.lighting.setBrightness(30),
      this.lighting.setMode("电影模式"),
      this.tv.turnOn(),
      this.tv.setChannel(1),
      this.tv.setVolume(50),
      this.soundSystem.turnOn(),
      this.soundSystem.setVolume(60),
      this.soundSystem.setMode("环绕声")
    ];
  }
}
```

#### 使用场景

在本示例中：
- 外观类（HomeTheaterFacade）提供了一个简单的接口来控制整个家庭影院系统
- 子系统类（TV、SoundSystem、LightingSystem）各自处理自己的功能
- 通过外观类，客户端可以轻松实现"一键开启电影模式"等功能

#### 设计优势

1. **简化接口**：将复杂的子系统接口简化为一个统一的接口
2. **降低耦合**：客户端只需要与外观类交互，不需要了解子系统的细节
3. **提高灵活性**：可以方便地修改子系统的实现，而不影响客户端代码

### 运行项目

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

访问 http://localhost:5173 查看示例效果。

### 操作说明

1. 享元模式示例：
   - 点击"添加图书"按钮：每次添加10本随机图书
   - 观察"享元对象数量"和"图书实例数量"的差异
   - 点击"清除图书"按钮：清空当前显示的图书

2. 外观模式示例：
   - 点击"开启电影模式"按钮：一键设置所有设备为电影模式
   - 点击"开启音乐模式"按钮：一键设置所有设备为音乐模式
   - 点击"关闭所有设备"按钮：一键关闭所有设备

### 注意事项

- 享元模式适用于系统中存在大量相似对象的情况
- 需要正确区分内部状态和外部状态
- 享元对象应该是不可变的
- 外部状态必须由客户端代码提供
- 外观模式适用于需要简化复杂系统接口的场景
- 外观类应该保持简单，不要包含业务逻辑
- 子系统的变化可能会影响外观类，需要适当处理