響應式程式設計

觀察者模式與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毫秒後在執行觀察者的需求-->