RXJ的功能反應性編程簡介

鑰匙要點

• 反應性編程是一種使用並發數據流進行編程的方法，這可能是異步的。它可以應用於編程問題，因為CPU處理由指令和數據組成的信息流。
JavaScript（RXJS）庫的反應性擴展使用方法鏈接並介紹觀察者（生產者）和觀察者（消費者）。這兩種類型的可觀察物是熱可觀察的，即使不訂閱，也可以推動可觀察的觀測值，而冷可觀測值僅在訂閱時才開始推動。 。 可以從數組，承諾，功能和生成器創建> RXJS提供了許多引入並發性的操作員，例如油門，間隔或延遲。這些可用於通過指定的時間間隔匯總事件，或者用於在某個空閒時間後僅啟動請求的節氣門輸入。 > RXJS使JavaScript中的反應性編程更加容易，更有效。它統一了一組簡潔且可複合的方法中反應性編程的一些概念。它還具有有用的擴展，例如RXJS-DOM，它簡化了與DOM的相互作用。
• 本文由MoritzKröger，Bruno Mota和Vildan Softic審查。感謝SitePoint所有的同行評審員製作SitePoint內容的最佳狀態！
>在我們深入研究主題之前，我們必須回答至關重要的問題：什麼是反應性編程？截至今天，最受歡迎的答案是，反應性編程是通過並發數據流進行編程。大多數時候，我們會發現並發單詞被異步取代，但是，稍後我們會在流中看到該流不必異步。
• >很容易看到“一切都是流”方法可以直接應用於我們的編程問題。畢竟，CPU無非是處理由指令和數據組成的信息流的設備。我們的目標是觀察該流並在特定數據的情況下進行轉換。
>

反應性編程的原則並不是JavaScript的全新。我們已經有了屬性綁定，eventEmitter模式或node.js流等屬性。有時，這些方法的優雅性會導致性能下降，過於復雜的抽像或調試問題。通常，與新抽象層的優勢相比，這些缺點是最小的。當然，我們最小的例子將不會反映通常的應用，而是要盡可能簡短和簡潔。

>不用更多的是，讓我們通過使用JavaScript（RXJS）庫的反應性擴展來弄髒我們的手。 RXJS使用了很多鏈接，這是一種流行的技術，在其他庫中也使用。方法鏈條指南（在Ruby的背景下）可在SitePoint上找到。

>流示例

>在我們深入RXJS之前，我們應列出一些示例以後使用。這也將結束對反應性編程和流的簡介。

>

>通常，我們可以區分兩種流：內部和外部。雖然前者可以被視為人為的，但後者來自我們無法控制的來源。可以從我們的代碼（直接或間接）觸發外部流。

>

通常，流不等我們。無論我們是否可以處理它們，它們都會發生。例如，如果我們想在道路上觀察汽車，我們將無法重新啟動汽車。該流是獨立於我們觀察到的獨立的。在RX術語中，我們稱其為a

熱可觀察。 rx還引入了冷可觀察物，其行為更像是標準迭代器，因此流中的信息由每個觀察者的所有項目組成。 >以下圖像說明了一些外部類型的流。我們看到（以前啟動）請求並通常提到了Web掛鉤，以及UI事件（例如鼠標或鍵盤交互）。最後，我們還可以從設備，例如GPS傳感器，加速度計或其他傳感器中接收數據。

>。

>圖像還包含一個流的流，稱為

>消息

。消息可以以幾種形式出現。最簡單的表格之一是我們網站與其他網站之間的通信。其他示例包括與Websocket或Web工人的通信。讓我們看看後者的一些示例代碼。 > >工人的代碼在下面介紹。該代碼試圖從2到10

10 >找到質數。一旦找到一個數字，報告了結果。

> 通常，包括如下的Web Worker（假定在文件prime.js中）。為了簡潔起見，我們跳過檢查網絡工作者的支持和返回結果的合法性。

<span>(function (start<span>, end</span>) {
</span>    <span>var n = start - 1;
</span>
    <span>while (n++         <span>var k = Math.sqrt(n);
</span>        <span>var found = false;
</span>
        <span>for (var i = 2; !found && i             found <span>= n % i === 0;
</span>        <span>}
</span>
        <span>if (!found) {
</span>            <span>postMessage(n.toString());
</span>        <span>}
</span>    <span>}
</span><span>})(2, 1e10);
</span></span></span>

有關網絡工作者的更多詳細信息以及具有JavaScript的多線程的更多詳細信息，請參見文章與Parallel.JS。

的Parallel JavaScript。

考慮到上面的示例，我們知道質數遵循正整數之間的漸近分佈。對於x至∞，我們獲得x / log（x）的分佈。這意味著我們將在開始時看到更多數字。在這裡，支票也便宜得多（即，一開始我們會收到每單位時間的質量數量，而不是以後。）

<span>var worker = new Worker('prime.js');
</span>worker<span>.addEventListener('message', function (ev) {
</span>    <span>var primeNumber = ev.data * 1;
</span>    <span>console.log(primeNumber);
</span><span>}, false);
</span>

）

可以用簡單的時間軸和斑點來說明結果：>

通過查看用戶對搜索框的輸入，可以給出一個無關但類似的示例。最初，用戶可能會熱情地輸入一些要搜索的東西；但是，他的要求越具體，關鍵筆觸之間的時差就越大。提供顯示現場結果的能力絕對是可取的，可以幫助用戶縮小他的要求。但是，我們不希望為每次鑰匙中風執行請求，尤其是因為第一個鍵的執行非常快，而無需思考或需要專業化。

> 在兩種情況下，答案是在給定時間間隔上匯總以前的事件。兩個描述的方案之間的區別在於，在給定時間間隔之後應始終顯示質數（即，某些質子數在介紹中可能會延遲）。相比之下，搜索查詢只有在指定間隔期間未發生密鑰衝程時觸發新請求。因此，一旦檢測到鑰匙中風，計時器即將重置。

rxjs to Rescue RX是一個庫，用於使用可觀察的集合來組成異步和基於事件的程序。它以聲明性的語法和合成性而聞名，同時引入了輕鬆的處理和錯誤模型。考慮到我們以前的示例，我們對處理時間特別感興趣。儘管如此，我們將看到RXJ中還有更多可以從中受益的。 RXJ的基本構建塊是可觀察的（生產者）和觀察者（消費者）。我們已經提到了兩種可觀察到的類型：

>

即使我們不訂閱它們（例如，UI事件），

熱可觀察物也在推動。

>冷可觀察物僅在我們訂閱時才開始推動。如果我們再次訂閱，他們會重新開始。

>

>冷可觀察物通常是指已轉換為在RXJ中使用的數組或單個值。例如，以下代碼可創建一個冷觀察，該冷可觀察到僅在完成之前僅產生一個值：>

我們還可以從可觀察到的創建功能中返回包含清理邏輯的函數。 訂閱可觀察到的
• 獨立於可觀察的類型。對於這兩種類型，我們都可以提供三個功能，以滿足由Onnext，OnError和on Completed組成的通知語法的基本要求。 Onnext回調是強制性的。
作為最佳實踐，我們應使用Dispose方法終止訂閱。這將執行任何必需的清理步驟。否則，可能有可能防止垃圾收集清理未使用的資源。

不訂閱可觀察到的可觀察到的可觀察到的可觀察到的只是可觀察的。然而，也可以使用發布方法將其轉換為熱序列（即，我們執行偽訂閱）。

RXJ中包含的一些幫助者僅處理現有數據結構的轉換。在JavaScript中，我們可能會區分其中三個：

<span>(function (start<span>, end</span>) {
</span>    <span>var n = start - 1;
</span>
    <span>while (n++         <span>var k = Math.sqrt(n);
</span>        <span>var found = false;
</span>
        <span>for (var i = 2; !found && i             found <span>= n % i === 0;
</span>        <span>}
</span>
        <span>if (!found) {
</span>            <span>postMessage(n.toString());
</span>        <span>}
</span>    <span>}
</span><span>})(2, 1e10);
</span></span></span>

>

>返回單個異步結果的承諾，

1. >單個結果的功能，
>
2. 用於提供迭代器的生成器。
後者是ES6的新事物，可以用數組替換（即使這是不良的替代品，應將其視為單個值）。

> rxjs現在帶來了用於提供異步多重（返回）值支持的數據類型。因此，現在填寫了四個像限。

>需要拉動迭代器時，可以按下觀察值的值。一個例子是事件流，我們不能強迫下一個事件發生。我們只能等待被事件循環通知。

>創建或處理可觀察到的大多數幫助者也接受調度程序，該調度程序可以控制訂閱何時啟動和發布通知。我們不會在此處詳細介紹，因為默認調度程序用於大多數實際目的。 RXJ中的許多運算符引入並發性，例如油門，間隔或延遲。現在，我們將再次查看以前的示例，這些助手變得至關重要。

>示例

<span>var worker = new Worker('prime.js');
</span>worker<span>.addEventListener('message', function (ev) {
</span>    <span>var primeNumber = ev.data * 1;
</span>    <span>console.log(primeNumber);
</span><span>}, false);
</span>

首先，讓我們看一下我們的質子數生成器。我們想在給定的時間內匯總結果，以便UI（尤其是在開始時）不必處理太多更新。

>

>在這裡，我們實際上可能想將RXJS的緩衝函數與前面提到的間隔輔助器結合使用。

結果應由以下圖表示。綠色斑點是在指定的時間間隔之後（由用於構造間隔的時間給出的）。在此間隔期間，緩衝區將匯總所有看到的藍色斑點。

此外，我們還可以介紹地圖，這有助於我們轉換數據。例如，我們可能需要轉換收到的事件參數以獲取傳輸數據作為數字。

fromevent函數使用標準事件發射極模式從任何對象構造可觀察到的。緩衝區還將以零長度返回數組，這就是為什麼我們介紹將流將流降低到非空數陣列的原因。最後，在此示例中，我們只對生成的質數數量感興趣。因此，我們映射緩衝區以獲得其長度。

>

>另一個示例是搜索查詢框，應在某個空閒時間後才插入以啟動請求。在這種情況下，有兩個功能可能有用：節氣門功能在指定的時間窗口中產生第一個條目。調試功能產生在指定的時間窗口中看到的最後一個條目。時間窗口也相應地移動（即相對於第一個 /最後一項）。

>我們想實現以下圖所反映的行為。因此，我們將使用訪問機制。

>

>我們想丟棄所有以前的結果，並且僅在時間窗口耗盡之前獲得最後一個結果。假設輸入字段具有ID查詢，我們可以使用以下代碼：>

在此代碼中，窗口設置為300ms。另外，我們限制了至少3個字符的值的查詢，這與以前的查詢不同。這消除了剛剛通過鍵入某些內容並刪除剛剛糾正的輸入的不必要的請求。

整個表達式中有兩個至關重要的部分。一個是使用searchfor將查詢文本轉換為請求，另一個是switch（）函數。後者採用任何返回嵌套可觀察物並僅從最新可觀察到的序列產生值的函數。

<span>(function (start<span>, end</span>) {
</span>    <span>var n = start - 1;
</span>
    <span>while (n++         <span>var k = Math.sqrt(n);
</span>        <span>var found = false;
</span>
        <span>for (var i = 2; !found && i             found <span>= n % i === 0;
</span>        <span>}
</span>
        <span>if (!found) {
</span>            <span>postMessage(n.toString());
</span>        <span>}
</span>    <span>}
</span><span>})(2, 1e10);
</span></span></span>

>

創建請求的函數可以定義如下：>

請注意可觀察到的可觀察到的（可能導致無效的請求導致未定義），這就是為什麼我們鏈接switch（）和where（）。

結論

rxjs在JavaScript中使反應性編程成為一個快樂的現實。作為替代方案，還有培根。但是，RXJS最好的事情之一是RX本身，它在許多平台上都可以使用。這使得向其他語言，平台或系統的過渡非常容易。它還在一系列簡潔且可複合的方法中統一了反應性編程的一些概念。此外，存在幾種非常有用的擴展，例如RXJS-DOM，這簡化了與DOM的相互作用。

<span>var worker = new Worker('prime.js');
</span>worker<span>.addEventListener('message', function (ev) {
</span>    <span>var primeNumber = ev.data * 1;
</span>    <span>console.log(primeNumber);
</span><span>}, false);
</span>

您在哪裡看到RXJS Shine？

經常詢問有關功能反應性編程的問題

>功能編程和功能反應式編程之間有什麼區別？ ，另一方面，FRP是FP的變體，涉及異步數據流。它將反應性編程模型與功能編程結合在一起。在FRP中，您可以表達靜態（例如，數組）和動態（例如，鼠標點擊，Web請求）數據流並對它們的更改做出反應。 rxjs如何適合功能反應性編程？ 🎜> rxjs（JavaScript的反應性擴展）是一個用於使用可觀察力的反應性編程的庫，可以更容易地組成異步或基於回調的代碼。這使其非常適合功能反應性編程。使用RXJS，您可以使用其提供的運算符從各種來源創建數據流，並可以轉換，組合，操縱或對這些數據流進行反應。

> RXJS中的可觀察力是什麼？ RXJS中的核心概念。它們是數據流，可以隨著時間的推移發出多個值。他們可以發出三種類型的值：下一步，錯誤和完成。 “下一個”值可以是任何JavaScript對象，“錯誤”是一個錯誤對象，當出現問題時，“完整”沒有任何值，它只是表明可觀察到的可觀察到不會再發射的值。 >
>如何處理rxjs中的錯誤？

rxjs提供了幾個操作員來處理錯誤，例如catcherror和重試錯誤。 Catcheror操作員在可觀察到的源中捕獲了錯誤，並使用新的可觀察或錯誤繼續流。重試操作員在失敗時可觀察到的源可觀察到。

> rxjs中的運算符是什麼？

運算符是純粹的功能，可以啟用強大的功能編程方式，以處理與'Map之類的操作的收藏'，''，'''，concat'，“減少”等。 RXJ中有數十個可用的操作員可用於處理集合的複雜操作，無論它們是項目的數組，事件流還是什至承諾。

如何測試我的rxjs代碼？

我可以使用具有角度的rxjs嗎？它在Angular的HTTP模塊中以及用於自定義事件的EventEmitter類中使用。

>

>承諾和可觀察到的東西有什麼區別？承諾是可能尚不可用的價值。它只能解決（實現或拒絕）一次。另一方面，可觀察到的值是可以發出零或更多值的值，並且可以從。

>

中訂閱或取消訂閱的值。當您訂閱可觀察到的時，您將獲得一個訂閱對象。您可以在此對像上調用Unberscribe方法以取消訂閱並停止接收數據。

>

rxjs中的主題是什麼主題？多播歸於許多觀察者。與普通的觀察者不同，受試者維持許多聽眾的註冊表。

>

以上是RXJ的功能反應性編程簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！