摘要:整個數據流序列
Rxjs入門實踐-各種排序算法排序過程的可視化展示
這幾天學習下《算法》的排序章節,具體見對排序的總結,想著做點東西,能將各種排序算法的排序過程使用Rxjs通過可視化的方式展示出來,正好練系一下Rxjs的使用本文不會太多介紹Rxjs的基本概念,重點介紹如何用響應式編程的思想來實現功能
在線演示地址
源碼
效果圖
需求頁面中包括一個隨機生成300個數字的按鈕和、一個選擇不同排序算法的下拉列表和一個echart渲染的容器元素
點擊按鈕會隨機生成300個隨機數,同時頁面渲染出300個數的柱狀圖,然后選擇一種排序算法后,頁面開始展示排序過程,在排序過程中如果我們切換成另一種排序算法,會停止當前算法的可視化展示,轉而開始新的排序算法的可視化展示
思路要展示出排序算法在排序過程中數組中數據的變化,我們要定期保存一下排序過程中當前數組的快照,然后通過echart展示當前數組的數據,重復這個過程直到排序完成,我們也就有了表示排序過程的一個動畫展示
具體實現在Rxjs中,一切皆是流,要實現這個功能,重要的是確定好數據流,以及數據流在未來一段時間內的變化過程
根據頁面,可以清晰的確定幾個數據流
按鈕點擊操作生成的數據流
const createNumber$ = Rx.Observable.fromEvent(query(".numberCreator"), "click")
切換下拉列表生成的數據流
const select$ = Rx.Observable.fromEvent(query(".sortTypes"), "change")
點擊按鈕生成隨機數組并渲染echart圖表很顯然就用到map和do這兩個operator
createNumber$ .map(e => { return numberCreator() }) .do(nums => { const option = getOption(nums) echartInstance.setOption(option) })
切換下拉列表時我們要得到當前選擇的排序算法的一個標識
let currentType select$ .map(e => e.target) .map(x => x.options[x.selectedIndex].value) .map(type => { return { type, timer:1 } }) .do(x => { currentType = x.type })
下面是重點
只點擊按鈕或者只切換下拉頁面都不應該展示排序過程,只有當兩個事件流都觸發了,并且之后某一個再次觸發的時候才會渲染排序過程的動畫,所以我們需要combineLatest操作符,將兩個數據流合并成一個
const combine$=Rx.Observable.combineLatest( createNumber$, select$ )
現在在combine$數據流中我們就有個隨機數組和排序類型
[Array[300],"1"]
然后就應該排序算法進行工作了,這里思考一下
[] 怎樣來生成我們排序算法排序過程中數據的快照?
[] 生成的數據快照什么時候讓echart來渲染?
對于第一點,我們需要將排序算法封裝成一個自定義的operator,在排序過程中不斷next() 數據快照,
到這里我們的數據流就變成能在未來一段時間內不斷生成新Value的一個數據流
Rx.Observable.prototype.sort = function () { const input = this return Rx.Observable.create((observer) => { input.subscribe((arr) => { const nums = clone(arr[0]) const select = arr[1] const sortMethod = sortTypes[select.type] sortMethod(nums, function (arr) { observer.next({ nums: JSON.parse(JSON.stringify(arr)), select }) }, error => { observer.error(error) }) }, ) }) } combine$.sort()
對于第二點,因為排序算法是非常快的,如果我們subscibe sort()操作符產生的新值就開始渲染echart,頁面上是看不出動畫效果的,所以,我們需要延遲echart渲染圖表的過程,我們需要將sort()觸發的值轉變成一個異步的新事件流并打平到原數據流中
combine$ .sort() .flatMap(obj => { return Rx.Observable.of(obj).delay(100 * obj.select.timer++) })
注意obj.select.timer++,對于sort()前后觸發的兩個值,為了展示出echart渲染的動畫,我們要給它們渲染的時間依次遞增
到這一步,我們的單次功能就能正常進行了,但如果在一個排序動畫過程還沒有結束,我們又點擊了一個新的排序類型,則新舊兩次的還在序列中沒進行的渲染都會依次進行,干擾echart渲染的效果,所以在切換到新的類型時,我們要過濾序列中的值。
combine$ .sort() .flatMap(obj => { return Rx.Observable.of(obj).delay(100 * obj.select.timer++) }) .filter(x => { return x.select.type == currentType }) .do(x => { const option = getOption(x.nums) echartInstance.setOption(option) }) .subscribe(() => { }, null, () => { console.log("complete") })
整個數據流序列
-createNumber$--------------------------------------------------------------------------------- ---------------select$------------------------------------------------------------------------- combineLatest() ---------------------------combine$------------------------------------------------------------ sort() ---------------------------v1 v2 v3 v4 .......v11 v22 v33---------- flatMap() ---------------------------delay1 delay2 delay3 delay4 ....delay11 delay22 delay33-------- filter(currentType==type) ---------------------------delay1 delay2 delay11 delay22 delay33--------------------------
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89226.html
摘要:整個數據流序列 Rxjs入門實踐-各種排序算法排序過程的可視化展示 這幾天學習下《算法》的排序章節,具體見對排序的總結,想著做點東西,能將各種排序算法的排序過程使用Rxjs通過可視化的方式展示出來,正好練系一下Rxjs的使用本文不會太多介紹Rxjs的基本概念,重點介紹如何用響應式編程的思想來實現功能 在線演示地址 源碼 效果圖 showImg(https://segmentfault...
摘要:實現不定期更新技巧前端掘金技巧,偶爾更新。統一播放效果實現打字效果動畫前端掘金前端開源項目周報前端掘金由出品的前端開源項目周報第四期來啦。 Web 推送技術 - 掘金騰訊云技術社區-掘金主頁持續為大家呈現云計算技術文章,歡迎大家關注! 作者:villainthr 摘自 前端小吉米 伴隨著今年 Google I/O 大會的召開,一個很火的概念--Progressive Web Apps ...
閱讀 870·2021-09-02 09:55
閱讀 1495·2019-12-27 12:02
閱讀 1684·2019-08-30 14:24
閱讀 1138·2019-08-30 14:18
閱讀 2750·2019-08-29 13:57
閱讀 2193·2019-08-26 11:51
閱讀 1364·2019-08-26 10:37
閱讀 763·2019-08-23 16:09