zoukankan      html  css  js  c++  java
  • [Cycle.js] Generalizing run() function for more types of sources

    Our application was able to produce write effects, through sinks, and was able to receive read effects, through the DOM sources. However, the main function only gets the DOMSource as input. This lessons shows how we can generalize main to receive an object of sources, containing all kinds of read effects that we can use.

    Code to be chagned:

    function run(mainFn, drivers) {
      const proxyDOMSource = new Rx.Subject();
      const sinks = mainFn(proxyDOMSource);
      const DOMSource = drivers.DOM(sinks.DOM);
      DOMSource.subscribe(click => proxyDOMSource.onNext(click));
    //   Object.keys(drivers).forEach(key => {
    //     drivers[key](sinks[key]);
    //   });
    }

    This is hard code now, make it more fixable:

    function run(mainFn, drivers) {
    
      const proxySource = {};
    
      //For each driver, we need to proxySource
      Object.keys(drivers).forEach( (key)=>{
        proxySource[key] =  new Rx.Subject();
      } );
    
      //Get sinks (output effect)
      const sinks = mainFn(proxySource);
    
      Object.keys(drivers).forEach( (key)=>{
        //for each drive, create a source for that
        const Source = drivers[key](sinks[key]);
        
        Source.subscribe( x => proxySource[key].onNext(x) );
      } );
    }

    ---------------------

    Code:

    // Logic (functional)
    function main(Sources) {
      const click$ = Sources.DOM;
      return {
        DOM: click$
          .startWith(null)
          .flatMapLatest(() => 
            Rx.Observable.timer(0, 1000)
             .map(i => `Seconds elapsed ${i}`)           
          ),
        Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
      };
    }
    
    const drivers = {
      DOM: DOMDriver,
      Log: consoleLogDriver,
    }
    
    // bProxy = ...
    // a = f(bProxy)
    // b = g(a)
    // bProxy.imitate(b)
    
    function run(mainFn, drivers) {
    
      const proxySource = {};
      Object.keys(drivers).forEach( (key)=>{
        proxySource[key] =  new Rx.Subject();
      } );
      const sinks = mainFn(proxySource);
      Object.keys(drivers).forEach( (key)=>{
        const Source = drivers[key](sinks[key]);
        Source.subscribe( x => proxySource[key].onNext(x) );
      } );
    }
    
    run(main, drivers);
    
    // source: input (read) effects
    // sink: output (write) effects
    
    
    
    // Effects (imperative)
    function DOMDriver(text$) {
      text$.subscribe(text => {
        const container = document.querySelector('#app');
        container.textContent = text;
      });
      const DOMSource = Rx.Observable.fromEvent(document, 'click');
      return DOMSource;
    }
    
    function consoleLogDriver(msg$) {
      msg$.subscribe(msg => console.log(msg));
    }
  • 相关阅读:
    poj 1584
    poj 1113 & poj 2187
    pku 1321 棋盘问题
    poj 1408
    pku 2251 Dungeon Master
    sdut oj 2218 Give Me an E
    Android工程 单元测试
    Android Timer编写方式
    去除工程的.svn隐藏文件夹
    Android 绑定远程服务出现 Not Allowed to bind service
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5182094.html
Copyright © 2011-2022 走看看