zoukankan      html  css  js  c++  java
  • [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);
    
      
  • 相关阅读:
    Codeforces Round #647 (Div. 2)
    Codeforces Round #647 (Div. 2)
    Codeforces Round #647 (Div. 2)
    “科大讯飞杯”第十七届同济大学程序设计预选赛暨高校网络友谊赛(ABDF)
    POJ3764 The xor-longest Path(异或/01Trie)
    06.Python网络爬虫之requests模块(2)
    05.Python网络爬虫之三种数据解析方式
    04.Python网络爬虫之requests模块(1)
    03.Python网络爬虫第一弹《Python网络爬虫相关基础概念》
    02.Python网络爬虫第二弹《http和https协议》
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5178061.html
Copyright © 2011-2022 走看看