[Cycle.js] Introducing run() and driver functions

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[Cycle.js] Introducing run() and driver functions相关的知识,希望对你有一定的参考价值。

Currently the code looks like :

// Logic (functional)
function main() {
  return {
    DOM: Rx.Observable.timer(0, 1000)
      .map(i => `Seconds elapsed ${i}`),
    Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
  };
}

// Effects (imperative)
function DOMEffect(text$) {
  text$.subscribe(text => {
    const container = document.querySelector(‘#app‘);
    container.textContent = text;
  });
}

function consoleLogEffect(msg$) {
  msg$.subscribe(msg => console.log(msg));
}

const sinks = main();
DOMEffect(sinks.DOM);
consoleLogEffect(sinks.Log);
  

 

We still have this part of code which didn‘t wrap into a function, we can wrap into a run() function, this can provide a main enterence for the code:

function run(mainFn){
  const sinks = mainFn();
  DOMEffect(sinks.DOM);
  consoleLogEffect(sinks.Log);
}

run(main);

 

Let‘s say we want to remove consoleLogEffect, current way we need to comment out from the main() function. 

The problems are that in the first place we are hard coding these effects inside run. Instead, we should be able to specify that these are the effects that I want to run my main function, so we need to give our effects to run as well.

That will be an object. Effects functions will be an object, and the keys will match those keys that we saw from the sync here. The DOM function is DOM Effect, and the log function is consoleLogEffect.

const effects = {
    DOM: DOMEffect,
    Log: consoleLogEffect
}

function run(mainFn, effects){
  const sinks = mainFn();
  Object.keys(effects)
    .forEach( (effectKey)=>{
    effects[effectKey](sinks[effectKey]);
  })
}

run(main, effects);

 

The last thing author introduce the ‘driver‘ as the name instead of ‘effect‘ ...

// Logic (functional)
function main() {
  return {
    DOM: Rx.Observable.timer(0, 1000)
      .map(i => `Seconds elapsed ${i}`),
    Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
  };
}

// Effects (imperative)
function DOMDriver(text$) {
  text$.subscribe(text => {
    const container = document.querySelector(‘#app‘);
    container.textContent = text;
  });
}

function consoleLogDriver(msg$) {
  msg$.subscribe(msg => console.log(msg));
}

function run(mainFn, drivers) {
  const sinks = mainFn();
  Object.keys(drivers).forEach(key => {
    drivers[key](sinks[key]);
  });
}

const drivers = {
  DOM: DOMDriver,
  Log: consoleLogDriver,
}

run(main, drivers);

  

 

以上是关于[Cycle.js] Introducing run() and driver functions的主要内容,如果未能解决你的问题,请参考以下文章

[Cycle.js] The Cycle.js principle: separating logic from effects

学习RxJS:Cycle.js

学习RxJS:Cycle.js

替换 cycle2.js 中的 <img> 标签

在 Cycle.js 中呈现所有 dom 后运行 js 代码

jQuery图片切换插件jquery.cycle.js