Knockoutjs官网翻译系列 使用Computed Observables

Posted 2020-07-26

       书接上回，前面谈到了在视图模型中可以定义普通的observable属性以及observableArray属性实现与UI元素的双向绑定，这一节我们继续探讨第三种可实现绑定的属性类型：computed observables，我称它为计算observable(说实话关于observable怎么翻译我还真拿不准)。

       要是你在视图对象中已经定义了一个叫firstName的observable属性和一个叫lastName的observable属性，而你想显示这个人的全名那要如何处理呢？这种情况下就到了computed observables 登场的时候了- 它们是一种依赖于其它observables的方法。并且当依赖的这些observables发生变化的时候会自动进行内容的更新。来个Demo吧：

function AppViewModel() {
    this.firstName = ko.observable(‘Bob‘);
    this.lastName = ko.observable(‘Smith‘);
}

       此时你可以添加一个computed observable来显示全名

function AppViewModel() {
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
}

然后像这样绑定UI

The name is <span data-bind="text: fullName"></span>

绑定之后之后无论firstName或者lastName什么时候发生了变化，fullName会自动更新为最新的值。(也就是说当依赖的observable发生变化的时候computed中放置的激活函数每次都会被调用, 并且无论你返回什么都会传递给相应的观察者，比如UI元素或者其它的computed observables)。

  依赖链

  当然了，因此你也可能创造出一条computed observables链，例如像下面这样的场景:

• 一个叫items的observable属性，它代表一系列对象
• 另一个叫selectedIndexes的observable属性，代表了被用户选中的项的下表索引
• 一个叫selectedItems的computed observable ，它返回一个与selectedIndex相关的对象数组。
• 另一个computed observable，它返回true或者false，如果selectedItems数组中有值那么返回true，否则返回。某些UI元素例如button,它是否可用取决于这个computed observable的返回值。

     修改items 或者 selectedIndexes 会波及并更新到链条中的computed observables,进而会更新绑定到它们的UI元素。

    关于‘this’

     ko.computed中的第二个参数(上面示例中的this) ,当computed observable函数被调用的时候定义了this到底是什么。如果不传递这个值 ,是不能像代码中那样引用this.firstName或者this.lastName的。有经验的javascript的程序员应该不会有什么疑惑，因为在computed observable中this指代的就不是AppViewModel对象了，

也就无法访问到里面的属性，所以这里需要重新进行赋值定义。 JavaScript在这一点上看起来很奇怪 。(像C# 和Java 是永远不希望程序员为this进行赋值的, 但是JavaScript需要, 因为它的functions 本身默认是不属于任何对象的。)

•      这里推荐一个比较流行而且简单的处理方式，避免始终考虑this所处的上下文，如果你的视图模型的构造器拷贝一个this的引用到一个单独的变量中(比较经典的可以起名叫 self)，你就可以在其它需要使用之前this的地方使用它，就不用再担心this会被隐式定义成其它对象了，举个例子：

function AppViewModel() {
    var self = this;
 
    self.firstName = ko.observable(‘Bob‘);
    self.lastName = ko.observable(‘Smith‘);
    self.fullName = ko.computed(function() {
        return self.firstName() + " " + self.lastName();
    });
}

因为self是在function中被捕获的, 他会在内部functions中始终可用, 例如computed observable的执行函数。

Pure computed observables

如果你的computed observable 只执行简单的计算并返回一个依赖于其它observable的值, 那么最好是这么声明 ko.pureComputed 从而取代一个ko.computed。例如:

this.fullName = ko.pureComputed(function() {
    return this.firstName() + " " + this.lastName();
}, this);

从这个computed声明为pure起 (如果它的调用方法不直接更改其它对象的状态), Knockout 可以更有效的管理它的再次激活方式以及它的内存使用方式。当没有其它代码再依赖这个属性的时候Knockout 会自动挂起或者释放它。（也就是说会有性能上的优化）

防止computed observables 始终通知订阅者

当一个computed observable 返回一个基本类型值的时候 (number, string, boolean, 或者null), 与它有依赖关系的通常只会在它真正发生改变时接收到通知，如果始终返回同一个值，那么就不会接收到通知。 然而, 可以使用内置的notify extender 保证一个 computed observable’s 的订阅者始终可以在computed observable更新时接收到通知，哪怕更新后的值与之前是相同。使用方式如下:

myViewModel.fullName = ko.pureComputed(function() {
    return myViewModel.firstName() + " " + myViewModel.lastName();
}).extend({ notify: ‘always‘ });

延迟更新通知

for (var prop in myObject) {
    if (myObject.hasOwnProperty(prop) && !ko.isComputed(myObject[prop])) {
        result[prop] = myObject[prop];
    }
}

通常来讲, 一个computed observable 更新后会立即通知它的订阅者。 但是如果一个 computed observable 有很多依赖并更新时会比较耗时, 你可以通过限制更新的间隔时间来获取一个较好的性能。可通过下面的方式来完成：

myViewModel.fullName.extend({ rateLimit: 50 });

判断一个属性是不是一个computed observable

    在有些场景下,通过编程来判断一个属性是不是computed observable是非常有用的。 Knockout 提供了一个工具方法, ko.isComputed. 例如在你向后台服务发送数据的时候你可能想把computed observables从提交数据中排除出去。可以这样：

for (var prop in myObject) {
    if (myObject.hasOwnProperty(prop) && !ko.isComputed(myObject[prop])) {
        result[prop] = myObject[prop];
    }
}

此外, Knockout 还提供了一些类似的方法可以操作于observables 和 computed observables:

• ko.isObservable - 如果是observables或者observableArray或者computed observables那么就返回true。

• ko.isWritableObservable - 如果是observables或者observableArray或者可写computed observables 那么就返回true。

当computed observable 只在你的UI种使用

如果你只需要在你的UI界面上使用复合全称，你可以像如下这样声明:

function AppViewModel() {
    this.fullName = function() {
        return this.firstName() + " " + this.lastName();
    };
}

现在你的UI绑定就变成了一个方法调用，如下：

The name is <span data-bind="text: fullName()"></span>

Knockout 会在幕后创建 computed observable来监测绑定表达式依赖了什么observables,并且如果相关元素之后被删除了也会自动释放他（dispose it）。

 

好了，下节继续！