angular4学习笔记（第八章响应式编程篇）

1.Rxjs基础知识

基本概念
1. Observable (可观察对象): 表示一个概念，这个概念是一个可调用的未来值或事件的集合。
2. Observer (观察者): 一个回调函数的集合，它知道如何去监听由 Observable 提供的值。
3. Subscription (订阅): 表示 Observable 的执行，主要用于取消 Observable 的执行。
4. Operators (操作符): 采用函数式编程风格的纯函数 (pure function)，使用像 map、filter、concat、flatMap 等这样的操作符来处理集合。
5. Subject (主体): 相当于 EventEmitter，并且是将值或事件多路推送给多个 Observer 的唯一方式。
6. Schedulers (调度器): 用来控制并发并且是中央集权的调度员，允许我们在发生计算时进行协调，例如 setTimeout 或 requestAnimationFrame 或其他。

RXJS6的变化

引入变化
总而言之：类似于创建之类的用的API都是从rxjs引入的，类似于map 之类的操作都是从rxjs/operators引入的
如果项目升级不能马上更改完全部相关代码的可安装以下东西，可以暂时不用改代码，可以一点点地改，直到改完后吧这个包卸掉，但是对于rxjs6的rename的operator无效，所以，如果有用到rename的API，必须手动修改
```
npm install --save rxjs-compat
```

具体例子（按钮点击事件）

<button #click type="button" (click)="clickEvent()">点击</button>

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { fromEvent, from } from 'rxjs';
import { filter, map } from 'rxjs/operators';
// import "rxjs/add/Observable/fromEvent";  RXJS6之前的引入方式
// import "rxjs/add/operator/map";  RXJS6之前的引入方式

@Component({
  selector: 'app-rxjs-demo',
  templateUrl: './rxjs-demo.component.html',
  styleUrls: ['./rxjs-demo.component.css']
})
export class RxjsDemoComponent implements OnInit {

  @ViewChild('click')
  button: ElementRef

  constructor() { }

  ngOnInit() {

  }

  clickEvent() {

    // 注册并发送事件（RXJS6），静态方法直接调用就可以了
    fromEvent(this.button.nativeElement, 'click')
      .subscribe(
        () => console.log('Clicked!'),
        err => console.error(err),
        () => console.log("结束了")
      );

    // 注册并发送事件（RXJS6之前）
    // Observable.fromEvent(this.button.nativeElement, 'click')
    // .subscribe(
    //   () => console.log('Clicked!'),
    //   err => console.error(err),
    //   () => console.log("结束了")
    // );

    // 注册并发送值（RXJS6）
    from([1, 2, 3, 4]).pipe(
      filter(e => e % 2 == 0),
      map(e => e * e)
    )
      .subscribe(
        e => console.log(e),  
        err => console.error(err),
        () => console.log("结束了")

      )

    // 注册并发送值（RXJS6之前）
    // Observable.from([1, 2, 3, 4])
    //   .filter(e => e % 2 == 0)
    //   .map(e => e * e)
    //   .subscribe(
    //     e => console.log(e),
    //     err => console.error(err),
    //     () => console.log("结束了")
    //   )

  }





}

案例分析
1. 在上面的发送事件例子中
2. Subscription（订阅）：
  
  subscribe(
  
  () => console.log('Clicked!'),
  
  err => console.error(err),
  
  () => console.log("结束了")
  
  );
3. Subject（主体）：（this.button.nativeElement, 'click'）
4. Observable（可观察对象）：fromEvent(返回的还是一个Observable)。
5. Observer（观察者）： Subscribe内部的函数就是观察者。
  
  () => console.log('Clicked!'), 事件成功的回调函数
  
  err => console.error(err), 事件出现错误的回调函数
  
  () => console.log("结束了") 事件结束的回调函数（要么成功要么失败）

拉取与推送（转载）

拉取和推送是两种不同的协议，用来描述数据生产者 (Producer)如何与数据消费者 (Consumer)如何进行通信的。
什么是拉取？ - 在拉取体系中，由消费者来决定何时从生产者那接收数据。生产者本身不知道数据是何时交付到消费者手中的。
什么是推送？ - 在推送体系中，由生产者来决定何时把数据发送给消费者。消费者本身不知道何时会接收到数据。在当今的

JavaScript 世界中，Promises 是最常见的推送体系类型。Promise(生产者) 将一个解析过的值传递给已注册的回调函数(消费者)，但不同于函数的是，由 Promise 来决定何时把值“推送”给回调函数。

RxJS 引入了 Observables，一个新的 JavaScript 推送体系。Observable 是多个值的生产者，并将值“推送”给观察者(消费者)。
Function 是惰性的评估运算，调用时会同步地返回一个单一值。
Generator 是惰性的评估运算，调用时会同步地返回零到(有可能的)无限多个值。返回一个iterators，每次的调用会返回一个值。
Promise 是最终可能(或可能不)返回单个值的运算。通过resolve决定值的返回。
Observable 是惰性的评估运算，它可以从它被调用的时刻起同步或异步地返回零到(有可能的)无限多个值。

这里的惰性的意义是说，需要调用者去调用才会触发结果的返回。上面的方式promise来说，对于回调函数then是在promise resolve值之后才会调用，否则永远不会调用，不管你的then是否存在，其他几种的话，只要调用就已经会返回值了，不管你何时调用，都会有相应的返回值，而不像promise可以决定这个值什么时候返回，是否返回。

2.angular中的响应式编程

响应式编程就是：就是异步数据流编程
案例：现在有个搜素框，我输入东西后就开始进行搜索。我想搜索Alibaba，当我输入A的时候就会触发keyup事件去服务器搜索，当我输入AL的时候也会去服务器搜索。这不是我们想要的。我们想输入完Alibaba后去搜索。这里可以设置一个时间间隔，在这个时间间隔内没有再输入东西的时候就去服务器搜索。这个功能用传统的JavaScript实现起来比较麻烦。
需要在app,module.ts中引入ReactiveFormsModule
创建搜索框
```
<input [formControl]="searchInput">
```

实现响应式功能

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'app-rxjs-ng',
  templateUrl: './rxjs-ng.component.html',
  styleUrls: ['./rxjs-ng.component.css']
})
export class RxjsNgComponent implements OnInit {

  searchInput: FormControl = new FormControl();
  constructor() {
    this.searchInput.valueChanges.pipe(
      debounceTime(500)//设置为500毫秒
    )
      .subscribe(stockCode => this.getInputValue(stockCode));//stockCode就是用户输入的值
  }

  ngOnInit() {
  }

  getInputValue(value: string) {
    console.log(value);
  }
}

angular4学习笔记（第八章 响应式编程篇）

1.Rxjs基础知识

2.angular中的响应式编程

猜你喜欢

angular4学习笔记（第八章响应式编程篇）