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

时间:2014-04-12 22:42:30

标签: javascript algorithm oop design-patterns dependencies

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

比方说,我有1个超类,3个子类,然后是一个单独的容器对象。

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

Square继承自Shape
三角形继承自形状
Circle继承自Shape

ShapeContainer
属性:形状
方法:addShape(形状,索引),removeShape(索引)

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

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的任何方形对象都将取决于先前形状的顶部值以及容器宽度值中找到的顶部值的下一个正方形。

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

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的最高值和圆圈顶部之间存在单向依赖关系值)。所以我可以这样做的一种方式(我一直这样做,结合我的问题域的一些其他特定知识来简化调用),是将类似于以下的代码添加到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();
    }
}

这种类型的设计适用于对象之间的一些简单依赖,但我的项目有几十种类型的对象,它们的属性之间可能有数百个依赖项。我用这种方式对它进行了编码,但是在尝试添加新功能或对错误进行故障排除时很难说明。

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

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

我一直在寻找一个pub / sub类型的解决方案,但我认为这是一个足够复杂的问题,可以寻求帮助。作为旁注,我正在使用javascript。

1 个答案:

答案 0 :(得分:0)

这是我想出的黑客解决方案。我创建了一个包装类,您可以为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(并且它们以类似的方式使用包装器),但是您只能将计算属性绑定到同一个对象上的其他属性。上述模式允许您任意将对象属性关联为依赖项。