1.1 什么是RxJS?
RxJS是ReactiveX编程理念的JavaScript版本。ReactiveX来自微软,它是一种针对异步数据流的编程。简单来说,它将一切数据,包括HTTP请求,DOM事件或者普通数据等包装成流的形式,然后用强大丰富的操作符对流进行处理,使你能以同步编程的方式处理异步数据,并组合不同的操作符来轻松优雅的实现你所需要的功能
1.2 初级核心概念
* 生产者 Observable
* 消费者 Observer
* 管道 operators
1.3 RxJS 与 JS 搜索功能实现对比
testJs() { let btn = document.querySelector('input'); let timer = null; btn.addEventListener('keyup', e => { clearTimeout(timer); timer = setTimeout(() => { console.log(e); this.getData(); }, 600); }); }
testRxjs() { let btn = document.querySelector('input'); fromEvent(btn, 'keyup') .pipe(debounceTime(600)) .subscribe(s => { console.log(s); this.getData(); }); }