RxJS学习笔记1

前置：我目前的学习资料是30天精通RxJS，那个时候的RxJS是5.x版本，而目前最新版本是RxJS 6，所以资料会放一部分5.x的代码，我也会自己将他转录成RxJS6的版本，可以做一个对比。
学习前置：需要JavaScript的相关知识，了解Ajax，会用控制台，最好有ES6和node.js的基础。
在线代码平台：JS Bin

---

为什么学习RxJS

目前刚进公司，权限很多都没批下来，因为公司的前端框架用的是Angular，而Angular的脚手架工具自带RxJS的包，所以准备自学一下。
一接触感觉这个库真的很不错，首先他并不是依赖于Angular的一个库，无论你使用React，Angular甚至是原生JavaScript，都可以使用这个库，据说在新的ES版本中正打算将其直接引入原生的JavaScript中。这也就意味着学习RxJS不需要有Angular的前置技能需求，不需要你了解前端的MVVM框架，也不需要了解TypeScript，只需要有原生JavaScript的基础以及对异步有初步的了解，懂得JavaScript中部分异步（setInterval，setTimeout以及ajax等等）的内容便可以学习了。
其次使用RxJS能简化很多涉及到异步执行的操作，在处理异步方面有点类似Promise，可以很好的处理异步信息，不会陷入无限多的回调函数，使得异步调用的过程清晰而有条理；同时也支持同步信息的处理，也可以将同步数据转化成异步输出的信息。
同时RxJS提供了丰富的operator可以对Observable进行处理，这一部分很像LinQ，数据的处理也同LinQ一样非常直观，这是promise所不具备的功能。
而与async/await相比，无论对于学习来说还是对开发来说都相当利于理解，学习成本更低。

---

RxJS基础部分：安装与引用

• 学习5.x的可以不需要安装node.js
  页面中引入RxJS

• 如果希望学习6.x的需要一些es6以及nodejs的基础
  1.在官网下载并安装node.js
  2.1.通过cmd输入如下命令安装angular脚手架npm install -g @angular/cli
  2.2.不希望学习Angular的可以直接安装RxJSnpm install -g rxjs
  3.在代码中import { 你需要使用的模块名 } from 'rxjs'
  需要引用哪些模块我将会在代码中给出。

5.x版本以及6.x版本理念是相同的，只不过代码版式略有不同。

---

RxJS基础部分：Observable

observable是RxJS的核心之一，直译是可观测的物体，在实例中一般是我们的所需要获取的数据源，以下是一段简单的创建observable对象的代码。

//5.x版本
var observable = Rx.Observable  // 创建一个observable对象.create(function(observer) {
        observer.next('Jerry'); // 同步部分
        observer.next('Anna');  
        setTimeout(() => {      // 异步部分
            observer.next('RxJS!');
            observer.complete();  //停止observable，此后部分不会被显示。
            observer.next("not work");
        }, 300)
    })
//6.x版本，可以发现这里没有Rx.
//你需要在这之前import ｛Observable｝ from 'rxjs'
  var observable = Observable.create(observer => {
    observer.next("Jerry");
    observer.next("Anna");
    setTimeout(() => {      
        observer.next('RxJS!');
        observer.complete();  
        observer.next("not work");
    }, 300)
  });

create()方法是直接创建一个observable对象的方法，该方法的参数是一个函数，其中规划了observable将来的走向。
我们一般不会再实例中直接这样定义一个人为的observable，不过这有助于我们理解observable内的三个命令（上面有两个）。
一个是next()，next顾名思义下一个数据，指的是observable中将会被观测到的下一个数据，这里的observer.next()中的参数则会作为observable的输出。
第二个是complete()，observable在没有complete前将会一直打开，complete则会关闭这个observable，之后再输出的next将不会有反应，就如同上述代码的not work，将是不会被输出的。

看到这里，有自己试着写代码的人肯定会问我，不止not work，我在浏览器里什么都没有看见，这个代码是不是写错了？

代码并没有错，但observable只是一个可以被观察的对象，世间有千千万万可以被观测的东西，只有你去注意，才能注意到事物发出的信息，这个注意的动作，叫做subscribe。

---

RxJS基础部分：Subscribe

试着在上述代码下加上如下代码（这里5.x和6.x的写法是一样的，以后没有特别提示RxJs的版本的代码将会是两者通用的），摁下F12，进入console，观察一下控制台的输出是否和注释相同。

console.log('start');
observable.subscribe(function(value) {  
// 订阅这个observable对象，并为其设置观察者方法。
    console.log(value);
});
console.log('end');
//start
//Jerry
//Anna
//end
//RxJS!

正如上一小节所说，RxJS具有同时处理同步和异步的能力，我们可以发现同步输出的Jerry与Anna插在了start与end之间，而异步输出的RxJS!则在end之后输出，complete之后的not work则没有出现。
大家可以试试把comlete放到setTimeout的外面一试，这样更能证明observable同时处理同步以及异步的能力。

subscribe不仅只有处理next的能力，和promise类似，subscribe有自己的对于不同状态的处理，请看如下代码：

observable.subscribe( {
    next: function(value) {      //next()走这里
           console.log(value);
    },
    error: function(error) {      // 出现异常走这里
           console.log('Error: ', error)
    },
    complete: function() {        //complete()走这里
           console.log('complete')
    }
})
//lambda表达式写法
observable.subscribe(
  v => { console.log(v); },
  e => { console.log('Error: ', e); },
  () => { console.log('complete') }
)

subscribe可以传入三个函数以来应对三个不同的情况
第一个函数参数用于处理next()
第二个函数参数用于处理内部处理过程中抛出的异常
第三个函数则用于处理complete信号，可以用上述代码替换最早的subscribe代码，看看情况有什么变化。

subscribe也有一个自己的返回值，是一个subscription对象，我们可以利用这个对象的unsubscribe方法去结束某些无法complete的observable（未来我们会见到不少）。

var _subscription = observable.subscribe(function({
  ......
}))
_subscription.unsubscribe();

---

本章小结

这一小节的内容相对简单，主要介绍了如何引用RxJS以及RxJS最基础也是最核心的两个部分。
下一章我们将会接触到另一个核心部分，operator，操作符。

附录

30天精通RxJS，我是在readilen的上阅读的转载，原作者应该是台湾的一位前端工程师Jerry Hong，有兴趣的可以去拜读一下原文，有很多概念性的东西我没有提到，我这篇主要工作是自己总结并分享我的学习记录，并将老版本更新为新版本代码。
其中大部分思考与看法源于个人，如果有错误的话希望各位不吝赐教，这两天我大概学习了十多章，这个周末我会尽快把这些整理出来。