ProxyStore.ts

// ProxyStore.ts - 代理模式状态容器核心类

export type ProxyStoreSubscriber<T = any> = (
  value: T,
  key: string,
  prevValue: T
) => void

/**
 * 代理模式状态容器
 * 使用 Proxy 实现透明的响应式状态管理
 */
export class ProxyStore<T extends object = Record<string, any>> {
  private target: T
  private subscribers = new Map<string | symbol, Set<ProxyStoreSubscriber>>()
  private globalSubscribers = new Set<ProxyStoreSubscriber>()
  public proxy: T

  constructor(initialState: T = {} as T) {
    this.target = { ...initialState }
    this.proxy = this.createProxy()
  }

  private createProxy(): T {
    return new Proxy(this.target, {
      get: (target, key) => {
        return Reflect.get(target, key)
      },
      set: (target, key, value) => {
        const prevValue = Reflect.get(target, key)
        const result = Reflect.set(target, key, value)

        if (prevValue !== value) {
          this.notify(key as string, value, prevValue)
        }

        return result
      },
      deleteProperty: (target, key) => {
        const prevValue = Reflect.get(target, key)
        const result = Reflect.deleteProperty(target, key)

        this.notify(key as string, undefined, prevValue)

        return result
      }
    })
  }

  private notify(key: string, value: any, prevValue: any): void {
    // 通知特定 key 的订阅者
    this.subscribers.get(key)?.forEach((fn) => fn(value, key, prevValue))
    // 通知全局订阅者
    this.globalSubscribers.forEach((fn) => fn(value, key, prevValue))
  }

  /**
   * 订阅特定 key 的变化
   */
  subscribe(key: string, subscriber: ProxyStoreSubscriber): () => void {
    if (!this.subscribers.has(key)) {
      this.subscribers.set(key, new Set())
    }
    this.subscribers.get(key)!.add(subscriber)

    // 如果已有值,立即触发
    if (key in this.target) {
      subscriber((this.target as any)[key], key, undefined)
    }

    return () => this.unsubscribe(key, subscriber)
  }

  /**
   * 取消订阅
   */
  unsubscribe(key: string, subscriber: ProxyStoreSubscriber): void {
    this.subscribers.get(key)?.delete(subscriber)
  }

  /**
   * 订阅所有变化
   */
  subscribeAll(subscriber: ProxyStoreSubscriber): () => void {
    this.globalSubscribers.add(subscriber)
    return () => this.globalSubscribers.delete(subscriber)
  }

  /**
   * 获取当前状态快照
   */
  getSnapshot(): T {
    return { ...this.target }
  }

  /**
   * 批量更新(合并触发)
   */
  batch(updates: Partial<T>): void {
    Object.assign(this.proxy, updates)
  }

  /**
   * 重置状态
   */
  reset(newState: T = {} as T): void {
    // 删除所有现有 key
    Object.keys(this.target).forEach((key) => {
      delete (this.proxy as any)[key]
    })
    // 设置新状态
    Object.assign(this.proxy, newState)
  }
}

/**
 * 创建类型安全的 ProxyStore
 */
export function createProxyStore<T extends object>(
  initialState?: T
): ProxyStore<T> {
  return new ProxyStore<T>(initialState)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { ProxyStore } from './ProxyStore'
1
上次更新:
(adsbygoogle = window.adsbygoogle || []).push({});