如何使用RxJS简化变更emit操作，消除手动调用next的冗余代码？

方案1：封装修改方法（低侵入易维护） #

把texts改为私有变量，仅通过类内部封装的方法进行修改，所有变更通知逻辑统一收口，完全避免遗漏调用next的问题。

// 私有变量存储原始数据，禁止外部直接修改
private _texts: TextCollection = <TextCollection>{};
public textPropertiesChanges$ = new ReplaySubject<TextCollection>(1);

// 对外仅暴露只读属性，避免外部直接写入
get texts(): Readonly<TextCollection> {
  return this._texts;
}

// 封装属性更新方法
updateTextProp<K extends keyof TextCollection>(key: K, value: TextCollection[K]): void {
  this._texts[key] = value;
  this.emitChange();
}

// 封装元素新增方法，可根据实际业务扩展更多操作方法
addTextItem(item: TextItem): void {
  // 示例为数组新增，可根据你的TextCollection结构调整逻辑
  this._texts.items.push(item);
  this.emitChange();
}

// 统一收口变更通知逻辑
private emitChange(): void {
  // 按需添加深拷贝，避免外部修改影响流内数据
  this.textPropertiesChanges$.next(structuredClone(this._texts));
}

该方案逻辑透明、调试成本低，适合修改操作可枚举、业务逻辑复杂的场景。

方案2：Proxy代理拦截（无感知适配现有代码） #

如果不想改动现有大量修改texts的业务代码，可以用Proxy代理整个texts对象，自动拦截所有写入操作触发变更通知。

public textPropertiesChanges$ = new ReplaySubject<TextCollection>(1);
private _textsRaw: TextCollection = <TextCollection>{};

// 代理配置，拦截所有读写操作
const proxyHandler: ProxyHandler<TextCollection> = {
  set: (target, prop, value) => {
    const writeSuccess = Reflect.set(target, prop, value);
    if (writeSuccess) {
      this.textPropertiesChanges$.next(structuredClone(target));
    }
    return writeSuccess;
  },
  get: (target, prop) => {
    const value = Reflect.get(target, prop);
    // 嵌套对象/数组递归代理，保证深层修改也能被拦截
    if (typeof value === 'object' && value !== null) {
      return new Proxy(value, proxyHandler);
    }
    return value;
  }
};

// 对外暴露代理后的对象，原有修改代码无需调整
public texts: TextCollection = new Proxy(this._textsRaw, proxyHandler);

该方案几乎不需要改动现有业务代码，适配成本极低，缺点是深层嵌套场景会有小幅性能损耗，调试时代理栈会增加排查复杂度。

方案3：直接用响应式变量存储 #

如果你的项目本身基于RxJS体系，可以直接把texts存入Subject，所有修改直接提交新值，不需要单独维护变更流：

// 直接用ReplaySubject存储数据本身
private _texts$ = new ReplaySubject<TextCollection>(1);
// 对外暴露的变更流直接复用该Subject
public textPropertiesChanges$ = this._texts$.asObservable();

// 修改时直接提交新值
updateTextContent(): void {
  // 基于旧值生成新值，避免直接修改原对象
  const latestTexts = this._texts$.value;
  const newTexts = { ...latestTexts, customProp: 'new value' };
  this._texts$.next(newTexts);
}

如果是Angular 16+的项目，也可以直接用Signal存储texts，天生支持响应式监听，不需要自己维护Subject。

内容的提问来源于stack exchange，提问作者user15423370