import type { IObservable, TNonFunctionProperties, TObservableKeyListener, TObservableListener, TObservableState, } from '@/core/state/IObservable.ts' /** * 创建一个可观察对象,用于管理状态和事件。 * @template T - 需要处理的状态类型 * @example * interface Todos { * id: number * text: string * done: boolean * } * * interface AppState { * count: number * todos: Todos[] * user: { * name: string * age: number * } * inc(): void * } * * const obs = new ObservableImpl({ * count: 0, * todos: [], * user: { name: "Alice", age: 20 }, * inc() { * this.count++ // ✅ this 指向 obs.state * }, * }) * * // ================== 使用示例 ================== * * // 1. 订阅整个 state * obs.subscribe(state => { * console.log("[全量订阅] state 更新:", state) * }) * * // 2. 订阅单个字段 * obs.subscribeKey("count", ({ count }) => { * console.log("[字段订阅] count 更新:", count) * }) * * // 3. 订阅多个字段 * obs.subscribeKey(["name", "age"] as (keyof AppState["user"])[], (user) => { * console.log("[多字段订阅] user 更新:", user) * }) * * // 4. 批量更新 * obs.patch({ count: 10, user: { name: "Bob", age: 30 } }) * * // 5. 方法里操作 state * obs.state.inc() // this.count++ → 相当于 obs.state.count++ * * // 6. 数组操作 * obs.subscribeKey("todos", ({ todos }) => { * console.log("[数组订阅] todos 更新:", todos.map(t => t.text)) * }) * * obs.state.todos.push({ id: 1, text: "Buy milk", done: false }) * obs.state.todos.push({ id: 2, text: "Read book", done: false }) * obs.state.todos[0].done = true * * // 7. 嵌套对象 * obs.subscribeKey("user", ({ user }) => { * console.log("[嵌套订阅] user 更新:", user) * }) * * obs.state.user.age++ */ export class ObservableImpl> implements IObservable { /** Observable 状态对象,深层 Proxy */ public readonly state: TObservableState /** 全量订阅函数集合 */ private listeners: Set> = new Set() /** 字段订阅函数集合 */ private keyListeners: Map>> = new Map() /** 待通知的字段集合 */ private pendingKeys: Set = new Set() /** 是否已经安排通知 */ private notifyScheduled = false /** 是否已销毁 */ private disposed = false /** 缓存 Proxy,避免重复包装 */ private proxyCache: WeakMap> = new WeakMap() constructor(initialState: TNonFunctionProperties) { // 创建深层响应式 Proxy this.state = this.makeReactive(initialState) as TObservableState } /** 创建深层 Proxy,拦截 get/set/delete,并自动缓存 */ private makeReactive(obj: O): TObservableState { // 非对象直接返回(包括 null 已被排除) if (typeof obj !== "object" || obj === null) { return obj as unknown as TObservableState } // 如果已有 Proxy 缓存则直接返回 const cached = this.proxyCache.get(obj as object) if (cached !== undefined) { return cached as TObservableState } const handler: ProxyHandler = { get: (target, prop, receiver) => { const value = Reflect.get(target, prop, receiver) as unknown // 不包装函数 if (typeof value === "function") { return value } // 对对象/数组继续进行响应式包装(递归) if (typeof value === "object" && value !== null) { return this.makeReactive(value as object) } return value }, set: (target, prop, value, receiver) => { // 读取旧值(使用 Record 以便类型安全访问属性) const oldValue = (target as Record)[prop as PropertyKey] as unknown const result = Reflect.set(target, prop, value as unknown, receiver) // 仅在值改变时触发通知(基于引用/原始值比较) if (!this.disposed && oldValue !== (value as unknown)) { this.pendingKeys.add(prop as keyof T) this.scheduleNotify() } return result }, deleteProperty: (target, prop) => { if (prop in target) { // 使用 Reflect.deleteProperty 以保持一致性 const deleted = Reflect.deleteProperty(target, prop) if (deleted && !this.disposed) { this.pendingKeys.add(prop as keyof T) this.scheduleNotify() } return deleted } return false } } const proxy = new Proxy(obj, handler) as TObservableState this.proxyCache.set(obj as object, proxy as TObservableState) return proxy } /** 安排下一次通知(微任务合并) */ private scheduleNotify(): void { if (!this.notifyScheduled && !this.disposed) { this.notifyScheduled = true Promise.resolve().then(() => this.flushNotify()) } } /** 执行通知(聚合字段订阅并保证错误隔离) */ private flushNotify(): void { if (this.disposed) return const keys = Array.from(this.pendingKeys) this.pendingKeys.clear() this.notifyScheduled = false // 全量订阅 —— 每个订阅单独 try/catch,避免一个错误阻塞其它订阅 for (const fn of this.listeners) { try { fn(this.state as unknown as T) } catch (err) { // 可以根据需要把错误上报或自定义处理 // 这里简单打印以便调试 // eslint-disable-next-line no-console console.error("Observable listener error:", err) } } // 字段订阅:把同一个回调的多个 key 聚合到一次调用里 const fnMap: Map, Array> = new Map() for (const key of keys) { const set = this.keyListeners.get(key) if (!set) continue for (const fn of set) { const existing = fnMap.get(fn) if (existing === undefined) { fnMap.set(fn, [key]) } else { existing.push(key) } } } // 调用每个字段订阅回调 fnMap.forEach((subKeys, fn) => { try { // 构造 Pick 风格的结果对象:结果类型为 Pick const result = {} as Pick subKeys.forEach(k => { // 这里断言原因:state 的索引访问返回 unknown,但我们把它赋回到受限的 Pick 上 result[k] = (this.state as Record)[k] as T[(typeof k) & keyof T] }) // 调用时类型上兼容 TObservableKeyListener,因为我们传的是对应 key 的 Pick fn(result as Pick) } catch (err) { // eslint-disable-next-line no-console console.error("Observable keyListener error:", err) } }) } /** 订阅整个状态变化 */ public subscribe(fn: TObservableListener, options: { immediate?: boolean } = {}): () => void { this.listeners.add(fn) if (options.immediate) { try { fn(this.state as unknown as T) } catch (err) { // eslint-disable-next-line no-console console.error("Observable subscribe immediate error:", err) } } return () => { this.listeners.delete(fn) } } /** 订阅指定字段变化 */ public subscribeKey( keys: K | K[], fn: TObservableKeyListener, options: { immediate?: boolean } = {} ): () => void { const keyArray = Array.isArray(keys) ? keys : [keys] for (const key of keyArray) { if (!this.keyListeners.has(key)) this.keyListeners.set(key, new Set()) // 存储为 Set> this.keyListeners.get(key)!.add(fn as TObservableKeyListener) } if (options.immediate) { const result = {} as Pick keyArray.forEach(k => { result[k] = (this.state as Record)[k] as T[K] }) try { fn(result) } catch (err) { // eslint-disable-next-line no-console console.error("Observable subscribeKey immediate error:", err) } } return () => { for (const key of keyArray) { this.keyListeners.get(key)?.delete(fn as TObservableKeyListener) } } } /** 批量更新状态(避免重复 schedule) */ public patch(values: Partial): void { let changed = false // 用 for..in 保持和对象字面量兼容(跳过原型链) for (const key in values) { if (Object.prototype.hasOwnProperty.call(values, key)) { const typedKey = key as keyof T const oldValue = (this.state as Record)[typedKey] const newValue = values[typedKey] as unknown if (oldValue !== newValue) { // 直接写入 state,会被 Proxy 的 set 捕获并安排通知 ;(this.state as Record)[typedKey] = newValue changed = true } } } // 如果至少有一处变化,安排一次通知(如果写入已由 set 调度过也不会重复安排) if (changed) this.scheduleNotify() } /** 销毁 Observable 实例 */ public dispose(): void { this.disposed = true this.listeners.clear() this.keyListeners.clear() this.pendingKeys.clear() this.proxyCache = new WeakMap() Object.freeze(this.state) } /** 语法糖:返回一个可解构赋值的 Proxy */ public toRefsProxy(): { [K in keyof T]: T[K] } { const self = this return new Proxy({} as { [K in keyof T]: T[K] }, { get(_, prop: string | symbol) { const key = prop as keyof T return (self.state as Record)[key] as T[typeof key] }, set(_, prop: string | symbol, value) { const key = prop as keyof T ;(self.state as Record)[key] = value as unknown return true }, ownKeys() { return Reflect.ownKeys(self.state) }, getOwnPropertyDescriptor(_, _prop: string | symbol) { return { enumerable: true, configurable: true } } }) } }