javascript - knockout 观察和表现

Question

我从事 knockout 已经一年多了，但仍然有一个问题我无法解决。这是更多的“语法糖”问题，而不是实际问题。代码简单是在 TypeScript 中，但它应该没问题，即使你从未听说过它。

让我解释一下。

假设我们有一个可观察数组 (MyArray)，其中每个元素都有可观察的“值”。我们想创建一个计算的可观察量来获得所有的总和。

明显的方法是:

public SommeOne = ko.pureComputed((): number => {
    var res = 0;
    for (var i = 0; i < this.MyArray().length; i++) {
        res += this.MyArray()[i].Value();
    }
    return res;
});

但在这种情况下，对 this.MyArray() 的调用在每次迭代中计算两次。和“值(value)”一次。这对于小数组(少于 1000 个元素)是可以的，但对于更大的数组来说就会成为问题。所以，到目前为止，我的解决方案是:

public SommeOne = ko.pureComputed((): number => {
    var res = 0;
    var array = this.MyArray();
    for (var i = 0; i < array.length; i++) {
        res += array[i].Value();
    }
    return res;
});

此时我们只对 Array 函数求值一次(仍然对 Value 求值 1 次，但没关系，我们需要这个)并且它工作正常。

所以最后一个问题:

如何在不创建中间“数组”的情况下实现第二种解决方案？

对于一个数组来说没问题，但是如果你需要在两个数组之间做减法，或者做一些更复杂的事情，这很快就会失控。

Answer 1

您几乎可以肯定是在浪费时间担心这些优化。调用 this.myArray() 没有进行任何重要的计算。直接从 knockout source code 复制，调用可观察对象或可观察数组时执行的逻辑如下:

function observable() {
    if (arguments.length > 0) {
        // Write
        //[Omitted since not relevant here]
    }
    else {
        // Read
        ko.dependencyDetection.registerDependency(observable);
        return _latestValue;
    }
}

除了函数调用的开销和依赖检测完成的少量工作(当您不从计算中调用时，这可能基本上只是一个 noop 函数)； observable 函数只返回对数组的引用或它此刻恰好持有的任何对象，并且对象引用的成本非常很少。

数组的长度根本不是一个因素。它不会“成为更大数组的问题”，(至少 knockout 部分不会；算法的其余部分可能取决于您在做什么)，并且您对 knockout 已经缓存的值的缓存肯定不会是主要的性能提升。 (它可能也不会使情况变得更糟；尽管我认为它会影响可读性，因为它引入了新变量)

与任何性能问题一样；标准免责声明适用:只有当您首先证明这是代码中需要优化的区域，其次是这个 knockout 调用是一个重要的性能问题时，您才应该关心这一点。如果这是您的情况，请确保您可以进行一些基准测试以查看缓存值是否会提高您的性能，但根据您对问题的措辞，这里似乎存在更基本的误解。