這次帶給大家rxjs的詳解，使用rxjs的注意事項有哪些，以下就是實戰案例，一起來看一下。
rxjs(Reactive Extensions for JavaScript)是Javascript的響應式擴展, 響應式的思路是把隨時間不斷變化的資料、狀態、事件等轉成可被觀察的序列(Observable Sequence)，然後訂閱序列中物件的變化，一旦變化，就會執行事先安排好的各種轉換和操作。
rxjs適用於非同步場景，可用於最佳化前端互動中的請求、事件。
rxjs特點
統一非同步程式設計的規範，不管是Promise、ajax或事件，通通封裝成序列(Observable Sequence)，一旦有非同步環節發生變更，觀察序列即可截獲發生變更的資訊。
前端業務層和展現層解耦，例如展現層不需要關心指定事件觸發時和DOM無關的處理邏輯。同時業務層也能組裝非同步操作中多個非同步邏輯之間的關係，無需暴露給展現層。展現層關心的是：非同步操作其中環節的資料變化。
rxjs開發業務層具有高彈性，高穩定性，高即時性等特性。
rxjs實例概念
Observable: 可觀察的資料序列.
Observer: 觀察者實例，決定何時觀察指定資料.
Subscription:觀察資料序列返回訂閱實例.
Operators: Observable的操作方法，包括轉換資料序列，過濾等，所有的Operators方法接受的參數是上一次發送的資料變更的值，而方法返回值稱為發射新資料變更.
Subject: 被觀察對象.
Schedulers: 控制調度並發，即當Observable接受Subject的變更回應時，可以透過scheduler設定回應方式，目前內建的回應可以呼叫Object.keys(Rx.Subject)查看。
Observable四個 生命週期：建立 、訂閱 、執行 、銷毀。
建立Obervable，傳回被觀察的序列來源實例，該實例不具備傳送資料的能力，相較之下透過new Rx.Subject所建立的觀察物件實例具備傳送資料來源的能力。
透過序列來源實例可以訂閱序列發射新資料變更時的回應方法（回呼方法）。
回應的動作其實就是Observable的執行。
透過序列來源實例可以銷毀，而當訂閱方法發生錯誤時也會自動銷毀。
序列來源實例的catch方法可以捕捉訂閱方法發生的錯誤，同時序列來源實例可以接受從catch方法傳回值，作為新的序列來源實例。
rxjs運算子
rxjs中提供了許多運算符，用於建立Observable物件
import Rx from 'rxjs';
# create
let observable = Rx.Observable
.create((observer)=> {
observer.next('hello');
observer.next('world');
});
//订阅Observable observable.subscribe((value)=> { console.log(value);
});輸出：hello
world
of
轉換值變數
let observable = Rx.Observable.of('hello', 'world');
observable.subscribe({ next: (value)=> { console.log(value);
}, complete: ()=> { console.log('complete');
}, error: (error)=> { console.log(error);
}
});輸出：hello
world
complete
from
轉換陣列變數
let array = [1, 2, 3];let observable = Rx.Observable.from(array);
observable.subscribe({ next: (value)=> { console.log(value);
}, complete: ()=> { console.log('complete');
}, error: (error)=> { console.log(error);
}
});輸出：1
2 3 complete fromEvent
轉換事件變數
Rx.Observable.fromEvent(document.querySelector('button'), 'click'); fromPromise
轉換Promise(承諾)變數
let observable = Rx.Observable
.fromPromise(new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello world');
},3000)
}));
observable.subscribe({ next: (value)=> { console.log(value);
}, complete: ()=> { console.log('complete');
}, error: (error)=> { console.log(error);
}
});輸出：hello world
complete
數值類型的參數，用來表示定時的間隔。
let observable = Rx.Observable.interval(1000);
observable.subscribe({ next: (value)=> { console.log(value);
}, complete: ()=> { console.log('complete');
}, error: (error)=> { console.log(error);
}
}); 1
2
...observable.subscribe({ next: (value)=> { console.log(value);
}, complete: ()=> { console.log('complete');
}, error: (error)=> { console.log(error);
}
}); 1 //5s後
2 /5s後
...
每個JavaScript函數都是一個Pull體系，函數是資料的生產者，呼叫函數的程式碼透過拉出單一的回傳值來消費該資料。
ES6中的iterator迭代器和generator
產生器是另一個Pull體系，呼叫iterator.next()的程式碼是消費者，可從中拉取多個值。
在Push體系中，資料的生產者決定何時發送資料給消費者，消費者不會在接收資料之前意識到它將要接收這個資料。
Promise是最常見的Push體系，一個Promise(資料的生產者)發送一個resolved(成功狀態)或reject(失敗狀態)來執行一個回調(資料消費者)，但是不同於函數的地方的是：Promise決定何時資料才被推送至這個回呼函數。
RxJS引進了Observables(可觀察物件)，一個全新的Push體系。一個可觀察物件是一個產生多值的生產者，當產生新資料的時候，會主動推送給Observer(觀察者)。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是rxjs的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
