[Cycle.js] Making our toy DOM Driver more flexible-优快云博客

本文介绍了一个使用RxJS实现的简单DOM驱动模型，该模型能够根据提供的对象描述动态创建DOM元素，包括头部和输入等组件，并通过点击事件触发定时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);