[Cycle.js] From toy DOM Driver to real DOM Driver

时间：2023-03-08 21:09:28

This lessons shows how we are able to easily swap our toy DOM Driver with the actual Cycle.js DOM Driver, a more solid, more flexible, more efficient implementation.

<!DOCTYPE html>

<html>

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>

<script src="https://rawgit.com/cyclejs/cycle-core/v6.0.3/dist/cycle.js"></script>

<script src="https://rawgit.com/cyclejs/cycle-dom/v9.1.0/dist/cycle-dom.js"></script>

  <meta charset="utf-8">

  <title>JS Bin</title>

</head>

<body>

  <div id="app"></div>

</body>

</html>
const {h, h1, span, makeDOMDriver} = CycleDOM;

// Logic (functional)

function main(sources) {

  const mouseover$ = sources.DOM.select('span').events('mouseover');

  const sinks = {

    DOM: mouseover$

      .startWith(null)

      .flatMapLatest(() =>

        Rx.Observable.timer(0, 1000)

         .map(i =>

           h1({style: {background: 'red'}}, [

             span([

               `Seconds elapsed: ${i}`

             ])

           ])

         )

      ),

    Log: Rx.Observable.timer(0, 2000).map(i => 2*i),

  };

  return sinks;

}

// Effects (imperative)

function consoleLogDriver(msg$) {

  msg$.subscribe(msg => console.log(msg));

}

const drivers = {

  DOM: makeDOMDriver('#app'),

  Log: consoleLogDriver,

}

Cycle.run(main, drivers);

相关文章