angular4里一个响应式编程的小例子

响应式编程

观察者模式与Rxjs

• 响应式编程就是一个观察者模式的实现下边是一个简单的例子

//对一个对象进行观察处理结束后在执行一些方法。
var subscription = Observable.from([1,2,3,4])//可观察者对象 Observerable(l流)
.filter((e)=>e%2 == 0)//对数据进行一些处理
.map((e)=>e*e)//对数据进行一些处理
.subscribe(//订阅Subscription
e=>console.log(e),//观察者Observer  可以处理流中发射出来的元素
err=>console.error(error),//观察者Observer  可以处理流中的异常
()=>console.log("结束了 ！")//观察者Observer 可以在流结束的时候被调用 
//后边的这两个观察者不是必须的可以去掉
); 
//这就是一个最简单的响应式编程，也是一个观察者模式，根据不同的结果进行不同的响应返回

• 可观察者对象 Observerable(l流)：表示一组值或者事件的集合
  
  • 可观察对象可以流，from是发射一些数据，fromevent是发射一些事件等
  • 可观察对象还可以抛出异常
  • 可观察对象还可以发出一个信号告诉观察者流已经结束
• 观察者Observer:一个回调函数的集合，他知道怎样去监听被Observable发送的值
  
  • 观察者可以处理流中发射出来的元素
  • 观察者可以处理流中的异常
  • 观察者可以在流结束的时候被调用
• 订阅Subscription：表示一个可观察者对象，主要用于取消注册(调用subscription.unsubscribe()取消注册订阅)

• 操作符Operators：纯粹的函数，是开发者可以以函数编程的方式处理结合。

  响应式表单需要引入ReactiveFormsModule模块

  • 该模块里边提供的一个FomControld对象是用来处理表单元素的

<!--html-->
<!--绑定搜索表单流-->
<input type="text" placeholder="输入内容" [formControl]="searchInput">

<!--ts-->
import {Component, OnInit} from '@angular/core';
import {FormControl} from "@angular/forms";
@Component({ ...})
export class SearchComponent implements OnInit {
  <!--定义了一个表单流-->
  searchInput: FormControl = new FormControl();
  constructor() {
  <!--观察者模式，当该流的值改变时进行处理-->
    this.searchInput.valueChanges
      .debounceTime(3000)//等待3秒之后在执行下边的观察者
      .subscribe(stockCode => this.getStockInfo(stockCode));
  }
  getStockInfo(stockCode:string) {
    console.log(`获取${stockCode}的股票信息`);
  }
}
<!--这就实现了当按键事件结束3000毫秒后在执行观察者的需求-->