享元模式

┌─────────────────────────────────────────────────────────────┐
│                   享元模式设计意图                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  问题场景：                                                 │
│  - 系统中存在大量相似对象，内存占用过高                    │
│  - 对象的大部分状态可以提取为共享数据                      │
│  - 反复创建销毁同类对象导致 GC 压力过大                   │
│  - 需要缓存已创建的对象以避免重复构建                      │
│                                                             │
│  解决方案：                                                 │
│  - 将对象状态拆分为内部状态（可共享）和外部状态（不可共享）│
│  - 通过享元工厂缓存并复用内部状态相同的对象                │
│  - 客户端负责维护外部状态并在调用时传入                    │
│                                                             │
│  效果：                                                     │
│  - 大幅减少内存中对象的数量                                │
│  - 集中管理共享状态，便于统一修改                          │
│  - 降低 GC 频率，提升运行时性能                            │
│                                                             │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                     享元模式结构                            │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   ┌─────────────────────────────────────┐                   │
│   │          <<interface>>              │                   │
│   │           Flyweight                 │                   │
│   ├─────────────────────────────────────┤                   │
│   │ + operation(extrinsicState): void   │                   │
│   └───────────────┬─────────────────────┘                   │
│                   │                                         │
│         ┌────────┴────────┐                                 │
│         │                 │                                 │
│  ┌──────┴─────┐   ┌───────┴──────┐                          │
│  │Concrete    │   │Unshared      │                          │
│  │Flyweight   │   │Concrete      │                          │
│  ├────────────┤   │Flyweight     │                          │
│  │-intrinsic  │   ├──────────────┤                          │
│  │State       │   │-allState     │                          │
│  │+operation()│   │+operation()  │                          │
│  └────────────┘   └──────────────┘                          │
│         │                 │                                 │
│         └────────┬────────┘                                 │
│                  │                                          │
│   ┌──────────────┴──────────────┐                           │
│   │       FlyweightFactory      │                           │
│   ├─────────────────────────────┤                           │
│   │ + getFlyweight(key): Flyweight      │                   │
│   │ + flyweightCount(): number          │                   │
│   └─────────────────────────────────────┘                   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                   是否使用享元模式？                         │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  1. 是否存在大量相似对象？                                   │
│     └─ 否 → 不需要享元                                     │
│     └─ 是 → 继续                                           │
│                                                             │
│  2. 对象的状态能否拆分为共享/非共享两部分？                  │
│     └─ 否 → 考虑对象池模式                                 │
│     └─ 是 → 继续                                           │
│                                                             │
│  3. 共享部分是否确实被多个对象重复使用？                     │
│     └─ 否 → 拆分收益不大，不推荐                           │
│     └─ 是 → 使用享元模式                                   │
│                                                             │
│  4. 内存消耗是否已成为性能瓶颈？                             │
│     └─ 否 → 可选（提前优化 vs 按需优化）                   │
│     └─ 是 → 强烈推荐                                       │
│                                                             │
└─────────────────────────────────────────────────────────────┘

/**
 * 享元接口：字形
 */
interface Glyph {
  /** 渲染字符，position 为外部状态 */
  render(position: Position): void;
  /** 获取字符编码（内部状态的唯一标识） */
  getCharCode(): string;
}

/** 位置信息：外部状态 */
interface Position {
  x: number;
  y: number;
}

/** 具体享元：字形 */
class ConcreteGlyph implements Glyph {
  constructor(private readonly charCode: string) {}
  getCharCode(): string { return this.charCode; }
  render(position: Position): void {
    // 内部状态（charCode）+ 外部状态（position）
    console.log(`渲染 '${this.charCode}' @ (${position.x}, ${position.y})`);
  }
}

/** 享元工厂 */
class GlyphFactory {
  private pool = new Map<string, Glyph>();
  getGlyph(charCode: string): Glyph {
    if (!this.pool.has(charCode)) {
      this.pool.set(charCode, new ConcreteGlyph(charCode));
    }
    return this.pool.get(charCode)!;
  }
  getGlyphCount(): number { return this.pool.size; }
}

// ==================== 使用：渲染文档 ====================
const glyphFactory = new GlyphFactory();
const docText = 'Hello World!';
const charWidth = 10;
const glyphs: Glyph[] = [...docText].map((c) => glyphFactory.getGlyph(c));

glyphs.forEach((glyph, i) => {
  // 位置是外部状态，每次渲染时传入
  glyph.render({ x: i * charWidth, y: 0 });
})

console.log(`\n文档长度: ${docText.length}, 享元对象数: ${glyphFactory.getGlyphCount()}`);
// 文档长度 12, 享元对象数 9（'l'、'o' 等重复字符共享）

/**
 * 泛型享元工厂
 * TIntrinsic: 内部状态类型
 * TExtrinsic: 外部状态类型
 */
interface FlyweightOperation<TIntrinsic, TExtrinsic, TResult> {
  (intrinsic: TIntrinsic, extrinsic: TExtrinsic): TResult;
}

class FlyweightFactory<TIntrinsic, TExtrinsic, TResult> {
  private readonly pool: Map<string, TIntrinsic> = new Map();

  constructor(private readonly keyer: (intrinsic: TIntrinsic) => string) {}

  getFlyweight(intrinsic: TIntrinsic): TIntrinsic {
    const key = this.keyer(intrinsic);
    if (!this.pool.has(key)) {
      this.pool.set(key, intrinsic);
    }
    return this.pool.get(key)!;
  }

  get size(): number { return this.pool.size; }
}

// ==================== 使用：国际象棋 ====================
interface ChessPieceIntrinsic { symbol: string; color: 'white' | 'black'; }
interface BoardPosition { row: number; col: number; }

const chessFactory = new FlyweightFactory<ChessPieceIntrinsic, BoardPosition, string>(
  (piece) => `${piece.symbol}:${piece.color}`
);

const whiteKing = chessFactory.getFlyweight({ symbol: 'K', color: 'white' });
const whiteKingAgain = chessFactory.getFlyweight({ symbol: 'K', color: 'white' });
console.log(whiteKing === whiteKingAgain); // true -- 共享同一对象

// 使用 operation
const op = (intrinsic: ChessPieceIntrinsic, position: BoardPosition) =>
  `${intrinsic.symbol} @ (${position.row}, ${position.col}) [${intrinsic.color}]`;
console.log(op(whiteKing, { row: 0, col: 4 }));
console.log(`享元池大小: ${chessFactory.size}`); // 1

/**
 * 基于 WeakMap 的享元工厂
 * 适用于 key 为对象引用的场景，允许 GC 自动回收不再使用的享元
 */
class WeakFlyweightFactory<TKey extends object, TFlyweight> {
  private readonly pool: WeakMap<TKey, TFlyweight> = new WeakMap();
  private readonly creator: (key: TKey) => TFlyweight;

  constructor(creator: (key: TKey) => TFlyweight) {
    this.creator = creator;
  }

  getFlyweight(key: TKey): TFlyweight {
    if (!this.pool.has(key)) {
      this.pool.set(key, this.creator(key));
    }
    return this.pool.get(key)!;
  }
}

// ==================== 使用：样式计算 ====================
interface StyleKey { fontFamily: string; fontSize: number; fontWeight: number; }
interface ComputedStyle { lineHeight: number; }

function computeStyle(key: StyleKey): ComputedStyle {
  // 假设根据字体信息计算 lineHeight
  return { lineHeight: Math.round(key.fontSize * 1.5) };
}

const styleFactory = new WeakFlyweightFactory(computeStyle);

const styleKey: StyleKey = { fontFamily: 'Inter', fontSize: 16, fontWeight: 400 };
const computed = styleFactory.getFlyweight(styleKey);
console.log(`lineHeight: ${computed.lineHeight}`); // 24

// 当 styleKey 变量超出作用域后，对应的 ComputedStyle 可被 GC 回收

/**
 * 可重置对象接口
 * 对象池要求对象在归还时能够重置自身状态
 */
interface Resettable {
  reset(): void;
}

/**
 * 泛型对象池
 * 预创建一批对象，使用时 acquire，用完 release 归还
 */
class ObjectPool<T extends Resettable> {
  private available: T[] = [];
  private inUse = 0;
  private readonly maxSize: number;

  constructor(private readonly factory: () => T, initialSize: number, maxSize?: number) {
    this.maxSize = maxSize ?? initialSize;
    for (let i = 0; i < initialSize; i++) {
      this.available.push(this.factory());
    }
  }

  acquire(): T {
    if (this.available.length === 0) {
      if (this.inUse >= this.maxSize) throw new Error('对象池已满');
      this.inUse++;
      return this.factory();
    }
    this.inUse++;
    return this.available.pop()!;
  }

  release(obj: T): void {
    obj.reset();
    this.available.push(obj);
    this.inUse--;
  }

  getStats() {
    return { available: this.available.length, inUse: this.inUse, total: this.available.length + this.inUse };
  }
}

// ==================== 使用：粒子系统 ====================
interface Particle extends Resettable {
  x: number; y: number; vx: number; vy: number; life: number;
  update(dt: number): void;
}
class BulletParticle implements Particle {
  x = 0; y = 0; vx = 0; vy = 0; life = 0;
  update(dt: number) { this.x += this.vx * dt; this.y += this.vy * dt; this.life -= dt; }
  reset() { this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.life = 0; }
}

const particlePool = new ObjectPool<BulletParticle>(() => new BulletParticle(), 200);
function emitParticles(x: number, y: number, count: number): BulletParticle[] {
  const particles: BulletParticle[] = [];
  for (let i = 0; i < count; i++) {
    const p = particlePool.acquire();
    p.x = x; p.y = y; p.life = 1;
    particles.push(p);
  }
  return particles;
}
function updateParticles(particles: BulletParticle[], dt: number) {
  particles.forEach((p) => p.update(dt));
}

// 模拟发射和更新
const activeParticles = emitParticles(100, 100, 50);
console.log(particlePool.getStats());
// { available: 150, inUse: 50, total: 200 }

updateParticles(activeParticles, 16);

/**
 * 场景：在线地图中的标记点
 * 同类 POI（餐厅、加油站、医院）共享图标样式（内部状态）
 * 各自的经纬度、名称为外部状态
 */
interface POIStyle {
  icon: string;
  color: string;
  size: number;
  zIndex: number;
}

// 享元工厂：按类型共享图标样式
class POIFactory {
  private pool = new Map<string, POIStyle>();
  getStyle(type: 'restaurant' | 'gas' | 'hospital'): POIStyle {
    if (!this.pool.has(type)) {
      const style: POIStyle = {
        restaurant: { icon: '🍽️', color: '#ff6b6b', size: 28, zIndex: 10 },
        gas: { icon: '⛽', color: '#4ecdc4', size: 24, zIndex: 10 },
        hospital: { icon: '🏥', color: '#f9ca24', size: 30, zIndex: 20 },
      }[type];
      this.pool.set(type, style);
    }
    return this.pool.get(type)!;
  }
  get size(): number { return this.pool.size; }
}

// 外部状态：每个标记点的位置/名称独立
interface POIMarker {
  name: string;
  style: POIStyle;
  lat: number;
  lng: number;
}

// 生成 10000 个标记点（但只有 3 个享元样式）
const poiFactory = new POIFactory();
const markers: POIMarker[] = Array.from({ length: 10000 }, (_, i) => {
  const type = ['restaurant', 'gas', 'hospital'][i % 3] as 'restaurant' | 'gas' | 'hospital';
  return {
    name: `POI-${i}`,
    style: poiFactory.getStyle(type),
    lat: 39.9 + Math.random() * 0.1,
    lng: 116.3 + Math.random() * 0.1
  };
});

console.log(`标记总数: 10000, 享元对象数: ${poiFactory.size}`); // 3

/**
 * 场景：2D 游戏子弹管理
 * 子弹的纹理、伤害值为内部状态（按武器类型共享）
 * 位置、速度方向为外部状态
 */
interface BulletIntrinsic {
  textureId: string;
  damage: number;
  speed: number;
  radius: number;
}

/** 具体享元：子弹 */
class BulletFlyweight {
  constructor(private readonly intrinsic: BulletIntrinsic) {}
  render(x: number, y: number, direction: number): void {
    // 内部状态 + 外部状态（位置/方向）
    console.log(`子弹[${this.intrinsic.textureId}] 伤害${this.intrinsic.damage} @ (${x},${y}) dir ${direction}`);
  }
}

/** 享元工厂：按武器类型共享子弹属性 */
class BulletPool {
  private pool = new Map<string, BulletFlyweight>();
  getBullet(weaponType: string): BulletFlyweight {
    let flyweight = this.pool.get(weaponType);
    if (!flyweight) {
      const preset: BulletIntrinsic = {
        textureId: `tex_${weaponType}`,
        damage: weaponType === 'rifle' ? 20 : 50,
        speed: weaponType === 'rifle' ? 30 : 15,
        radius: weaponType === 'rifle' ? 2 : 4,
      };
      flyweight = new BulletFlyweight(preset);
      this.pool.set(weaponType, flyweight);
    }
    return flyweight;
  }
}

/**
 * 简化版虚拟列表实现
 * 享元思想：DOM 节点池复用，仅更新外部状态（数据索引、位置）
 */
interface VirtualListOptions<T> {
  containerHeight: number;
  rowHeight: number;
  overscan: number;
  data: T[];
  renderRow: (index: number, data: T) => string;
}

/** 虚拟列表：DOM 节点池复用 + 只渲染可见区域 */
class VirtualList<T> {
  private container: HTMLElement;
  private options: VirtualListOptions<T>;
  private nodePool: HTMLElement[] = [];
  private visibleCount = 0;

  constructor(container: HTMLElement, options: VirtualListOptions<T>) {
    this.container = container;
    this.options = options;
    this.visibleCount = Math.ceil(options.containerHeight / options.rowHeight) + options.overscan * 2;
    container.style.overflow = 'auto';
    container.style.height = `${options.containerHeight}px`;
    this.initScroll();
    this.render();
  }

  private initScroll(): void {
    this.container.addEventListener('scroll', () => this.render());
  }

  // 从池中取 DOM 节点，无则创建（享元复用）
  private getRowNode(): HTMLElement {
    if (this.nodePool.length > 0) return this.nodePool.pop()!;
    const node = document.createElement('div');
    node.style.position = 'absolute';
    node.style.left = '0';
    node.style.width = '100%';
    this.container.appendChild(node);
    return node;
  }

  private render(): void {
    const scrollTop = this.container.scrollTop;
    const start = Math.max(0, Math.floor(scrollTop / this.options.rowHeight) - this.options.overscan);
    const end = Math.min(this.options.data.length, start + this.visibleCount);
    // 清空已用节点回池
    this.container.childNodes.forEach((child) => { if (child instanceof HTMLElement) this.nodePool.push(child); });
    this.container.innerHTML = '';
    for (let i = start; i < end; i++) {
      const node = this.getRowNode();
      node.style.top = `${i * this.options.rowHeight}px`;
      node.style.height = `${this.options.rowHeight}px`;
      node.innerHTML = this.options.renderRow(i, this.options.data[i]);
      this.container.appendChild(node);
    }
  }
}

// 使用
new VirtualList(document.getElementById('list')!, {
  containerHeight: 600,
  rowHeight: 40,
  overscan: 3,
  data: Array.from({ length: 10000 }, (_, i) => `项目 ${i + 1}`),
  renderRow: (index, data) => `<span>${data}</span>`
});

/**
 * Canvas 粒子系统的享元优化
 * 粒子样式（颜色、形状）为内部状态，共享
 * 粒子位置、速度、生命周期为外部状态，独立
 */
interface ParticleStyle {
  color: string;
  shape: 'circle' | 'square' | 'triangle';
  baseSize: number;
}

interface ParticleState {
  x: number;
  y: number;
  vx: number;
  vy: number;
  life: number;
}

/** 具体享元：粒子样式 */
class ParticleFlyweight {
  constructor(private readonly style: ParticleStyle) {}
  render(state: ParticleState): void {
    console.log(`绘制${this.style.shape}(${this.style.color}) @ (${state.x},${state.y})`);
  }
}

/** 粒子样式工厂 */
class ParticleStyleFactory {
  private pool = new Map<string, ParticleFlyweight>();
  getStyle(color: string, shape: ParticleStyle['shape']): ParticleFlyweight {
    const key = `${color}:${shape}`;
    if (!this.pool.has(key)) {
      this.pool.set(key, new ParticleFlyweight({ color, shape, baseSize: 10 }));
    }
    return this.pool.get(key)!;
  }

  get size(): number {
    return this.pool.size;
  }
}

/**
 * DOM 节点池：列表复用 DOM 节点而非销毁重建
 * 适用于频繁增删 DOM 元素的场景（如聊天消息列表、表格行）
 */
class DOMNodePool {
  private readonly pool: HTMLElement[] = [];
  private readonly tagName: string;

  constructor(tagName: string = 'div', initialSize: number = 0) {
    this.tagName = tagName;
    for (let i = 0; i < initialSize; i++) {
      this.pool.push(document.createElement(tagName));
    }
  }

  acquire(): HTMLElement {
    if (this.pool.length > 0) return this.pool.pop()!;
    return document.createElement(this.tagName);
  }

  release(node: HTMLElement): void {
    // 清空内容、移除事件，重置状态后再回池
    node.innerHTML = '';
    node.removeAttribute('style');
    const clean = node.cloneNode(false) as HTMLElement; // 克隆节点不携带事件监听
    node.replaceWith(clean);
    this.pool.push(clean);
  }

  get size(): number { return this.pool.length; }
}

// 使用：表格行复用
const rowPool = new DOMNodePool('tr', 10);
function createTableRow(data: string[]): HTMLTableRowElement {
  const row = rowPool.acquire() as HTMLTableRowElement;
  row.innerHTML = data.map((d) => `<td>${d}</td>`).join('');
  return row;
}

function removeTableRow(row: HTMLTableRowElement): void {
  row.parentElement?.removeChild(row);
  rowPool.release(row);
}

/**
 * 简化版持久化向量（Persistent Vector）
 * 使用 Trie 树结构共享：修改时仅重建受影响路径上的节点
 * 未受影响的分支节点被新旧版本共享
 */
const BRANCH_SIZE = 32; // 每个节点 32 个子节点（5 位掩码）
const MASK = BRANCH_SIZE - 1;

class PersistentVector<T> {
  private constructor(
    private readonly root: TrieNode<T>,
    private readonly tail: T[],
    private readonly length: number
  ) {}

  static empty<T>(): PersistentVector<T> {
    return new PersistentVector<T>({ children: [] }, [], 0);
  }

  get size(): number { return this.length; }

  // 追加元素：创建新版本，共享未修改的树节点
  push(value: T): PersistentVector<T> {
    const newTail = [...this.tail, value];
    if (newTail.length < BRANCH_SIZE) {
      return new PersistentVector<T>(this.root, newTail, this.length + 1);
    }
    // tail 已满，将其并入树中
    let newRoot = this.root;
    if (newRoot.children.length > 0 && (this.length >> 5) > Math.floor((this.length - 1) >> 5)) {
      newRoot = { children: [this.root] };
    }
    // 简化：仅演示结构共享思路
    return new PersistentVector<T>(newRoot, [], this.length + 1);
  }
}

// Trie 节点：children 为 32 个槽位，存放数据或子节点
interface TrieNode<T> {
  children: (T | TrieNode<T> | null)[];
}

// 使用示例
let vec = PersistentVector.empty<number>();
// 实际使用中还需实现 get/set 等方法，此处仅演示 push 与结构共享的概念

// 享元：同一对象共享
const flyweightA = factory.getFlyweight('key'); // 返回缓存中的同一实例
const flyweightB = factory.getFlyweight('key'); // flyweightA === flyweightB

// 原型：克隆创建新实例
const prototype = new ConcretePrototype('data');
const cloneA = prototype.clone(); // 新实例
const cloneB = prototype.clone(); // 另一个新实例，cloneA !== cloneB

import java.util.HashMap;
import java.util.Map;

// 享元：内部状态（不变，可共享）+ 外部状态（变化，由客户端传入）
class TreeType {
    private final String name;   // 内部状态
    private final String color;  // 内部状态

    public TreeType(String name, String color) {
        this.name = name;
        this.color = color;
    }

    public void draw(int x, int y) {  // x, y 是外部状态
        System.out.println(name + "(" + color + ") 绘制于 (" + x + "," + y + ")");
    }
}

// 享元工厂：管理共享池，相同内部状态复用同一对象
class TreeFactory {
    private static final Map<String, TreeType> pool = new HashMap<>();

    public static TreeType getTreeType(String name, String color) {
        String key = name + ":" + color;
        return pool.computeIfAbsent(key, k -> new TreeType(name, color));
    }

    public static int poolSize() {
        return pool.size();
    }
}

// 使用：大量树木共享有限的 TreeType 对象
public class Client {
    public static void main(String[] args) {
        for (int i = 0; i < 10000; i++) {
            TreeType type = TreeFactory.getTreeType("松树", "绿色");
            type.draw(i % 100, i / 100);
        }
        // 尽管画了 1 万棵树，TreeType 对象只有 1 个
        System.out.println("TreeType 实例数 = " + TreeFactory.poolSize());
    }
}

class TreeType:
    """享元：内部状态（name/color）共享，外部状态（x/y）由调用方传入"""
    def __init__(self, name: str, color: str):
        self.name = name
        self.color = color

    def draw(self, x: int, y: int):
        print(f"{self.name}({self.color}) 绘制于 ({x},{y})")

class TreeFactory:
    _pool = {}

    @classmethod
    def get_tree_type(cls, name: str, color: str) -> TreeType:
        key = (name, color)
        if key not in cls._pool:
            cls._pool[key] = TreeType(name, color)
        return cls._pool[key]

# 使用
for i in range(10000):
    tree_type = TreeFactory.get_tree_type("松树", "绿色")
    tree_type.draw(i % 100, i // 100)

print(f"TreeType 实例数 = {len(TreeFactory._pool)}")  # 1