Meteor开发平台入门 互动版

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

Meteor的FRP实现 - Tracker模块

Meteor平台的FRP实现是通过内置的Tracker包完成的。在Meteor平台上实现反应式 计算可分为三个步骤:

  1. 将原始数据使用getter/setter进行封装
  2. 编写依赖于反应式数据的计算过程
  3. 启动反应式计算过程

可以认为Meteor的FPR实现,一半是Tracker包中的代码,一半是对开发者编写代码的要求。 需要提醒的是,Tracker包只可以用在前端

≡ 封装反应式数据

Tracker要求对数据的存取通过getter/setter接口进行。使用getter接口 读取数据时,数据的封装者负责记录依赖于该数据的计算过程;使用setter接口 修改数据时,数据的封装者负责传播数据变化 - 即调用所有已经记录的依赖于该数据 的计算过程:

tracker-deps

Tracker定义了一个类Tracker.Dependency来简化数据封装者在实现getter/setter 时要做的工作。对每一个需要进行封装的数据,我们创建一个对应的Dependency对象。 在getter里,使用Dependency对象的depend()方法登记依赖于此数据的计算过程; 在setter里,使用Dependency对象的changed()方法调用登记过的依赖于此数据的 计算过程。

var A = 10;
var depsA = new Tracker.Dependency();

//getter
var getA = function(){
  despA.depend();
  return A;
};
//setter
var setA = function(nv){
  A = nv;
  despA.changed();
}

≡ 封装计算过程

Tracker要求我们使用无参函数来表示一个计算过程

//计算过程,Tracker使用这个函数创建计算块
var computeFunc = function(){
  //当调用getA或getB时,Tracker创建的计算块将被登记到depsA或depsB的依赖项记录表中
  var a = getA(),
      b = getB(),
      c = a + b;
  console.log(a + " + " + b + " = " + c);
};

≡ 启动反应式计算

使用Tracker.autorun(computeFuc)方法来启动反应式计算:

Tracker.autorun(computeFunc);

≡ 测试反应式计算

现在我们就可以写一段测试代码了,记住,Tracker要求我们必须通过setter 接口来修改数据:

var seq = 0;
setInterval(function(){
  if(seq % 2 === 0)
    setA(parseInt(Math.random()*1000));      
  else
    setB(parseInt(Math.random()*1000));      
  seq++;
},1000);

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

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

执行以下命令拷贝frp-tracker示例代码,运行并查看运行结果:

~/test$ cp ~/demos/frp-tracker/* .↵ ~/test$ meteor↵

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