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));
    }
  • 相关阅读:
    28、列举常见的内置函数(各个函数的示例,一大半没写全,慢慢更新,会全的)
    Django之前端插件定制之表头
    26、Python的可变类型和不可变类型?
    25、Python垃圾回收机制?
    24、简述Python的深浅拷贝以及应用场景
    基础题(五)
    使用OpenCV和Python进行人脸识别
    Codeforces Round #253 (Div. 2)B(暴力枚举)
    uva11609(组合数学,快速幂)
    uva10892(暴力枚举)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5182094.html
Copyright © 2011-2022 走看看