跨浏览器序列化 JavaScript 对象（含函数成员）：终极指南

2024-03-15 03:52:42

跨浏览器序列化 JavaScript 对象（包括函数成员）

导言

在跨浏览器开发中，需要在不同浏览环境中共享和存储数据。JavaScript 对象是存储复杂数据的理想方式，但其序列化可能会因浏览器而异，特别是对于包含函数类型的成员的对象。本文提供了一种创新的方法，可以在不同浏览器中序列化和反序列化 JavaScript 对象，包括函数类型的成员。

JSON.stringify() 的局限

JSON.stringify() 是一个广泛使用的 JavaScript 对象序列化方法。它将对象转换为 JSON 字符串，以便可以轻松地在网络上传输或存储在本地存储中。然而，JSON.stringify() 存在一个缺点：它会忽略函数类型的成员。这意味着如果对象包含一个函数，该函数在序列化后将丢失。

toSource() 方法的局限

toSource() 方法是一种备选的 JavaScript 对象序列化方法。它将对象转换为包含对象源代码的字符串。与 JSON.stringify() 不同，toSource() 可以序列化函数。然而，toSource() 仅适用于 Firefox 浏览器，这意味着它不适用于跨浏览器的解决方案。

环形引用序列化技术

为了克服这些局限性，本文提出了一种称为环形引用序列化的技术。这种技术使用一个额外的对象来跟踪已序列化的对象，以避免无限循环。它涉及使用两个函数：

序列化函数： 替换对象中的函数，并将其名称存储在跟踪对象中。
反序列化函数： 使用存储的函数名称创建函数占位符，然后用实际函数替换这些占位符。

实施

以下代码展示了序列化和反序列化函数的实现：

// 序列化函数
function serializeObject(obj) {
    const circularRef = {};

    const replaceFunc = (key, value) => {
        if (typeof value === 'function') {
            circularRef[key] = null;
            return value.name;
        }

        return value;
    };

    const serializedObj = JSON.stringify(obj, replaceFunc);

    return serializedObj.replace(/"null":".*?",/g, (match) => {
        const funcName = match.match(/".*?"/)[0].slice(1, -1);
        const funcString = circularRef[funcName].toString();
        return `"${funcName}":${funcString},`;
    });
}

// 反序列化函数
function unserializeObject(serializedObj) {
    const circularRef = {};

    const replaceFunc = (key, value) => {
        if (typeof value === 'string' && value.startsWith('function')) {
            const funcName = value.match(/function\s+(\w+)\(/)[1];
            circularRef[funcName] = null;

            return () => {
                return circularRef[funcName].apply(this, arguments);
            };
        }

        return value;
    };

    const unserializedObj = JSON.parse(serializedObj, replaceFunc);

    for (const key in circularRef) {
        const funcString = circularRef[key].toString();
        const func = new Function(funcString);
        unserializedObj[key] = func;
    }

    return unserializedObj;
}

使用

要序列化对象，请调用 serializeObject(obj)。要反序列化该对象，请调用 unserializeObject(serializedObj)。

示例

const obj = {
    color: 'red',
    doSomething: function (arg) {
        alert('Do someting called with ' + arg);
    }
};

const serializedObj = serializeObject(obj);

// 将 serializedObj 发送到其他浏览器

const unserializedObj = unserializeObject(serializedObj);

unserializedObj.doSomething('world'); // 输出：Do someting called with world

结论

通过环形引用序列化技术，我们克服了跨浏览器序列化 JavaScript 对象的挑战，包括函数类型的成员。这种技术使我们能够在不同的浏览环境中共享和存储复杂数据。

常见问题解答