jQuery 函数来计算两个 JavaScript 对象之间的差异 [英] jQuery function to compute the difference between two JavaScript objects

问题描述

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

I have a rich AJAX-based web application that uses JQuery + Knockout. I have a JQuery plugin that wraps my Knockout view models to expose utility methods like .reset(), .isDirty(), and so on.

我有一个名为 .setBaseline() 的方法，它在填充数据模型后(通过映射插件)获取数据模型的快照.然后我可以使用这个快照来快速确定模型是否发生了变化.

I have a method called .setBaseline() that essentially takes a snapshot of the data model once it has been populated (via the mapping plugin). Then I can use this snapshot to quickly determine if the model has changed.

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

What I'm looking for is some kind of general purpose function that can return an object that represents the differences between two 2 JavaScript objects where one of the objects is considered to be the master.

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

For example, assume that this is my snapshot:

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

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

Then assume that the live data looks like this:

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

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

I want a .getChanges(snapShot, liveData) utility function that returns the following:

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

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

I was hoping that the _.underscore library might have something like this, but I couldn't find anything that seemed to work like this.

推荐答案

我觉得下划线没有这样的功能，但是自己实现很容易:

I don't think there is such a function in underscore, but it's easy to implement yourself:

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
}

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

This will not work with Arrays (or any other non-plain-Objects) or differently structured objects (removals, primitive to object type changes).

这篇关于jQuery 函数来计算两个 JavaScript 对象之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！