[Cycle.js] Fine-grained control over the DOM Source

最新推荐文章于 2022-08-26 17:33:28 发布

你狗

最新推荐文章于 2022-08-26 17:33:28 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/5185685.html

本文详细介绍了如何在React应用中使用RxJS管理DOM操作和事件，从点击事件转换为鼠标事件，并通过事件驱动更新UI。包括事件订阅、时间间隔、元素创建和事件监听等核心概念。

Currently in our main() function, we get click$ event.

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

What if we want to change it to mouse event? we need to somehow modiy the DOMSource it return from:

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

So for main() function, we need to call a function able to manage the tagName and eventType:

const mouseover$ = sources.DOM.selectEvents('span', 'mouseover');

And for the DomDirver, we need add a function which enable user to pass down element and eventType:

  const DOMSource = {
    selectEvents: function(tagName, eventName){
      return Rx.Observable.fromEvent(document, eventName);
    }
  };

-------------------------

Code:

// Logic (functional)
function main(sources) {
  const mouseover$ = sources.DOM.selectEvents('span', 'mouseover');
  const sinks = {
    DOM: mouseover$
      .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 = {
    selectEvents: function(tagName, eventName){
      return Rx.Observable.fromEvent(document, eventName);
    }
  };
  return DOMSource;
}

function consoleLogDriver(msg$) {
  msg$.subscribe(msg => console.log(msg));
}

const drivers = {
  DOM: DOMDriver,
  Log: consoleLogDriver,
}

Cycle.run(main, drivers);