天天看點

jq each 異步執行_前端異步程式設計(三篇)

在上文中我們我們依次說到了一些關于前端異步程式設計的實作方案:回調函數、事件監聽、promise、async/await 等,其實上面說到的這些異步實作方案已經夠我們平時開發使用了。接下來我們介紹一下關于前端異步處理的更高層面的實作:響應式程式設計。上文中我們提到關于promise可以簡單總結為:

它是在尚未完成且即将在未來某一時間點完成的異步操作。

那麼響應式程式設計的提出又解決了一些什麼樣問題呢?接下來我一起學習一下關于前端的響應式程式設計。

1、響應式程式設計了解

響應式程式設計:

面向資料流和變化傳播的程式設計範式。

對于這個官方說法可能有點難以了解,下面來說說我自己的了解吧。先提取兩個重要概念:

資料流、變化傳播 資料流:

它是一個一組有序,有起點和終點的位元組的資料序列。在前端我們可以把變量、使用者操作、緩存、資料結構等符合這個條件的,都可以把它了解成資料流。

變化傳播

:資料流我們可以把它當成一個實際的執行過程,那麼我們想要觀察這個過程或者對這個過程做一些自定義的操作,然後做出相應的響應便可以了解為變化傳播

2、響應式程式設計構成

響應式程式設計其實并不是什麼新的思想,它其實就是結合了其他的一些優秀思想,然後形成的一個新的程式設計範式。在了解了一些設計模式及構想後,我們再掉過頭去看一些架構的源碼實作也就相對較為好了解。下面我們看看他涉及哪些設計思想。

2.1、觀察者模式

在上文中我們說過了關于觀察者模式的設計思想。它存在一個消息中心,我們可以把它看做是一個收集異步事件流的管理中心,我們可以通過它來觀察流、并對事件流做一些自定義操作。進而對流的流向及變化過程達到監聽的效果。

2.2、疊代器模式

這個設計模式可能對我們來說都不陌生,就好比我們日常開法中每個疊代一樣,它提供一種順序通路一個聚合對象的每一個元素,又不會暴露該對象的内部結構的統一接口。是以該模式的核心在于實作一個統一周遊的接口。在前端的使用中,該疊代器分為内部疊代器和外部疊代器。

2.2.1、内部疊代器 :一般我們常見的如:for...of、jq中的$each、v-for 、ng-for等,它擁有一次調用,控制整個疊代過程特點。

2.2.2、外部疊代器:在es6 可通過generator來實作一個外部疊代器。

jq each 異步執行_前端異步程式設計(三篇)

由上圖可以看出外部疊代器需要手動控制下一個疊代項,是以外部疊代器能夠更靈活的應對複雜的疊代需求。

在響應式程式設計中,每一個事件流都能通過在訂閱消息時,都可以通過疊代器模式來對事件流做自定義的處理,而不用關心每一層處理具體的實作方式。

2.3、函數式程式設計

在上面我們說了可通過觀察者來監聽事件流的動态,通過疊代器自定義事件流的處理。那麼我們應該怎樣去處理關于流的一些相關資訊呢。是以我們需要一些函數來解決一些對應的問題。

函數式程式設計更多的是關心資料的映射,更簡單的來說,就是隻關心資料處理的結果,而不是資料處理的過程。

它是通過聲明純函數的方式,在不修改原始資料的情況下的一種程式設計範式

它可以通過類似指針的方式實作高階函數,且不會破壞原始資料的完整性,使得它在程式設計領域得到了廣泛的應用。

3、前端中的響應式程式設計代表庫RXJS

rxjs是前端響應式程式設計的代表庫,是觀察者模式、疊代器模式、函數式程式設計的結合體。他是angular2.0+以上版本的內建庫,它同promise一樣也是觀察者模式的js實作。 下面來對比一下promise 、async、rxjs。

jq each 異步執行_前端異步程式設計(三篇)

本圖不為官方資料,隻為個人使用體驗對比

對個人而言rxjs以流的形式來程式設計,通過管道的形式來控制流,管道中又有很多的聚合函數,友善開發者使用,進而大大的提高了開發的效率。但是從項目的難易程度來說,rxjs更适合處理一寫複雜的異步事件流,對于一些單一的異步事件,promise及async/await 及相應的庫,已經能滿足我們開發需求,而不必要去引入新的庫。

總結:

前端異步程式設計中我們整理這這麼多關于異步程式設計的實作方案,我們可以根據自己的需求采用不同的方案來完成自己的目标。每一種實作方案都有它自己的解決問題的領域,我們應該更多的去了解方案的優越性與弊端,進而挑選出更為适合的解決方案,在前人的基礎上,發揮個人的擴充空間,在解決實際問題是手到擒來。

下一篇:前端中的面向對象程式設計(一篇)