创建Cycle.js可重用模块

时间:2016-08-25 07:24:51

标签: javascript reactive-programming cyclejs

让我们想象一下,在OO世界中,我想构建一个监听网络的Torrent对象,让我与它进行交互。它会继承一个EventEmitter,看起来像这样:

var torrent = new Torrent(opts)
torrent.on('ready', cb) // add torrent to the UI
torrent.on('metadata', cb) // update data in the UI

我也可以做它:

torrent.stop()
torrent.resume()

当然,如果我想删除内存中的torrent,我可以调用torrent.destroy()

这个OO方法的一个很酷的事情是,我可以轻松地将这个功能打包在它自己的npm模块中,测试地狱,并为用户提供一个很好的清洁可重用API。

我的问题是,如何使用Cycle.js应用实现这一目标?

如果我创建一个驱动程序,我不清楚如何创建许多种子并拥有自己独立的侦听器。还要考虑我希望以其他人可以在其他Cycle.js应用程序中轻松重用它的方式打包功能。

2 个答案:

答案 0 :(得分:2)

在我看来,你正在尝试解决一个思考它的问题,就像你写"imperative code"一样。 我认为用自己的监听器创建Torrent实例不是你应该在循环组件中使用的东西。

我会采用不同的方式 - 创建Torrent模块并找出它的来源和接收器。如果此模块应该可重用并发布,则可以将其创建为将接收流作为参数的函数。也许类似于TodoMVC Task component的东西(然后在其父组件中使用)。

由于这个模块可以创建为纯函数,因此测试它应该至少同样容易。

这个实现当然取决于你的要求,但是与模块的通信只能用流完成,因为它是声明性的,所以不需要你可以从别处调用的方法,如stop()和destroyed()

答案 1 :(得分:0)

  

我该如何测试?

在cycle.js中,您可以编写具有意图模型和视图函数的组件。

您测试intent(),对于给定的输入Streams,会生成您想要的操作流。对于模型,您可以测试给定的http和动作流,您可以获得所需的状态,对于视图,您可以测试给定的状态,即可获得所需的VDom。

使用cycle.js的一个棘手的问题是,因为它传递了函数,所以普通的JavaScript对象使用' this'关键字不值得麻烦,因为这个'背景问题。如果你正在使用cycle.js并且你认为你可能会编写一个JS类来与Isolate,Onionify或Collections一起使用,那么你的方向是错误的。见MDN docs about 'this'

  

我将如何创造许多种子

Cycle.js人有几种方法可以处理这类事情。 这个ticket描述了一些可能有用的东西: