5.参考

下面的内容描述了如何构建和使用计算监控。

1. 构建一个计算监控

可以用如下的形式构建一个计算监控:

  1. ko.computed( evaluator [, targetObject, options] ) — 这是最常见的构建计算监控的形式。

    • evaluator — 一个用来计算当前计算监控值的函数
    • targetObject — 如果提供该值,该值定义了当KO请求你的回调函数时函数内部this的值。请看管理this章节查看更多信息。
    • options — 一个包含计算监控特性属性设置的对象,下面有详细列表。
  2. ko.computed( options ) — 一个参数形式创建的计算监控接收一个javascript对象并包含如下属性。
    • read - 必要属性。一个用于计算当前计算监控当前值的函数。
    • write — 可选。如果有,计算监控变为可写。这是一个函数,接收其他代码想要写入计算监控的值。具体功能由你的自定义逻辑对传入值的处理,一般是把值传回底层依赖。
    • owner — 可选。如果有,定义当KO请求你的readwrite函数时函数内部this的值。
    • pure — 可选。如果选项为true,计算监控会变为纯计算监控。该项可由 ko.pureComputed来构造计算监控来替代。
    • deferEvaluation —可选。如果该项为true,计算监控的值不会进行求值,直到确实有某些代码访问它的值或手动订阅它。默认情况下,计算监控在构建之后立即进行求值。
    • disposeWhen — 可选。如果选项为true,该函数在每次重新求值之前执行,用于决定计算监控是否应该被释放。结果为true会触发释放所有计算监控。
    • disposeWhenNodeIsRemoved — 可选。如果有,计算监控的释放会在规定的DOM节点被KO移除的时候触发。此功能是用来处理计算监控绑定节点,节点通过模板和控制流绑定删除时释放计算监控。
  3. ko.pureComputed( evaluator [, targetObject] ) — 用提供的求值函数和用来定义this的可选对象来构建纯计算监控。不像ko.computed,此方法不接受可选参数。
  4. ko.pureComputed( options ) — 通过提供一个javascript对象来构建一个纯计算监控。对象接受read,write,和owner选项如前面所述。

2. 使用计算监控

一个计算监控提供如下一些方法:

  • dispose() —手动释放计算监控,清除所有依赖的订阅。如果你想停止正在刷新数据的计算监控或者清理由于存在依赖的监控而不能清理的计算监控的内存。
  • extend(extenders) —给计算监控提供扩展器。
  • getDependenciesCount() — 返回当前计算监控的依赖数量。
  • getSubscriptionsCount( [event] ) — 返回计算监控当前订阅的数量(无论是来自计算监控还是手动订阅)。可选的,传入一个事件名(比如change)会返回当前事件的订阅数量。
  • isActive() — 返回计算监控的值在之后是否可能会被更新。如果计算监控没有依赖,会处于闲置状态。
  • peek() —返回计算监控当前值并不创建依赖。
  • subscribe( callback [,callbackTarget, event] ) — 注册一个手动订阅来接收计算监控改变的通知。

3. 确定监控类型

要检测一个属性是监控、计算监控还是其他,可以使用如下方法:

  • ko.isObservable — 如果是监控对象,监控数组和计算监控,返回true
  • ko.isWritableObservable —如果是监控对象,监控数组和可写计算监控,返回true(也可写作ko.isWriteableObservable)。
  • ko.isComputed — 如果是计算监控,返回true
  • ko.isPureComputed — 如果是纯计算监控,返回true

4. 使用计算监控上下文

在执行计算监控求值函数期间,你能访问ko.computedContext来获取当前计算监控属性的信息。它提供了如下方法:

  • isInitial() —如果计算监控是第一次调用求值函数,该函数返回true,否则返回false。对于纯计算监控,该方法一直是undefined

  • getDependenciesCount() — 返回在当前求值过程中计算监控被检测到的依赖数量。

    *注意: ko.computedContext.getDependenciesCount() 等同于调用计算监控本身调用getDependenciesCount() 。该方法也存在的原因是让ko.computedContext提供一种方式在计算监控构建完成之前,即第一次求值之前可以统计依赖数量。

    例子:

var myComputed = ko.computed(function() {
// ... Omitted: read some data that might be observable ... // Now let's inspect ko.computedContext
var isFirstEvaluation = ko.computedContext.isInitial(),
dependencyCount = ko.computedContext.getDependenciesCount(),
console.log("Evaluating " + (isFirstEvaluation ? "for the first time" : "again"));
console.log("By now, this computed has " + dependencyCount + " dependencies"); // ... Omitted: return the result ...
});

这些函数通常只会在某些复杂场景特别有用,比如当计算监控的主要目的是触发它的求值函数的一些副作用,你只想在第一次运行的时候执行一些配置逻辑,或者仅仅在它至少有一个依赖的情况下执行(因此可能在之后会被重新调用)。大多数计算监控属性不需要关心之前它们是否执行过,或者它们有多少依赖。

Knockout v3.4.0 中文版教程-9-计算监控-API参考的更多相关文章

  1. Knockout v3.4.0 中文版教程-6-计算监控-可写的计算监控

    2.可写的计算监控 初学者可能想要跳过本节 - 可写的计算监控是相当高级的部分,在大多数情况下不是必需的. 通常,计算监控是一个通过其他监控值计算出的值,因此是只读的. 令人惊讶的是,可以使计算监控值 ...

  2. Knockout v3.4.0 中文版教程-8-计算监控-纯计算属性

    4.纯计算属性 纯计算监控在KO 3.2.0中开始引入,比大多数应用程序使计算监控有更大的性能提升和内存优化.这是因为在自身没有订阅的时候不会保持订阅状态.特性如下 阻止内存泄露 - 避免在应用程序里 ...

  3. Knockout v3.4.0 中文版教程-5-计算监控-使用计算监控

    3. 计算监控 1.使用计算监控 如果你有一个监控的属性firstName和另一个lastName,但你想显示全名怎么办? 这就是引入计算监控的原因-这是依赖于一个或多个其他的observables函 ...

  4. Knockout v3.4.0 中文版教程-7-计算监控-依赖跟踪如何工作

    3.依赖跟踪如何工作 初学者不需要知道这一点,但更高级的开发人员将想知道为我们怎么实现KO自动跟踪依赖性和自动更新UI的正确部分... 它其实相当简单优雅,跟踪算法如下: 当你定义一个计算监控,KO立 ...

  5. Knockout v3.4.0 中文版教程-4-通过监控数组工作

    2.通过监控数组工作 1. 监控数组 如果你想检测或者响应一个对象的改变,你用observables.如果你想检测和响应一个集合的改变,使用observableArray.这个在很多情况下都非常有用, ...

  6. Knockout v3.4.0 中文版教程-16-控制流-foreach绑定

    2. 控制流 1. foreach绑定 目的 foreach绑定会遍历一个数组,为每个数组项生成重复的元素标记结构并做关联.这在渲染列表或表格的时候特别有用. 假设你的数组是一个监控数组,之后无论你进 ...

  7. Knockout v3.4.0 中文版教程-1-入门和安装

    英文原版教程:http://knockoutjs.com/documentation/introduction.html 注:此教程根据英文原版翻译,仅作练习,如有不足或错误,请指正 说明: 对原文中 ...

  8. Knockout v3.4.0 中文版教程-11-控制文本内容和外观-text绑定

    2. text绑定 目的 text绑定把传入的参数通过关联的DOM元素来显示文本值. 通常这对像<span>或<em>标签等使用,但技术上你可以对任何元素使用该绑定. 例子 T ...

  9. Knockout v3.4.0 中文版教程-14-控制文本内容和外观-style绑定

    5. style绑定 目的 style绑定用来给关联的DOM元素添加或移除一个或多个样式值.在如下情况很有用,比如,当某些值为负时,高亮显示,或者设置容器元素的宽度来匹配数值的改变. (注意:如果你不 ...

随机推荐

  1. python+selenium 页面中存在选项卡时,获取页面内容的小技巧

    最近用selenium读取页面内容时,遇到包含选项卡的页面,由于选项卡多由js加载其中的内容,所以在网址打开时只能获取到默认显示的选项卡中的内容,而tab2.tab3等等都需要傻傻的点击一下才会获取到 ...

  2. vue echarts 大小自适应

    窗口大小时候 ,echarts图自适应 在创建图表的方法中直接,用resize方法 let myChart=this.$refs.myChart; let mainChart = echarts.in ...

  3. 牛客网Java刷题知识点之什么是cookie、什么是session、cookie和session有什么区别

    不多说,直接上干货! https://www.nowcoder.com/ta/review-java/review?tpId=31&tqId=21170&query=&asc= ...

  4. javaoo封装

  5. Ajax基础介绍

      什么是Ajax 首先来看一下什么是Ajax,英语全称Asynchronous JavaScript And XML,翻译成中文就是异步的JavaScript和XML.也被称为异步无刷新技术 先来解 ...

  6. 60分钟课程: 用egg.js实现增删改查,文件上传和restfulApi, webpack react es6 (一)

    今天开始我将写nodejs框架egg.js, react 实现的增删改查,文件上传等常用的b/s场景,这个将分3部分来写. 会让你在60分钟内快速 入口并应用~  你应该用es6, node,或是ph ...

  7. CString的GetBuffer和ReleaseBuffer

    GetBuffer()主要作用是将字符串的缓冲区长度锁定,releaseBuffer则是解除锁定,使得CString对象在以后的代码中继续可以实现长度自适应增长的功能. CString ::GetBu ...

  8. uvm_reg_field——寄存器模型(二)

    uvm_reg_field是最基本寄存器单元. typedef class uvm_reg_cbs; //----------------------------------------------- ...

  9. libxml2.dylb 导致<libxml/tree.h> 老是找不到头文件

    添加了libxml2.dylb的framework ,结果还是引用不了<libxml/tree.h>,  老是提示找不到头文件. 这个问题其实比较容易解决,但是XCode的版本问题确实让开 ...

  10. shell脚本,通过一个shell程序计算n的阶乘。

    [root@localhost ~]# cat jiechen.sh #!/bin/bash #设计一个shell程序计算n的阶乘,要求: #.从命令行接收参数n; #.在程序开始后立即判断n的合法性 ...