rxjs入门

[HanSummer]

1.参考链接 http://www.hubwiz.com/class/569d92e3acf9a45a69b05154

2.参考: https://segmentfault.com/a/1190000008809168

3.参考: http://www.open-open.com/lib/view/open1476430547096.html

[HanSummer]

• 代码

  window.onload = function(){
  var elClock = document.getElementById("clock");
  var getTime =  function(){
      var _ = ['00','01','02','03','04','05','06','07','08','09'],  //补零
          d = new Date(), h = d.getHours(),m = d.getMinutes(),s = d.getSeconds();
      return [_[h]||h,_[m]||m,_[s]||s].join(":");
  };
  setInterval(function(){
      elClock.textContent = getTime();
  },1000);
  }

• 数据

在这个小程序中，我们关心的数据就是当前的时间

• 数据提供者/Provider

在这个小程序中，数据提供者就是那个定时器，它以每秒1次的频率生成新 的数据 —— 当前时间：

//provider setInterval(function(){ //生成数据 },1000);

• 数据消费者/Consumer

在这个小程序中，数据消费者就是用户界面 —— 一个简单的DOM对象DIV， 我们在数据生成后立即更新了用户界面。

[HanSummer]

在观测者模式中，我们之前总结的三个要素都有了正式的名称：

• 数据提供者 ： 可观测对象/Observable
• 数据消费者 ： 观测者/Observer
• 数据 ： 通知/Notification

[HanSummer]

// 可观测对象: 数据生成器
var Observable = function(generator) {
    this._generator = generator;
};

// 可观测对象: 连接可观测对象和观测者，使得观测者可以消费可观测对象变化生成的数据
Observable.prototype.subscribe = function(observer) {
    this._generator.call(this, observer);
};

// 观测者: 消费者
var Observer = function(consumer) {
    this._consumer = consumer;
};

// 观测者: 消费数据接口
Observer.prototype.onNotify = function(data) {//消费者接口
    this._consumer.call(this, data);
};

window.onload = function() {
    var elClock = document.getElementById("clock");
    var getTime = function() {
        var _ = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09']
          , //补零
        d = new Date()
          , h = d.getHours()
          , m = d.getMinutes()
          , s = d.getSeconds();
        return [_[h] || h, _[m] || m, _[s] || s].join(":");
    };
    var tickStream = new Observable(function(observer) {
        setInterval(function() {
            observer.onNotify(getTime());
        }, 1000);
    }
    );
    var uiRefresher = new Observer(function(data) {
        elClock.textContent = data;
    }
    );
    tickStream.subscribe(uiRefresher);
}

[HanSummer]

RXjs版本:

RxJS 是基于观察者模式和迭代器模式以函数式编程思维来实现的。RxJS 中含有两个基本概念：Observables 与 Observer。Observables 作为被观察者，是一个值或事件的流集合；而 Observer 则作为观察者，根据 Observables 进行处理。

Observables 与 Observer 之间的订阅发布关系(观察者模式) 如下：

订阅：Observer 通过 Observable 提供的 subscribe() 方法订阅 Observable。 发布：Observable 通过回调 next 方法向 Observer 发布事件。

window.onload = function(){
    var elClock = document.getElementById("clock");
    var getTime =  function(){
        var _ = ['00','01','02','03','04','05','06','07','08','09'],  //补零
            d = new Date(), h = d.getHours(),m = d.getMinutes(),s = d.getSeconds();
        return [_[h]||h,_[m]||m,_[s]||s].join(":");
    };
    var tickStream = Rx.Observable.create(function(observer){
        setInterval(function(){
            observer.onNext(getTime());
        },1000);        
    });
    var uiRefresher = Rx.Observer.create(function(data){
        elClock.textContent = data;
    });
    tickStream.subscribe(uiRefresher);
}

对观测者模式的实现是RxJS的核心，但这仅仅是RxJS旅程的开始。还记得 ReactiveX吗？

它的全称是：Reactive Extensions。没错，丰富的扩展 才是RxJS的威力所在。

[HanSummer]

RxJS将数据分为两种类型：

普通数据 - 比如数组、字符串、JSON对象之类的 可观测对象 - 比如使用Rx.Observable.create()方法获得的对象

[HanSummer]

RxJS 中提供了很多操作符，用于创建 Observable 对象，常用的操作符如下：

create of from fromEvent fromPromise empty never throw interval timer

[HanSummer]

[HanSummer]

MagicQ	单值	多值
拉取(Pull)	函数	遍历器
推送(Push)	Promise	Observable

[HanSummer]

数组中的操作符如：filter、map 每次都会完整执行并返回一个新的数组，才会继续下一步运算。具体示例如下：

var source = [1,2,3,4,5]; var example = source .filter(x => x % 2 === 0) // [2, 4] .map(x => x + 1) // [3, 5]

虽然 Observable 运算符每次都会返回一个新的 Observable 对象，但每个元素都是渐进式获取的，且每个元素都会经过操作符链的运算后才输出，而不会像数组那样，每个阶段都得完整运算。具体示例如下：

var source = Rx.Observable.from([1,2,3,4,5]); var example = source .filter(x => x % 2 === 0) .map(x => x + 1)

example.subscribe(console.log); 以上代码的执行过程如下：

source 发出 1，执行 filter 过滤操作，返回 false，该值被过滤掉 source 发出 2，执行 filter 过滤操作，返回 true，该值被保留，接着执行 map 操作，值被处理成 3，最后通过 console.log 输出 source 发出 3，执行 filter 过滤操作，返回 false，该值被过滤掉 source 发出 4，执行 filter 过滤操作，返回 true，该值被保留，接着执行 map 操作，值被处理成 5，最后通过 console.log 输出 source 发出 5，执行 filter 过滤操作，返回 false，该值被过滤掉