RxJs相关学习

1. rxjs 是什么？

• rxjs is for handler event 's loadsh
• 处理事件的lodash

2. 如何理解rxjs

• 结合observe pattern ,iterator pattern 和functional programming with collections ，用来满足以一种理想化的方式来管理事件序列所需的一切。
• 记得数据是随着时间的流动而不断改变和流动的，同样的数据输入进来，就是同样的输出
• 就像fp一样，纯的感觉，通过管道来使用数据，一种数据流动的感觉，在rxjs中也如此

3. 拉取与推送

• 分辨出谁是消费者还是生产者（调用方就是消费者，被调用的就是生产者） // 好久没有看了，记忆中的理解是这样的。等等在对对看。
• 简单的例子：

    function see () { // see函数就是生产者
        return 1 }
    see() // 这个就是消费者

• 不过在rxjs中很重要的一点就是没有消费就不会有生产，当进行消费的时候，才开始进行生产，同时这个也是延时计算。如同函数般，当真正地进行调用的时候，才会return结果

4. 突然发现学习Rxjs就像学习Jq一样的，多用就学会了。

• 多使用其中的operate symbol，也要理解Rxjs的适用范围：个人理解是大范围的异步场景下使用的，如聊天。也要理解其中的理念：观察者模式和iterate mode，stream mode。
• 同时要明白其中几个概念：
• 1. observable(可观察对象)：一定意义上就是生产者，是多个值的堕性推送集合
     ``js
     import Rx from 'rxjs/Rx';
     const observable = Rx.observable.of(1,2,3)

- 2. observer(观察者)：消费者，将生产者生产的数据进行消费，由observable发送值的消费者
```js
const observer = {
    next: val => console.log(val),
    error: err => console.log(err),
    complete:() => console.log('complete') }

• 3. subject(中间人,主体)：因为对于observable而言，他们都是相互独立的，但是在一些场景下面，我们需要第二个observable是基于第一个observable的来进行送出数据的，这个时候就要一个中转站来帮忙了。同时这个中转站相当于广播一样，可以让多个observer进行送值

const resource = Rx.observable.interval(100).take(4),
a,b =  {
    next: val => console.log(val),
    error: err => console.log(err),
    complete:() => console.log('complete') },
sub = Rx.Subject();
sub.subscribe(resource);
sub.subscribe(a);

• 4. scheduler(调度者)：对于observable而言，我们有时候很难确定其中的数据来源是sync或者是async,和怎么何时去发送数据，这个时候就需要scheduler来帮忙了。

const observable=Rx.observable.interval(100).take(4);
console.log('11')
observable.observerOn(Rx.Scheduler.async).subscribe(val=>console.log(val))
console.log('22')
// 11 22- 1-2-3-4

• 5. subscription(订阅)：在观察者对可观察对象进行订阅的过程，其也是个对象，表示可清理的资源对象，毕竟对于数据而言，当用户不需要的时候，我们就应该清理数据，不然早晚要爆内存。
• 6. operator(操作符)：对observable送出的元素进行操作组合来满足需求

5. 学习的动力，是为了更好地提升自己，毕竟想自己做出来的东西，能让亿万人群使用。当然money is power。

// 首先要有个observable // 让其成为生产者去生产我们所需要的东西。这一过程就需要我们去看到底项目中需要什么数据，然后我们怎么去生产 （观察者模式就体现出来了，生产者一生产出数据，就让订阅者去消费此数据）

const obs = Rx.observable.create(subscribe => {
    subscribe.next(1);
    subscribe.next(3);
    subscribe.complete(); 
}) // 到此，我们已经建立了生产者obs,其生产的数据我们也编写好了，数据是1,3，// 然后就要考虑去写消费者了 ，不然生产出的数据不被消费的话，数据失去了意义。

// 建立消费者进行数据的消费 // 就是订阅模式中的订阅
// 然后通过next 进行数据的分步骤地消费，这个next就是体现iterate mode的地方。
// es6中引入迭代器的概念：iterator是一种机制，为不同的数据结构提供统一的访问机制，只要部署iterator机制，就能遍历其。
// 如果这样不明白的话，想想看generator 生成器。其中就运用了iterator的概念；

function * generator(){
    yield 1;
    yield 2;
}

const gen = generator; // 写错了，应该是const gen = generator();
gen.next() // 1;
gen.next() // 2; 
// 以上就是生成器中运用

obs.subscribe({
    next: val => console.log(val), // next来消费数据
    error: err => console.log(err), // 用来报错
    complete:() => console.log('complete') // 当数据传递完成就是进入complete status
}) 
// 当我们使用完所有的数据，并不在需要observable的时候，我们就要卸载其，相当于订阅发布模式中卸载
// 使用unsubscrible() 操作符
setTimeout(()=>{ obs.unsubscrible()} ,2000); // 2000ms之后卸载observable
// 以上便是rxjs的过程，剩下的就是学习操作符，就相当学习jq吧。还是要多用

6. operate symbol

1. create // 创造一个observable

const obs = Rx.Observable
    .create(function (observer) {
        observer.next(1);
        observer.next(2);
        // 可以改写成of的形式 看下面例子
        observer.complete();
    });

2. of // 当我们想要同步地传递某些值的时候，用来释放连续的值

const anthorObs = Rx.Observable
    .of(1, 2) // 替换上个例子
    .subscribe({
        next: val => console.log(val),
        error: err => console.log(err),
        complete: () => console.log('complete')
    })

3. from // 接受任何可列举的参数  // 例如iterator , set, weakset ,string,promise

// const arr = [1, 2, '3', 'komolei'];
// const arr = 'string';
// const arr= new Set([2,3,4]); // 发现很久不使用set，就会忘记，还是要多看es6啊
// 对于promise也可以使用fromPromise 
const arr = new Promise((res, rej) => {
    setTimeout(() => {
        rej(111)
    }, 2000);
    res(111);
})
Rx.Observable
    // .from(arr) 
    .fromPromise(arr) //当使用promise的时候,可以使用
    // .empty() // 空，直接进入compete // 表示其没有做任何事情
    // .never() // 一直存在的却没有都不做的observable
    // .throw('error is komolei') // 只做一件事就是抛出错误
    // .interval(1000) // 每一秒送出一个自增的数字 1s之后送出0,2s之后送出1...依次如许
    // .timer(1000,10000) // 可以指定时间，第一个参数表示第一个值等待的时间，第二个参数表示接下里的值间隔的时间
    // 1s之后送出0，之后每隔10s送出值
    .subscribe({
      next: val => console.log(val),
      error: err => console.log("error is ", err),
      complete: () => console.log("complete")
})

提示

还有挺多的操作符，我就不举例子。大家有兴趣就看link
我基本上都按照上面的文章看下来，敲下来的。讲的很不错的。当然官方文档中文，官方文档毕竟要经常读的。毕竟在jq时代，我也不知道记jq的api，都是按照需求，查文档来实现相关逻辑的。