diff --git a/src/core/state/impl/ObservableImpl.ts b/src/core/state/impl/ObservableImpl.ts index c063e42..1728b34 100644 --- a/src/core/state/impl/ObservableImpl.ts +++ b/src/core/state/impl/ObservableImpl.ts @@ -10,68 +10,69 @@ import type { * 创建一个可观察对象,用于管理状态和事件。 * @template T - 需要处理的状态类型 * @example + * interface Todo { + * id: number + * text: string + * done: boolean + * } + * * interface AppState { * count: number + * todos: Todo[] * user: { * name: string * age: number * } - * items: number[] + * inc(): void * } * - * // 创建 ObservableImpl * const obs = new ObservableImpl({ * count: 0, - * user: { name: 'Alice', age: 20 }, - * items: [] + * todos: [], + * user: { name: "Alice", age: 20 }, + * inc() { + * this.count++ // ✅ this 指向 obs.state + * }, * }) * - * // 1️⃣ 全量订阅 - * const unsubscribeAll = obs.subscribe(state => { - * console.log('全量订阅', state) - * }, { immediate: true }) + * // ================== 使用示例 ================== * - * // 2️⃣ 单字段订阅 - * const unsubscribeCount = obs.subscribeKey('count', ({ count }) => { - * console.log('count 字段变化:', count) + * // 1. 订阅整个 state + * obs.subscribe(state => { + * console.log("[全量订阅] state 更新:", state) * }) * - * // 3️⃣ 多字段订阅 - * const unsubscribeUser = obs.subscribeKey(['user', 'count'], ({ user, count }) => { - * console.log('user 或 count 变化:', { user, count }) + * // 2. 订阅单个字段 + * obs.subscribeKey("count", ({ count }) => { + * console.log("[字段订阅] count 更新:", count) * }) * - * // 4️⃣ 修改属性 - * obs.state.count = 1 // ✅ 会触发 count 和全量订阅 - * obs.state.user.age = 21 // ✅ 深层对象修改触发 user 订阅 - * obs.state.user.name = 'Bob' - * // 语法糖:解构赋值直接赋值触发通知 - * const { count, user, items } = obs.toRefsProxy() - * count = 1 // 触发 Proxy set - * user.age = 18 // 深层对象 Proxy 支持 - * items.push(42) // 数组方法拦截触发通知 - * - * // 5️⃣ 数组方法触发 - * obs.state.items.push(10) // ✅ push 会触发 items 的字段订阅 - * obs.state.items.splice(0, 1) - * - * // 6️⃣ 批量修改(同一事件循环只触发一次通知) - * obs.patch({ - * count: 2, - * user: { name: 'Charlie', age: 30 } + * // 3. 订阅多个字段 + * obs.subscribeKey(["name", "age"] as (keyof AppState["user"])[], (user) => { + * console.log("[多字段订阅] user 更新:", user) * }) * - * // 7️⃣ 解构赋值访问对象属性仍然触发订阅 - * const { state } = obs - * state.user.age = 31 // ✅ 会触发 user 订阅 + * // 4. 批量更新 + * obs.patch({ count: 10, user: { name: "Bob", age: 30 } }) * - * // 8️⃣ 取消订阅 - * unsubscribeAll() - * unsubscribeCount() - * unsubscribeUser() + * // 5. 方法里操作 state + * obs.state.inc() // this.count++ → 相当于 obs.state.count++ * - * // 9️⃣ 销毁 ObservableImpl - * obs.dispose() + * // 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 */ @@ -81,7 +82,7 @@ export class ObservableImpl> implements IObs private listeners: Set> = new Set() /** 字段订阅函数集合 */ - private keyListeners: Map> = new Map() + private keyListeners: Map>> = new Map() /** 待通知的字段集合 */ private pendingKeys: Set = new Set() @@ -92,56 +93,73 @@ export class ObservableImpl> implements IObs /** 是否已销毁 */ private disposed = false + /** 缓存 Proxy,避免重复包装 */ + private proxyCache: WeakMap> = new WeakMap() + constructor(initialState: TNonFunctionProperties) { // 创建深层响应式 Proxy this.state = this.makeReactive(initialState) as TObservableState } - /** 创建深层 Proxy,拦截 get/set */ - private makeReactive(obj: TNonFunctionProperties): TObservableState { - const handler: ProxyHandler = { - get: (target, prop: string | symbol, receiver) => { - const key = prop as keyof T - const value = Reflect.get(target, key, receiver) - if (Array.isArray(value)) return this.wrapArray(value, key) - if (typeof value === 'object' && value !== null) return this.makeReactive(value) + /** 创建深层 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: string | symbol, value, receiver) => { - const key = prop as keyof T - const oldValue = target[key] - if (oldValue !== value) { - target[key] = value - this.pendingKeys.add(key) + + 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 true + 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 } } - return new Proxy(obj, handler) as TObservableState + + const proxy = new Proxy(obj, handler) as TObservableState + this.proxyCache.set(obj as object, proxy as TObservableState) + return proxy } - /** 包装数组方法,使 push/pop 等触发通知 */ - private wrapArray(arr: any[], parentKey: keyof T): any { - const self = this - const arrayMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'] as const - arrayMethods.forEach(method => { - const original = arr[method] - Object.defineProperty(arr, method, { - value: function (...args: any[]) { - const result = original.apply(this, args) - self.pendingKeys.add(parentKey) - self.scheduleNotify() - return result - }, - writable: true, - configurable: true, - }) - }) - return arr - } - - /** 安排下一次通知 */ + /** 安排下一次通知(微任务合并) */ private scheduleNotify(): void { if (!this.notifyScheduled && !this.disposed) { this.notifyScheduled = true @@ -149,40 +167,70 @@ export class ObservableImpl> implements IObs } } - /** 执行通知 */ + /** 执行通知(聚合字段订阅并保证错误隔离) */ private flushNotify(): void { if (this.disposed) return + const keys = Array.from(this.pendingKeys) this.pendingKeys.clear() this.notifyScheduled = false - // 全量订阅 - for (const fn of this.listeners) { - fn(this.state) - } - - // 字段订阅 - const fnMap = new Map() - for (const key of keys) { - const set = this.keyListeners.get(key) - if (!set) continue - for (const fn of set) { - if (!fnMap.has(fn)) fnMap.set(fn, []) - fnMap.get(fn)!.push(key) + // 全量订阅 —— 每个订阅单独 try/catch,避免一个错误阻塞其它订阅 + for (const fn of Array.from(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, (keyof T)[]> = new Map() + for (const key of keys) { + const set = this.keyListeners.get(key) + if (!set) continue + for (const fn of Array.from(set)) { + const existing = fnMap.get(fn) + if (existing === undefined) { + fnMap.set(fn, [key]) + } else { + existing.push(key) + } + } + } + + // 调用每个字段订阅回调 fnMap.forEach((subKeys, fn) => { - const result = {} as Pick - subKeys.forEach(k => (result[k] = this.state[k])) - fn(result) + 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 unknown as any) // 最后一处转换仅为满足 TypeScript 调用签名(不引入 any 到实现变量) + } 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) fn(this.state) + 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) } @@ -197,32 +245,48 @@ export class ObservableImpl> implements IObs const keyArray = Array.isArray(keys) ? keys : [keys] for (const key of keyArray) { if (!this.keyListeners.has(key)) this.keyListeners.set(key, new Set()) - this.keyListeners.get(key)!.add(fn) + // 存储为 Set> + this.keyListeners.get(key)!.add(fn as TObservableKeyListener) } if (options.immediate) { const result = {} as Pick - keyArray.forEach(k => (result[k] = this.state[k])) - fn(result) + 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) + 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 - this.state[typedKey] = values[typedKey]! - this.pendingKeys.add(typedKey) + 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 + } } } - this.scheduleNotify() + // 如果至少有一处变化,安排一次通知(如果写入已由 set 调度过也不会重复安排) + if (changed) this.scheduleNotify() } /** 销毁 Observable 实例 */ @@ -231,27 +295,29 @@ export class ObservableImpl> implements IObs this.listeners.clear() this.keyListeners.clear() this.pendingKeys.clear() + this.proxyCache = new WeakMap() } /** 语法糖:返回一个可解构赋值的 Proxy */ public toRefsProxy(): { [K in keyof T]: T[K] } { const self = this - return new Proxy({} as T, { + return new Proxy({} as { [K in keyof T]: T[K] }, { get(_, prop: string | symbol) { const key = prop as keyof T - return self.state[key] + return (self.state as Record)[key] as T[typeof key] }, set(_, prop: string | symbol, value) { const key = prop as keyof T - self.state[key] = value + ;(self.state as Record)[key] = value as unknown return true }, ownKeys() { return Reflect.ownKeys(self.state) }, - getOwnPropertyDescriptor(_, prop: string | symbol) { + getOwnPropertyDescriptor(_, _prop: string | symbol) { return { enumerable: true, configurable: true } } }) } } +