rxjs-demo-1

rxjs-demo-1

by 兵兵 王

HTML

<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.min.js"></script>
<link rel="stylesheet" href="https://github.com/ZxBing0066/log.js/releases/download/0.0.1/log.css">
<script src="https://github.com/ZxBing0066/log.js/releases/download/0.0.1/log.js"></script>
<button id="button1">button1</button>
<button id="button2">button2</button>
<button id="button3">button3</button>

CSS

.log-wrapper {
    position: fixed;
    z-index: 100000;
    bottom: 10px;
    right: 10px;
}
.log-wrapper .log-list {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, .1);
    border: 1px solid #CCC;
    overflow: auto;
    padding: 10px 20px 40px;
    margin: 0;
}
.log-wrapper .log-list li {
    list-style: none;
}
.log-wrapper .log-toggle-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

Babel + JSX

log.init();

var button = document.querySelector('#button1');
button.addEventListener('click', () => log.log('Clicked!'));

var button2 = document.querySelector('#button2');
Rx.Observable.fromEvent(button2, 'click')
	.subscribe(() => log.log('Clicked!'));
    
var button3 = document.querySelector('#button3');
Rx.Observable.fromEvent(button3, 'click')
  .scan(count => count + 1, 0)
  .subscribe(count => log.log(`Clicked ${count} times`));