Meteor开发平台入门 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

反应式变量 - ReactiveVar

仅仅使用Tracker来实现反应式编程,对数据的封装还是有点繁琐:我们 需要创建Dependency对象,需要编写setter/getter,需要在getter里登记 依赖项,需要在setter里触发依赖项计算。

Meteor体贴地为我们编写了reactive-var包,提供了一个新的类ReactiveVar 让我们一步到位创建反应式数据。ReactiveVar类可以视为我们之前数据封装过程 的面向对象/OO的实现,其原理是一致的。

reactive-var包没有预置在使用meter create创建的应用中,因此我们需要 使用meter add [package]命令,手工地为应用中添加这个包:

~/test$ meteor add reactive-var↵

现在我们可以来试一试Meteor内置的反应式变量了。

≡ 创建反应式变量 - new ReactiveVar(initVal)

使用new操作符创建一个ReactiveVar类的实例,我们就获得了一个反应式变量:

var A = new ReactiveVar(10);

ReactiveVar构造函数的参数指定了这个响应式变量A的初始值。你可以想象到, 在构造函数内会创建一个Dependency对象。

≡ 反应式变量读写 - 内置的getter/setter方法

ReactiveVar实例对象具有内置的getter/setter接口:使用get()方法读取 变量的值,使用set(newVal)方法修改变量的值。如你所料,对Dependency对象 的调用已经被封装进ReactiveVar的getter/setter方法中了。

//读取数据
var a = a.get();
//修改数据
A.set(Math.random());

执行以下命令复位test应用、删除源文件:

~/test$ meteor reset↵ ~/test$ rm -rf \*↵

执行以下命令拷贝frp-reactivevar示例代码、添加reactive-bar包、运行并 查看运行结果:

~/test$ cp ~/demos/frp-reactivevar/* .↵ ~/test$ meteor add reactive-var↵ ~/test$ meteor↵

理解并修改frp-reactivevar示例代码,通过练习掌握在Meteor应用中如何使用Tracker 和ReactiveVar来实现反应式计算。