MobX跨窗口(iframe)使用Observable Map/Set的解决方案

在Web开发中，我们经常需要在主窗口和iframe之间共享状态数据。当使用MobX进行状态管理时，开发者可能会遇到一个特殊问题：无法在不同窗口(也称为"realm")之间初始化observable的Map和Set集合。本文将深入分析这个问题产生的原因，并提供完整的解决方案。

问题现象

当尝试在主窗口和iframe之间共享MobX状态时，如果使用observable的Map或Set集合，会遇到以下错误：

Uncaught Error: [MobX] Cannot initialize set from [object Set]

这个问题特别容易出现在以下场景：

1. 主窗口通过window.mobx = mobx将MobX实例共享给iframe
2. iframe中尝试使用主窗口传递的MobX实例创建observable集合
3. 初始化时传入来自不同窗口的普通Set或Map实例

根本原因分析

这个问题的根源在于JavaScript的跨窗口对象识别机制。MobX内部使用instanceof操作符来检查对象是否为Map或Set实例，这在跨窗口场景下会失效。

具体来说，MobX源码中有以下检查逻辑：

export function isES6Map(thing: any): boolean {
    return thing instanceof Map
}

在同一个窗口内，instanceof能正确识别Map/Set实例。但在跨窗口场景下，由于每个窗口都有自己独立的全局对象和构造函数，instanceof检查会返回false，导致初始化失败。

解决方案

方案一：使用Symbol.toStringTag检查

更可靠的跨窗口类型检查方法是使用对象的Symbol.toStringTag属性：

export function isES6Map(thing: any): thing is Map<any, any> {
    return thing != null && thing[Symbol.toStringTag] == "Map";
}

export function isES6Set(thing: any): thing is Set<any> {
    return thing != null && thing[Symbol.toStringTag] == "Set";
}

方案二：使用Object.prototype.toString

对于需要支持较老浏览器的场景，可以使用Object.prototype.toString方法：

export function isES6Map(thing: any): boolean {
    return Object.prototype.toString.call(thing) === "[object Map]";
}

方案三：修改observable集合初始化逻辑

对于observable集合的初始化，可以放宽构造函数检查：

} else if (isES6Map(other)) {
    if (other.constructor.name !== "Map") {
        die(19, other)
    }
    other.forEach((value, key) => this.set(key, value))

实际应用建议

1. 版本升级：建议升级到已修复此问题的MobX版本

2. 临时解决方案：如果无法立即升级，可以创建自定义的observable集合工厂函数：

function createCrossRealmObservableMap(initialData) {
    const map = new Map(initialData);
    return observable(map);
}

3. 序列化方案：对于复杂场景，考虑使用JSON序列化/反序列化在不同窗口间传递数据

总结

跨窗口状态管理是现代Web应用中的常见需求。通过理解JavaScript的realm机制和MobX的内部实现原理，我们可以有效解决observable集合在跨窗口场景下的初始化问题。本文提供的解决方案不仅适用于Map/Set集合，其原理也可应用于其他需要跨窗口类型检查的场景。