响应式编程-RxJS

概念

Rx（Reactive Extension，响应式扩展）确切讲是一种编程思想，最早是微软的开源类库，之后随着 RxJava 的出现才广受追捧起来。显然，RxJS 是 Rx 的 JavaScript 的实现；

那么响应式扩展，或者说响应式编程，到底是怎样的？先引一下 wiki：

在计算领域，响应式编程是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。

Emm.. 这都说的什么鬼？好吧，概念总是抽象的，那么我们看实例：

1. 传统编程：

var a = 1;
var b = 2;
var c = a + b;
a = 2;
b = 3;
console.log(c);
// 3
// 没什么好说的，a 和 b 的变化不会影响到 c；

1. 响应式编程

var a$ = Rx.Observable.from([1,2]);
var b$ = Rx.Observable.from([2,3]);
var c$ = Rx.Observable.zip(a$,b$,(a,b)=>{return b + c;})
c$.subscribe(c => console.log('c:' + c));
// c: 3
// c: 5
// 可见：随着 a,b 值的变化，c 的值也跟着发生变化

现在再回过头来看 wiki，是不是能理解一些了？

借用一条经典结论：传统编程基于的是离散的点；而响应式编程基于的是连续的线

应用

讲完概念，接下来该讲讲 RxJS 具体怎么去用了。

操作符 是 RxJS 重要成员，因此我们先从操作符说起：

Tips：以下代码可以直接在 https://jsbin.com/ 上运行
运行前需在 body 里插入 <script src=”https://unpkg.com/@reactivex/…;></script>

• 创建类操作符

  • from

  var array = [10, 20, 30];
  var result$ = Rx.Observable.from(array);
  result$.subscribe(x => console.log(x));

  • fromEvent

  var input = document.getElementById('input');
  var input$ = Rx.Observable.fromEvent(input, 'keyup');
  input$.subscribe(x => console.log(x.target.value));

  • fromEventPattern

  function addClickHandler(handler) {document.addEventListener('click', handler);
  }
  
  function removeClickHandler(handler) {document.removeEventListener('click', handler);
  }
  
  var click$ = Rx.Observable.fromEventPattern(
    addClickHandler,
    removeClickHandler
  );
  click$.subscribe(x => console.log(x));

  • interval

  var resource$ = Rx.Observable.interval(500).take(3)
  resource$.subcribe(x => console.log("Next:" + x), err => console.log("Error:" + err), ()=> console.log('finished'));

  • timer

  var resource$ = Rx.Observable.timer(2000);
  resource$.subcribe(x => console.log("Next:" + x), err => console.log("Error:" + err), ()=> console.log('finished'));
  
  var resource2$ = Rx.Observable.timer(2000, 1000);
  resource2$.subcribe(x => console.log("Next:" + x), err => console.log("Error:" + err), ()=> console.log('finished'));

• 合并类操作符

  • combineLatest
  • zip
  • merge
  • concat

• 过滤类操作符

  • filter
  • take
  • debounce

（未完待续）