摘要：整個(gè)數(shù)據(jù)流序列

這幾天學(xué)習(xí)下《算法》的排序章節(jié)，具體見對(duì)排序的總結(jié),想著做點(diǎn)東西，能將各種排序算法的排序過程使用Rxjs通過可視化的方式展示出來，正好練系一下Rxjs的使用
本文不會(huì)太多介紹Rxjs的基本概念，重點(diǎn)介紹如何用響應(yīng)式編程的思想來實(shí)現(xiàn)功能

在線演示地址

源碼

效果圖

頁面中包括一個(gè)隨機(jī)生成300個(gè)數(shù)字的按鈕和、一個(gè)選擇不同排序算法的下拉列表和一個(gè)echart渲染的容器元素

點(diǎn)擊按鈕會(huì)隨機(jī)生成300個(gè)隨機(jī)數(shù)，同時(shí)頁面渲染出300個(gè)數(shù)的柱狀圖，然后選擇一種排序算法后，頁面開始展示排序過程，在排序過程中如果我們切換成另一種排序算法，會(huì)停止當(dāng)前算法的可視化展示，轉(zhuǎn)而開始新的排序算法的可視化展示

要展示出排序算法在排序過程中數(shù)組中數(shù)據(jù)的變化，我們要定期保存一下排序過程中當(dāng)前數(shù)組的快照，然后通過echart展示當(dāng)前數(shù)組的數(shù)據(jù),重復(fù)這個(gè)過程直到排序完成，我們也就有了表示排序過程的一個(gè)動(dòng)畫展示

在Rxjs中，一切皆是流，要實(shí)現(xiàn)這個(gè)功能，重要的是確定好數(shù)據(jù)流，以及數(shù)據(jù)流在未來一段時(shí)間內(nèi)的變化過程

根據(jù)頁面，可以清晰的確定幾個(gè)數(shù)據(jù)流

按鈕點(diǎn)擊操作生成的數(shù)據(jù)流

const createNumber$ = Rx.Observable.fromEvent(query(".numberCreator"), "click")

切換下拉列表生成的數(shù)據(jù)流

const select$ = Rx.Observable.fromEvent(query(".sortTypes"), "change")

點(diǎn)擊按鈕生成隨機(jī)數(shù)組并渲染echart圖表很顯然就用到map和do這兩個(gè)operator

    createNumber$
    .map(e => {
        return numberCreator()
    })
    .do(nums => {
        const option = getOption(nums)
        echartInstance.setOption(option)
    })
    

切換下拉列表時(shí)我們要得到當(dāng)前選擇的排序算法的一個(gè)標(biāo)識(shí)

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
    })

下面是重點(diǎn)

只點(diǎn)擊按鈕或者只切換下拉頁面都不應(yīng)該展示排序過程，只有當(dāng)兩個(gè)事件流都觸發(fā)了，并且之后某一個(gè)再次觸發(fā)的時(shí)候才會(huì)渲染排序過程的動(dòng)畫，所以我們需要combineLatest操作符,將兩個(gè)數(shù)據(jù)流合并成一個(gè)

const combine$=Rx.Observable.combineLatest(
    createNumber$,
    select$
)

現(xiàn)在在combine$數(shù)據(jù)流中我們就有個(gè)隨機(jī)數(shù)組和排序類型

[Array[300],"1"]

然后就應(yīng)該排序算法進(jìn)行工作了，這里思考一下

[] 怎樣來生成我們排序算法排序過程中數(shù)據(jù)的快照？

[] 生成的數(shù)據(jù)快照什么時(shí)候讓echart來渲染？

對(duì)于第一點(diǎn)，我們需要將排序算法封裝成一個(gè)自定義的operator,在排序過程中不斷next() 數(shù)據(jù)快照,
到這里我們的數(shù)據(jù)流就變成能在未來一段時(shí)間內(nèi)不斷生成新Value的一個(gè)數(shù)據(jù)流

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()

對(duì)于第二點(diǎn)，因?yàn)榕判蛩惴ㄊ欠浅？斓模绻覀僺ubscibe sort()操作符產(chǎn)生的新值就開始渲染echart,頁面上是看不出動(dòng)畫效果的，所以，我們需要延遲echart渲染圖表的過程,我們需要將sort()觸發(fā)的值轉(zhuǎn)變成一個(gè)異步的新事件流并打平到原數(shù)據(jù)流中

combine$
    .sort()
    .flatMap(obj => {
        return Rx.Observable.of(obj).delay(100 * obj.select.timer++)
    })

注意obj.select.timer++，對(duì)于sort()前后觸發(fā)的兩個(gè)值，為了展示出echart渲染的動(dòng)畫，我們要給它們渲染的時(shí)間依次遞增

到這一步，我們的單次功能就能正常進(jìn)行了，但如果在一個(gè)排序動(dòng)畫過程還沒有結(jié)束，我們又點(diǎn)擊了一個(gè)新的排序類型，則新舊兩次的還在序列中沒進(jìn)行的渲染都會(huì)依次進(jìn)行，干擾echart渲染的效果，所以在切換到新的類型時(shí)，我們要過濾序列中的值。

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")
    })

整個(gè)數(shù)據(jù)流序列

   -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--------------------------