(一)Knockout 计算属性

Computed

首先,创建一个view model如下:

<body>
    <p>The fullname is: <span data-bind="text: fullName"></span></p>
  </body>

  <script>
    function MyViewModel() {
      this.firstName = ko.observable("Chiaki");
      this.lastName = ko.observable("Izumi");
      this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
      }, this);
    }

    ko.applyBindings(new MyViewModel());
  </script>


每当firstName或是lastName中至少一个变化的时候,就会调用一次ko.computed来生成fullName并反映在UI中。

从以上示例中也可以看到,ko.computed有两个参数,第一个是联系两个observable并生成fullName的函数,第二个是this。第二个参数指定了第一个参数中的this的值(这个看起来的确有些怪异,可以留作以后研究),按照文档中的说法,javascript中的函数在默认情况下并不是object的一部分,所以需要指定this的值。

也有一种通用的简化方式,即将this在构造函数一开始就赋给另一个变量,这样在之后需要用到this的部分即可以通过调用另一个变量来实现:

function MyViewModel() {
  var self = this;

  self.firstName = ko.observable("Chiaki");
  self.lastName = ko.observable("Izumi");
  self.fullName = ko.computed(function() {
    return self.firstName()+ " " + self.lastName();
  });
}

个人分析,之所以能够通过这种方式来简化,跟javascript中的this机制有关,可能在javascript中每当遇到一个this的时候就分析当前的object到底是哪个,进而对this进行替代,但是进入到ko.computed函数里面之后,由于函数并不算是object的一部分,this的值也就不再是当前的object(MyViewModel),而变成了window,使用self以后就涉及到闭包的问题了,使得self的值并不会更改,这个可以留作以后研究。

如果computed observable知识基于一些observable的简单计算的话,使用pureComputed会比computed更好,如下:

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

我们也可以对computed或是pureComputed进行强制订阅,如下:

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

同样的,可以通过调用extend方法中的rateLimit属性来指定响应的延时。

在某些时候,我们可能需要判定某个变量到底是不是computed observable,这时可以用到ko.isComputed来进行判断,类似的方法还包括isObservablem,isWritableObservable等,其中isObservable对于observables、observable arrays、computed observables均会返回true;isWritableObservable对于observables、observable arrays、writable computed observables均会返回true,这部分可以留作以后研究。

参考:

官网,computedObservables
CharlieYuki,KnockoutJs学习笔记(三),Using computed observables

PureComputed

Pure computed observables相对于一般的computed observables,在性能和存储上有优势,这是因为pure computed observables在不存在订阅者的时候是不会保持订阅关系的。这也使得pure computed observables有如下两点特点:

  • 可以防止没有被订阅的computed observables的存储泄露。
  • 可以降低因重复计算未被订阅的computed observables而造成的运算过载。

一个pure computed observable能够依据它是否拥有订阅者而自动地在两种状态下切换:
1.当不存在订阅者的时候,pure computed observable会进入休眠状态,此时的它,会关闭所有依赖于它的订阅关系,同时也不会再追踪它所关联的observables。一旦处于休眠状态的computed observable的值被读取的话,它就需要重新计算以便以确保值得正确性。
2.当它拥有订阅者的时候,pure computed observable会进入监听状态。一旦进入监听状态,它会立即调用它的function和订阅程序来追踪它所关联的observables。在这种状态下,pure computed observables和普通的computed observables无异。更为详细的内容需参考How dependency tracking works部分。

按照文档的说明,选择pure computed observables有两条原则。一是computed observable在运算的时候不能产生副作用(不能对其他的observables产生影响);二是computed observable的值应该仅仅依赖于它所关联的observables的值,而不是其他隐含的信息。

Pure computed observables有两种定义方式:

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

或者

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

参考:

官网,Pure computed observables

猜你喜欢

转载自www.cnblogs.com/tangge/p/10296749.html
今日推荐