javascript - 处理对象属性之间的复杂依赖关系(自动更新依赖属性)

Question

我有一个对象的树结构，它们的属性对周围的对象有非常复杂的依赖性，这取决于它们在树中的位置。我已经对很多这些依赖项进行了硬编码，并尝试创建某种更新循环(如果根据设计更新属性，则所有依赖于它的属性都会更新，并且顺序正确)，但我想以更通用/抽象的方式处理它，而不是硬编码一堆对不同对象的更新调用。

比方说，我有 1 个父类(super class)和 3 个子类，然后是一个单独的容器对象。

形状
属性: parentContainer, index, left, top, width, height
方法:updateLeft()、updateTop()、updateWidth()、updateHeight()

Square继承自Shape
Triangle 继承自 Shape
Circle继承自Shape

形状容器
属性:形状
方法:addShape(shape, index), removeShape(index)

我将给出一个伪代码示例更新方法来说明这些依赖项是如何出现的:

Square.updateTop() {
    var prevShape = null;
    if (this.index != 0) {
        prevShape = this.parentContainer.shapes[this.index - 1];
    }
    var nextSquareInContainer = null;
    for (var i = this.index; i < this.parentContainer.shapes.length; i++) {
        var shape = this.parentContainer.shapes[i];
        if(shape instanceof Square) {
            nextSquareInContainer = shape;
            break;
        }
    }
    var top = 0;
    if (prevShape != null && nextSquareInContainer != null) {
        top = prevShape.top + nextSquareInContainer.width;
    } else {
        top = 22;
    }
    this.top = top;
}  

因此，添加到 shapeConatiner 的任何正方形对象都将取决于前一个形状的 top 值和在容器的宽度值中找到的下一个正方形的 top 值。

下面是一些设置示例形状容器的代码:

var shapeContainer = new ShapeContainer();
var triangle = new Triangle();
var circle = new Circle();
var square1 = new Square();
var square2 = new Square();
shapeContainer.addShape(triangle, 0);
shapeContainer.addShape(circle, 1);
shapeContainer.addShape(square1, 2);
shapeContainer.addShape(square2, 3);

所以，我想问题的症结在于，如果我更新上面圆的最高值，我希望 square1 的最高值自动更新(因为 square1 的最高值和圆的最高值之​​间存在单向依赖值(value))。所以我可以这样做的一种方法(我一直在做的方式，结合我的问题领域的一些其他特定知识来简化调用)，是将类似于以下的代码添加到 Circle 的 updateTop 方法(真的必须添加到每个形状的 updateTop 方法中):

Circle.updateTop() {
    // Code to actually calculate and update Circle's top value, note this
    // may depend on its own set of dependencies
    var nextShape = this.parentContainer.shapes[this.index + 1];
    if (nextShape instanceof Square) {
        nextShape.updateTop();
    }
}

这种类型的设计适用于对象之间的一些简单依赖关系，但我的项目有几十种类型的对象，它们的属性之间可能有数百种依赖关系。我已经用这种方式编写了代码，但是在尝试添加新功能或解决错误时很难推理。

是否有某种设计模式可以设置对象属性之间的依赖关系，然后当更新一个属性时，它会更新依赖于它的其他对象的所有属性(这可能会触发进一步更新属性这取决于现在新更新的属性)？用于指定这些依赖项的某种声明性语法可能最适合可读性/可维护性。

另一个问题是，一个属性可能有多个依赖项，在我希望该属性更新自身之前必须更新所有依赖项。

我一直在研究发布/订阅类型的解决方案，但我认为这是一个足够复杂的问题，需要寻求帮助。作为旁注，我正在使用 javascript。

Answer 1

这是我想出的骇人听闻的解决方案。我创建了一个包装类，你为 getter/setter/updaters 传入匿名函数。然后调用 prop1.dependsOn(prop2) 以声明方式设置依赖项。它涉及建立对象属性之间依赖关系的有向无环图，然后在更新属性值时，使用拓扑排序显式调用以解决相关依赖关系。我没有过多考虑效率，我敢打赌有人会想出一个更强大/更高效的解决方案，但我认为现在就可以了。很抱歉代码转储，但我认为这可能对试图解决类似问题的人有所帮助。如果有人想让它在语法上更简洁，欢迎光临。

// This is a class that will act as a wrapper for all properties 
// that we want to tie to our dependency graph.
function Property(initialValue, ctx) {
    // Each property will get a unique id.
    this.id = (++Property.id).toString();
    this.value = initialValue;
    this.isUpdated = false;
    this.context = ctx;
    Property.dependsOn[this.id] = [];
    Property.isDependedOnBy[this.id] = [];
    Property.idMapping[this.id] = this;
}
// Static properties on Property function.
Property.id = 0;
Property.dependsOn = {};
Property.isDependedOnBy = {};
Property.idMapping = {};

// Calling this updates all dependencies from the node outward.
Property.resolveDependencies = function (node) {
    node = node.id;
    var visible = [];
    // Using Depth First Search to mark visibility (only want to update dependencies that are visible).
    var depthFirst = function (node) {
        visible.push(node);
        for (var i = 0; i < Property.isDependedOnBy[node].length; i++) {
            depthFirst(Property.isDependedOnBy[node][i]);
        }
    };
    depthFirst(node);
    // Topological sort to make sure updates are done in the correct order.
    var generateOrder = function (inbound) {
        var noIncomingEdges = [];
        for (var key in inbound) {
            if (inbound.hasOwnProperty(key)) {
                if (inbound[key].length === 0) {
                    // Only call update if visible.
                    if (_.indexOf(visible, key) !== -1) {
                        Property.idMapping[key].computeValue();
                    }
                    noIncomingEdges.push(key);
                    delete inbound[key];
                }
            }
        }

        for (var key in inbound) {
            if (inbound.hasOwnProperty(key)) {
                for (var i = 0; i < noIncomingEdges.length; i++) {
                    inbound[key] = _.without(inbound[key], noIncomingEdges[i]);
                }
            }
        }

        // Check if the object has anymore nodes.
        for (var prop in inbound) {
            if (Object.prototype.hasOwnProperty.call(inbound, prop)) {
                generateOrder(inbound);
            }
        }

    };
    generateOrder(_.clone(Property.dependsOn));
};
Property.prototype.get = function () {
    return this.value;
}
Property.prototype.set = function (value) {
    this.value = value;
}
Property.prototype.computeValue = function () {
    // Call code that updates this.value.
};
Property.prototype.dependsOn = function (prop) {
    Property.dependsOn[this.id].push(prop.id);
    Property.isDependedOnBy[prop.id].push(this.id);
}

function PropertyFactory(methodObject) {
    var self = this;
    var PropType = function (initialValue) {
        Property.call(this, initialValue, self);
    }
    PropType.prototype = Object.create(Property.prototype);
    PropType.prototype.constructor = PropType;
    if (methodObject.get !== null) {
        PropType.prototype.get = methodObject.get;
    }
    if (methodObject.set !== null) {
        PropType.prototype.set = methodObject.set;
    }
    if (methodObject.computeValue !== null) {
        PropType.prototype.computeValue = methodObject.computeValue;
    }

    return new PropType(methodObject.initialValue);
}

下面是设置属性的示例:

function MyClassContainer() {
    this.children = [];
    this.prop = PropertyFactory.call(this, {
        initialValue: 0,
        get: null,
        set: null,
        computeValue: function () {
            var self = this.context;
            var updatedVal = self.children[0].prop.get() + self.children[1].prop.get();
            this.set(updatedVal);
        }
    });
}
MyClassContainer.prototype.addChildren = function (child) {
    if (this.children.length === 0 || this.children.length === 1) {
        // Here is the key line.  This line is setting up the dependency between
        // object properties.
        this.prop.dependsOn(child.prop);
    }
    this.children.push(child);
}

function MyClass() {
    this.prop = PropertyFactory.call(this, {
        initialValue: 5,
        get: null,
        set: null,
        computeValue: null
    });
}

var c = new MyClassContainer();
var c1 = new MyClass();
var c2 = new MyClass();
c.addChildren(c1);
c.addChildren(c2);

这里是一个在所有这些基础设施设置完成后实际更新属性的示例:

c1.prop.set(3);
Property.resolveDependencies(c1.prop);

我觉得对于需要非常复杂的依赖关系的程序来说，这是一个非常强大的模式。 Knockout JS 有一些类似的东西，使用 computedObservables(并且它们以类似的方式使用包装器)，但据我所知，你只能将计算属性绑定(bind)到同一对象上的其他属性。上述模式允许您任意将对象属性关联为依赖项。