javascript - 用于计算两个 JavaScript 对象之间差异的 jQuery 函数

Question

我有一个基于 AJAX 的丰富网络应用程序，它使用 JQuery + Knockout。我有一个 JQuery 插件，它包装了我的 Knockout View 模型以公开诸如 .reset()、.isDirty() 等实用方法。

我有一个名为 .setBaseline() 的方法，它在填充数据模型后(通过映射插件)获取数据模型的快照。然后我可以使用此快照快速确定模型是否已更改。

我正在寻找的是某种通用函数，它可以返回一个对象，该对象表示两个 2 JavaScript 对象之间的差异，其中一个对象是被认为是主人。

例如，假设这是我的快照:

var snapShot = {
  name: "Joe",
  address: "123 Main Street",
  age: 30,
  favoriteColorPriority: {
     yellow: 1,
     pink: 2,
     blue: 3
  }
};

然后假设实时数据如下所示:

var liveData = {
    name: "Joseph",
    address: "123 Main Street",
    age: 30,
    favoriteColorPriority: {
        yellow: 1,
        pink: 3,
        blue: 2
    }
};

我想要一个返回以下内容的 .getChanges(snapShot, liveData) 实用函数:

var differences = {
    name: "Joseph",
    favoriteColorPriority: {
        pink: 3,
        blue: 2
    }
};

我希望_.underscore 库 可能有这样的东西，但我找不到任何看起来像这样工作的东西。

Answer 1

我觉得underscore里面没有这个功能，但是自己实现起来很容易:

function getChanges(prev, now) {
    var changes = {};
    for (var prop in now) {
        if (!prev || prev[prop] !== now[prop]) {
            if (typeof now[prop] == "object") {
                var c = getChanges(prev[prop], now[prop]);
                if (! _.isEmpty(c) ) // underscore
                    changes[prop] = c;
            } else {
                changes[prop] = now[prop];
            }
        }
    }
    return changes;
}

或

function getChanges(prev, now) {
    var changes = {}, prop, pc;
    for (prop in now) {
        if (!prev || prev[prop] !== now[prop]) {
            if (typeof now[prop] == "object") {
                if(c = getChanges(prev[prop], now[prop]))
                    changes[prop] = c;
            } else {
                changes[prop] = now[prop];
            }
        }
    }
    for (prop in changes)
        return changes;
    return false; // false when unchanged
}

这不适用于数组(或任何其他非普通对象)或不同结构的对象(删除，原始对象类型更改)。