zoukankan      html  css  js  c++  java
  • [Cycle.js] Making our toy DOM Driver more flexible

    Our previous toy DOM Driver is still primitive. We are only able to sends strings as the textContent of the container element. We cannot yet create headers and inputs and all sorts of fancy DOM elements. In this lesson we will see how to send objects that describe what elements should exist, instead of strings as the DOM sink.

    // Logic (functional)
    function main(sources) {
      const click$ = sources.DOM;
      const sinks = {
        DOM: click$
          .startWith(null)
          .flatMapLatest(() => 
            Rx.Observable.timer(0, 1000)
             //describe what element should exist
             .map(i => {
                return {
                  tagName: 'h1',
                  children: [
                    {
                      tagName: 'span',
                      children: [
                        `time esplsed: ${i}`
                      ]
                    }
                  ] 
                }
             })           
          ),
        Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
      };
      return sinks;
    }
    
    
    
    
    
    // source: input (read) effects
    // sink: output (write) effects
    
    // Effects (imperative)
    function DOMDriver(obj$) {
      
      function createElement(obj) {
        const element = document.createElement(obj.tagName);
        obj.children
          .filter(c => typeof c === 'object')
          // if it is object, then we need to create another element
          .map(createElement)
          .forEach(c => element.appendChild(c));
        
        obj.children
          .filter(c => typeof c === 'string')
          .forEach(c => element.innerHTML += c);
        return element;
      }
      
      obj$.subscribe(obj => {
        const container = document.querySelector('#app');
        container.innerHTML = '';
        const element = createElement(obj);
        container.appendChild(element);
      });
      
      const DOMSource = Rx.Observable.fromEvent(document, 'click');
      return DOMSource;
    }
    
    function consoleLogDriver(msg$) {
      msg$.subscribe(msg => console.log(msg));
    }
    
    const drivers = {
      DOM: DOMDriver,
      Log: consoleLogDriver,
    }
    
    Cycle.run(main, drivers);
    
      
  • 相关阅读:
    eth私有节点搭建
    angularjs 文件类型格式校验
    Windows Server 2019, 2016 or 2012 安装telnet
    Oracle导致Redo日志暴增的SQL语句排查
    log4j waf 绕过技巧
    jtemplate使用笔记
    NPOI2.0
    关于java同一个类互相调用,spring事务失效问题
    java 将redis的数据批量取出来的时候遇到json格式转换异常
    超级好用的文档转换工具
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5185665.html
Copyright © 2011-2022 走看看