响应式编程是以观察者模式为核心的。
观察者模式与RxJs
我们在初始化可观察对象的时候,我们会向观察者对象注册一些观察者对象,当可观察对象里面发生变化时,就会调用观察者里面的一些方法,来把自己的变化告诉观察者,让观察者做一些相应的处理。这样的模式叫做观察者模式。
下面这段代码是典型的观察者模式代码,我们由此介绍一些关于RxJs的概念。
可观察对象Observable(流):表示一组值或者事件的集合
观察者Observer:一个回调函数的集合,它知道怎么去监听被Obervable发送的值
订阅Subscription:表示一个可观察对象,主要用于取消注册
操作符Operators:纯粹的函数,使开发者可以以函数编程的方式处理集合
响应式编程概念
异步数据流编程,可以创建任何事件流。
demo
观察流(数组),选出偶数流,计算平方,打印出来
//app.module
import { FormsModule } from '@angular/forms';
imports: [
FormsModule
]
//bind.component.ts
import { Observable } from 'rxjs';
var subscription = Observable.from([1,2,3,4])
.filter((e)=>e%2==0)//过滤流的所有元素,把偶数过滤出来
.map((e)=>e*e)//映射流,求方
.subscribe(//订阅流
e => console.log(e),
error => console.error(error),
() => console.log("结束啦!")
)
流可以做以下操作
- 发射元素,类型取决于流源头,在这是一个number类型的数组
- 抛出异常
- 发射结束信号
对应的观察者也可以做出以下操作
- 处理流中发射的元素
- 处理流中的异常
- 流结束时调用函数
用响应式编程做事件处理
//html:
<input type="text" (keyup)="onKey($event)">//event对象拥有一组描述事件的属性
//ts:
onKey(event){
console.log(event.target.value);
}
模板本地变量:event.target指向发射事件的HTML元素,而其实,在Angular模版中可以使用本地变量”#” 获得发射事件HTML元素
//html:
<input type="text" #myfile (keyup)="onKey(myfile.value)">
//ts:
onKey(value){
console.log(value);
}
也就是 $event.target 可以用 #myfile来代替
做为一个Angular开发者,你要知道的就是将事件作为永不结束的流
demo2
FormControl,来自RectiveFormsModule(这个就是用来做响应式编程的),代表表单元素,表单元素改变时触发valueChange事件,组成可订阅流
使用FormControl时,需要在modlue同时导入FormsModule和ReactiveFormsModule从@angular/forms模块
写一个输入框,当输入文字暂停500毫秒时,会触发事件打印出输入的文字
//app.module.ts
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
imports: [
FormsModule,
ReactiveFormsModule
]
//html:
<input [formControl]="searchInput">
//[formControl] 表单指令
//searchInput 实例化的FormControl对象,其valueChange可组成订阅流
//ts:
import { FormControl } from '@angular/forms';
import 'rxjs/Rx';
searchInput:FormControl = new FormControl();
ngOnInit() {
this.searchInput.valueChanges
.debounceTime(500)
.subscribe(
e => this.getStock(e)
)
}
getStock(value){
console.log('查找:'+value);
}