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));
    }
  • 相关阅读:
    网络基本功(一)细说网络传输
    关于指针的理解
    百度地图定位,标注以及地图中心点问题
    ios 将彩色照片转化成黑白等几种类型
    在 iOS 应用中直接跳转到 AppStore 的方法
    ios中判断当前手机的网络状态
    NTFS 读写高手进阶 Windows 格式硬盘 Mac存文件 开启 ...(转载)
    tableviewcell 中使用autolayout自适应高度
    ios 3D Touch功能的实现
    一些牛人分享的ios技巧,保留着
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5182094.html
Copyright © 2011-2022 走看看