這是 Jerry 2021 年的第 42 篇文章，也是汪子熙公眾號總共第 319 篇原創文章。

Jerry 在從事 SAP Commerce Cloud 前臺 Angular 開發時，腦子裡始終記掛著自己曾經習得的 SAP UI5 開發技術。我刻意要求自己將 SAP UI5 和 Angular 各方面做對比，只希望自己能在這兩個前端開發框架上，都有一定的技術積累。

最近遇到 SAP 電商雲前臺開發的一個問題，涉及到 CombineLatest 這個運算子的用法，所以有了這篇文章。

在 SAP 電商雲原始碼里根據關鍵字 CombineLatest 進行搜尋，得到 170 條搜尋結果。這說明其在 SAP 電商雲前臺開發裡使用是相當廣泛的。

![](https://img-blog.csdnimg.cn/img_convert/cb7e50fad2bcdbf6af59aa4423b53848.png)

那麼這個 CombineLatest 運算子，是應用在什麼樣的業務場景下呢？答案是響應式程式設計 (Reactive Programming) 領域。

Jerry 之前的文章,[**Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490911&idx=1&sn=ab86c37e6ceb32b5037bce86bf7ea69f&chksm=ead5afc8dda226deb2e9bba385fed2397ddc7f746360200bf21d4f22bf57dd84b444dcd9663e&scene=21#wechat_redirect),曾經提到過 SAP Commerce Cloud 新一代基於開源專案 Spartacus 專案的前端介面，支援響應式 **(****Responsive****) **佈局和自適應 **(****Adaptive****) **佈局的特性。再加上本文的響應式 **(****Reactive****) **程式設計，這三個形容詞，我剛開始接觸的時候覺得很容易弄混淆。

* Responsive 設計：響應式設計透過各種前端技術，為頁面元素賦予了根據螢幕解析度的變化而自動調整顯示行為，以達到最佳顯示效果的能力。

* Adaptive 設計：為不同類別的裝置分別實現不同的頁面，檢測到裝置解析度後呼叫對應的網頁。

* Reactive 程式設計：響應式程式設計是一種程式設計風格的名稱，是我們解決非同步和併發領域程式設計問題的一把利器。響應式程式設計通常包含事件驅動，推送機制，觀察者釋出者模式等特徵, 本質上工作於非同步資料流上。響應式程式設計構建出的事件反應系統具備高度的可擴充套件性，本文後續會透過例子給大家展示。

為了降低例子的複雜度，便於大家理解，Jerry 把之前在 SAP Commerce Cloud 中遇到的問題，抽象成一個簡單的模型，分別用 SAP UI5 傳統的事件處理方式，和使用 Angular RxJs 響應式程式設計庫兩種方法分別實現，大家從中可以感受差異。

首先用 SAP UI5 實現該模型。繪製一個 Red 和 一個 Black 按鈕，點選後，其各自的計數器加一。同時，還有第三個計數器 Total,無論哪種按鈕被點選，這個 Total 計數器也加一。

下圖狀態表明，當前 Red 按鈕被點選 5 次，Black 按鈕被點選 2 次。

![](https://img-blog.csdnimg.cn/img_convert/a4130cd9c271204a3a20fca3d2cd916a.png)

我給檢視控制器繫結了一個 JSON 模型，裡面包含了 red, black, total 三個屬性，分別繫結到 XML 檢視的三個計數器裡。當兩個按鈕被點選時，觸發 Press 事件，對應的處理函式 onPress 被呼叫，在函式內更新對應計數器的值。

![](https://img-blog.csdnimg.cn/img_convert/aa29e6ce97857cc18566231185c90955.png)

![](https://img-blog.csdnimg.cn/img_convert/6cd72d45d54f47a192f454dfdd3b7e29.png)

這個 SAP UI5 應用的實現原始碼可以在這個[連結](https://github.com/wangzixi-diablo/ui5-toolset/tree/main/combineLatest)獲得。

再來了解如何使用響應式程式設計思想解決這個問題。

本文後半部分的 Angular 應用，採用響應式程式設計模式實現了同樣的需求，程式設計工具庫選擇了 RxJs，一個響應式程式設計領域裡大名鼎鼎的工具庫，同時也以陡峭的學習曲線著稱。

RxJs，全稱 Reactive Extensions Library for JavaScript.

![](https://img-blog.csdnimg.cn/img_convert/ca8f7c3ff615e7ecec489ffa8959fc8f.png)

Jerry 曾經錄製了一個簡單的影片，介紹了使用 SAP UI5  和 Angular RxJs 開發的這兩個應用的執行時效果：

https://www.zhihu.com/zvideo/1388459864507777024

本文提到的 Angular 應用的原始碼在[此處](https://github.com/wangzixi-diablo/angular-sandbox/tree/master/src/app/rxjs/combine-latest)下載。

下圖是 Angular 應用的檢視，這是一個原生的 HTML 檢視，定義了兩個按鈕，和三個 div 標籤實現的計數器。
![](https://img-blog.csdnimg.cn/img_convert/09964b43007fd3a6d16a5657daede80e.png)

基於 RxJs 的響應式程式設計，核心邏輯就下圖 27 ～ 39 行程式碼，總共 12 行 程式碼，行數雖少，但資訊量巨大。

![](https://img-blog.csdnimg.cn/img_convert/d148daf9fc6b75abad00c1d7c340b88f.png)

Observable(可觀察物件) 是 RxJs 響應式程式設計模式的核心概念，是 RxJs 對非同步事件流的封裝和抽象。

比較下圖，傳統的採取 addEventListener 實現的按鈕事件訂閱機制，以及基於 RxJs Observable 兩種實現方式的比較。

![](https://img-blog.csdnimg.cn/img_convert/191ab0ed1eea275f20c5935ee2bc9e80.png)

有的朋友可能不太理解，引入 Observable 物件這個額外的抽象層之後，似乎沒有什麼用。

那就讓我們回到本文 Angular 這個例子來。

![](https://img-blog.csdnimg.cn/img_convert/7aed758c636fd3fe2ed4cff24be16154.png)

fromEvent 運算子接收兩個引數，產生事件的資料來源(比如頁面控制元件的 DOM 元素，透過 document.getElementById 返回）,和事件名稱 click.

fromEvent 運算子返回一個 Observable 物件，封裝了非同步事件源。這個非同步事件源，隨著使用者的點選，會釋放(RxJs 中的術語稱為 emit) 出包含滑鼠點選明細資訊的 MouseEvent 事件物件。fromEvent 返回的 Observable 物件，隨著時間的推移，釋放出 MouseEvent 物件的行為，描述在下圖第一根橫線中。

橫線裡的 M 圖例，代表 MouseEvent 物件例項，M 圖例所在橫線上的座標，代表該按鈕發生滑鼠點選的時間戳。

![](https://img-blog.csdnimg.cn/img_convert/3b5ea4c0ab3cc0cf10467f776391cdc4.png)

Observable 物件的 pipe 方法，支援傳入各種運算子 (Operators)，比如上圖第二根橫線所示的 pipe(mapTo1(1)). 這個操作的語義是，將使用者點選按鈕時釋放出的 MouseEvent 物件，對映成常數 1. MouseEvent 物件包含了使用者點選事件的明細，比如發生點選的時間戳，點選時滑鼠的 X 和 Y 座標等等。然而我們的需求僅僅是統計點選次數，所以使用 mapTo(1), 將 MouseEvent 物件對映成 1 進行計數即可。然後再使用 Scan 運算子，這個運算子接收一個累加函式作為輸入值，能在其內部維護累加值，實現計數的需求。

可以把 Observable，Operator，Observable 釋放的事件物件，以及訂閱 Observable 的處理函式，分別類比成現實中流水線傳送帶上待加工的零件，以便於理解。

![](https://img-blog.csdnimg.cn/img_convert/8db7aac87bf970b6480d054c4990dd0c.png)

* 上圖左下角的數控機床：相當於 Observable 物件，能源源不斷地釋放待加工的零件，即事件物件。

* 流水線上的零件：相當於 Observable 物件釋放的事件物件。零件會依次經過流水線上的若干機械臂 (Operators)，被後者加工處理。機械臂處理後的零件，外形上有所變化，好比本文例子裡的 MouseEvent，經過 mapTo(1) 處理後，變形為常量 1.

* 機械臂：RxJs 裡眾多的 Operators.

* 流水線終端的操作人員：給最終加工好的零件貼上標籤，好比 Observable 物件的訂閱者(事件物件的消費者)。

再回過頭看本文 Angular 例子中的 combineLatest 運算子。它可以將任意數目的原始 Observable 物件組合起來(下圖紅色輸入引數)，返回一個新的 Observable 物件(下圖藍色輸出引數)，我稱其為聯合非同步事件物件。在本文例子裡，Red 按鈕和 Black 按鈕點選事件對應的 Observable 物件，被 combineLatest 加工，返回的聯合非同步事件物件，再被下圖第 28 行的匿名箭頭函式訂閱。傳入該匿名物件的輸入引數 values 是一個陣列，包含兩個元素，值分別為當前 Red 和 Black 按鈕總的點選次數。這些總的點選次數，就是透過前面描述的 Observable pipe 方法裡傳入的 mapTo 和 scan operator，基於按鈕點選產生的 MouseEvent 加工後生成的值。而 values 陣列裡兩個元素之和，即為當前按鈕總的點選次數。因此程式碼 28 ～ 30 行，依次將 values 陣列中的元素，賦給 red，black 和 total 三個計數器的 innerHTML 屬性，完成介面渲染。

![](https://img-blog.csdnimg.cn/img_convert/2cdd78ce9617e4c6e1918d2cd99d9fc4.png)

下圖綠色虛線方框所示的聯合非同步事件物件，代表了使用者點選 4 次 Red 按鈕，3 次 Black 按鈕之後，該物件釋放出的 MouseEvent 和其被 Operators 處理的過程。下圖底部紫色橫線和藍色的圖例，代表了任意一次使用者點選按鈕之後，total 計數器值的計算邏輯：即當前兩種按鈕總的點選次數求和。

![](https://img-blog.csdnimg.cn/img_convert/273dfdab55bef68e78f3a44f3fd4f713.png)

本文前面提過，基於 RxJs 構造出的響應式程式設計的非同步事件模型，具備高度的可擴充套件性。假設我們按鈕點選計數的需求更進一步：在一秒之內，無論客戶點選多少次按鈕，均只計數一次。

顯然，這是一個典型的函式防抖的場景。Jerry 之前的文章，SAP UI5和Angular的函式防抖(Debounce)和函式節流(Throttle)實現原理介紹，曾經分享過 SAP UI5 如何實現函式防抖。

使用 Angular RxJs，可以更優雅地實現這個需求：在 pipe 方法裡，插入一個防抖運算子 debounceTime 即可。防抖間隔為 1000 毫秒，語義是，無論使用者在 1 秒之內快速點選多少次按鈕，Observable 物件只會傳送 1 個 MouseEvent 物件，給 debounceTime 後續的運算子，即 mapTo(1).

![](https://img-blog.csdnimg.cn/img_convert/f800cb42f72af73d862fcfae1164b1d9.png)

SAP UI5 實現函式防抖思路類似，只是需要應用開發人員自行編寫防抖函式：

![](https://img-blog.csdnimg.cn/img_convert/4badedcb49b6a2810254eb7e7da4569b.png)

最後，總結一下在這個具體的統計按鈕點選次數的例子裡，響應式程式設計從程式設計的角度講，究竟體現出了什麼優勢。

按鈕是生產者，是產生的 MouseEvent 的資料來源，使用者的點選動作，觸發了 MouseEvent 的產生。按鈕點選事件處理函式，相當於 MouseEvent 的消費者。在 SAP UI5 實現的消費者程式碼裡，除了編寫把計數器最新值重新整理到 UI 的邏輯之外，還負責維護計數器的累加值。這就好比現實中流水線終端的工人，既要負責給零件貼標籤，又要負責對零件進行加工。這種做法一定程度上違反了單一職責 (Single Responsibility) 和關注點分離原則 (Seperation of Concerns).

![](https://img-blog.csdnimg.cn/img_convert/ff1d2e5695e29d7e5f0fc8b964ef172d.png)

最理想的情況，就是像 Angular RxJs 那樣，引入 Observable 及 Operators 這一中間層，這樣三種角色各司其職，職責清晰：

* 按鈕負責生成事件物件
* Observable 和 Operators 負責將事件物件進行加工
* 事件物件的訂閱者對加工完畢的事件物件直接進行消費

理解本文介紹的這一系列響應式程式設計的概念，是讀懂 SAP 電商雲原始碼裡這些令人眼花繚亂的 RxJs Operators 鏈式呼叫的基礎。

![](https://img-blog.csdnimg.cn/img_convert/4011b2694b2d37247561acc2707fc1be.png)

> 那人笑了笑，說道：“一個人的武功分了派別，已自落了下乘。姑娘若是跟著我去，包你一新耳目，教你得知武學別有天地。”

Jerry 之前用 SAP UI5 做前端開發，從去年接觸了 Angular 之後，也有了“前端開發別有天地”的感受。

考一考大家，上面這段紅色斜體文字，出自金庸哪部小說裡的哪位高手？感謝閱讀。

響應式程式設計在 SAP 標準產品 UI 開發中的一個實踐

相關文章