响应式编程-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

（未完待续）