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

响应式编程

观察者模式与Rxjs

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

//对一个对象进行观察处理结束后在执行一些方法。var subscription = Observable.from([1,2,3,4])//可观察者对象 Observerable(l流).filter((e)=>e%2 == 0)//对数据进行一些处理.map((e)=>e*e)//对数据进行一些处理.subscribe(//订阅Subscriptione=>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毫秒后在执行观察者的需求-->