RxWX又添新成員

RxWX簡介：RxWX是可以讓你寫出更高效更優雅微信小程序的開源項目，它主要完成了兩項工作：將RxJS移植到小程序端和將wx原生API轉化成Observable對象。

項目地址：https://github.com/yalishizhude/RxWX

npm模塊名：rxjs-wx

感謝開發者的支持和關注，使得RxWX項目不斷迭代和進步，新版本得RxWX根據小程序新的API和issue中大家提出的問題，進行了一些優化和修復。

RxWX-seed

雖然RxWX是結構簡單、無依賴的第三方JavaScript模塊（只有兩個js文件），可直接在項目中引用。但是如果有個開箱即用的項目，不但能引入了RxWX，並能給出一些適當的示例代碼，在搭建新項目的時候會方便很多。RxWX-seed就是這樣的一個項目。

輕量

基於小程序默認初始化項目修改，項目結構基本保持與小程序開發工具提供的默認的初始化項目一致，只包含兩個頁面——index和logs。

純粹

相對於小程序默認初始化項目，只在utils目錄中引入了RxWX.js和Rx.js。其中Rx.js為RxJS在小程序中的可用版本，而RxWX.js則基於RxJS對小程序全局對象wx的API進行的封裝。

規範

將app.js、pages/index/index.js、pages/logs/logs.js業務邏輯中的wx替換成了rxwx對象，對原生調用方式進行了替換，使用封裝後的API和操作符來實現原來的邏輯，相當於簡單的示例代碼。

RxWX-wepy-example與RxWX-example

在上一個版本的RxWX中，示例項目被放入example目錄中。雖然這樣可以快方便地看示例，但是缺點也很明顯：每次通過GitHub下載源碼或者通過npm安裝rxjs-wx時，將會下載冗餘的示例代碼，而這部分代碼比項目本身提交要大很多。增加了開發者的下載時間，所以決定將示例代碼分離成單獨地項目。

這裡將原生小程序示例拆分成了RxWX-example，在wepy中使用RxWX地示例拆分成了RxWX-wepy-example。

RxWX的issue

RxWX項目發布後，GitHub上的issue中提出了幾個在README中未提到的，卻又有價值的問題，這裡補充一下。

終止請求

發起網路請求的API——wx.request在1.4.0版本之後加入了一個新的功能：在調用wx.request之後會返回一個實例，這個實例提供了一個abort函數，用來取消請求。

由於RxWX的request函數返回的是一個Observable對象，所以無法再返回請求實例，但是可以通過Observable對象的unsubscribe函數來取消訂閱，從而忽略請求返回的結果，不執行對應的操作。

執行效果基本相同，缺點就是無法立即結束小程序的請求。

事件防抖

小程序中綁定事件非常簡單，但是有時候我們希望對事件響應邏輯進行特殊處理，例如下面這段代碼：

如果你手速夠快（或者事件處理邏輯消耗時間較長，造成頁面的短暫卡頓），在頁面跳轉之前進行多次點擊的話會發生多次頁面跳轉，從而緩存多個頁面，後退時需要多次點擊才能退回到當前頁面，這時候需要防抖操作來避免多次觸發跳轉。

RxJS中就有debounceTime操作符來進行防抖操作，使用RxWX很容以寫成如下的代碼：

但是上面這段代碼並不能達到我們想要的效果，多次點擊仍會觸發多次跳轉，因為每次調用submit函數時都會通過rxwx.navigateTo重新創建一個Observable對象，而這個重新創建的Observable對象都會立即發送跳轉邏輯，無法重複使用或手動調用。

再看看RxJS在Web頁面上的實現。Web頁面上可以通過Observable.fromEvent來代替事件註冊，同時返回一個新的Observable對象，然後再對其進行防抖操作。例如：

然而在小程序中不能這麼寫，因為小程序中沒有DOM。這時我們可以藉助RxJS中另一個重要的對象——Subject，準確地說是使用它生成的實例。

Subject是一種特殊類型的 Observable，它允許將值多播給多個觀察者，不過這在我們這個應用中並不重要，相比Observable，它還支持next（發送值）、error（發出錯誤）和complete（完成發送）函數。我們可以使用next函數來手動發送值。

如果將RxWX的navigateTo返回的Observable對象進行結合，由Subject手動調用即可實現。具體代碼如下：

其他具體優化期待各位讀者在使用中體會~

本文可被轉發或分享，但必須保留完整圖文信息和出處，作者保留追究一切法律責任的權利和手段~

搜索關注公眾號「web學習社」~

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！