简介
can-observation-recorder 是一个用于获取和管理 canJS 双向绑定数据的工具。相信大家都知道 canJS 的一个显著特点就是数据的双向绑定，而这个工具则是更加丰富和灵活的数据绑定方式。通过使用 can-observation-recorder，我们可以更好的控制视图渲染、数据更新等一系列关键的前端事件。
安装
首先，我们需要通过 npm 来安装 can-observation-recorder 包：
$ npm install can-observation-recorder --save
安装完成后，在需要使用 can-observation-recorder 的模块中引入它即可使用：
import { ObservationRecorder } from 'can-observation-recorder';使用
在开始使用 can-observation-recorder 之前，我们需要先理解一下它的基本概念和使用方式。
概念
can-observation-recorder 通过一个名为 ObservationRecorder 的类来实现，它主要包含以下几个概念：
- observation: 观察者对象，用于监控数据变化的对象。
- recorder: 记录器，用于存储 observation。
- key: 观察者对象的标识符，通过它可以将一个 observation 关联到一个特定的属性上。
使用方式
can-observation-recorder 的使用方式主要分为两个步骤：
- 建立 observation；
- 将 observation 记录到 recorder 中。
建立 observation
我们可以通过以下代码建立一个 observation：
import { ObservationRecorder } from 'can-observation-recorder';
const recorder = new ObservationRecorder();
const observation = recorder.get({ key: 'id', object: { id: 1 }});可以看到，我们用 get 方法通过参数的 key、object 属性建立一个 observation。key 通常表示对象的属性名，object 则表示被观察的对象。get 方法会在 recorder 中查找具有同样 key 和 object 的 observation。如果找到，就返回这个 observation；如果没有找到，就创建一个新的 observation 并返回。
记录 observation
当我们建立了 observation 后，我们需要将它记录到 recorder 中，通过这个方式来实现对特定的属性的监控。
import { ObservationRecorder } from 'can-observation-recorder';
const recorder = new ObservationRecorder();
const observation = recorder.get({ key: 'id', object: { id: 1 }});
recorder.add(observation);可以看到，在建立好 observation 后，我们通过 add 方法将这个 observation 记录到了 recorder 中。一旦 observation 被记录到了 recorder 中，它就会依据添加顺序存储在 recorder 中。
等到可以触发此 opinion 时，调用 observation.update() 方法即可。我们可以使用观察者绑定 API 以便能够在对象变更时自动触发 opinion。下面是一个简单的例子，展示如何在两个对象的变更后自动触发 opinion。
-- -------------------- ---- ------- ------ - ------------------- - ---- --------------------------- ----- -------- - --- ---------------------- ----- ------- - - ----- ------- -- ----- ------- - - ----- ----- -- -- -- ----------- ----- ------------ - -------------- ---- ------- ------- ------- --- ----- ------------ - -------------- ---- ------- ------- ------- --- -- - ----------- --- -------- - --------------------------- --------------------------- -- ------ ------------ - ------- ------------ - -------- -- ---- ------- ---------------------- ----------------------
可以看到，在可以触发 opinion 的时候，我们通过调用 observation.update() 的方法来触发 opinion。而可以触发 opinion 的时刻通常是一个理想的时机，因此在实际应用中我们通常会通过观察者绑定 API 来在对象变更时自动触发 opinion，从而减少手动触发 opinion 的工作。
总结
到这里，本文就为大家介绍了 can-observation-recorder 这个强大的数据绑定工具，主要包括它的基本概念和使用方法。这些知识点对于前端开发来说都是非常重要的，对于我们理解和使用 canJS，以及掌握更好的前端开发技巧都有很大的帮助。因此，我建议大家在平时的学习和开发中都应该多加注意，多尝试使用这些知识点，相信你们也可以获得更好的开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75660