RxJS 实现摩斯密码(Morse) 【内附脑图】

参加 2018 ngChina 开发者大会，特别喜欢 Michael Hladky 奥地利帅哥的 RxJS 分享，如今拿出来好好学习工做坊的内容（工做坊Demo地址），结合这个示例，作了一个改进版本，实现更简洁，逻辑更直观。

1、摩斯密码是什么？

了解者可跳过次章节

摩斯密码(Morse)，是一种时通时断的信号代码，这种信号代码经过不一样的排列组合来表达不一样的英文字母、数字和标点符号等。
地球人都知道的 SOS 求救信号，就是 Morse，三短（S） 三长（O） 三短（S）。

信号对应表以下：

2、业务逻辑分析

分析关键步骤，很巧，和把大象装进冰箱里一样都只须要三步耶：

第一步，识别点信号，短为 “滴” 长为“嗒”。

第二步，根据 “长间隔” 来切片分组。

第三步，分组数据根据对应表转化出最终结果。

3、撸代码，优化后版本（完整在线示例）

开始前要作好热身活动：

Morse 的最小单元，"." 表明嘀，"-" 表明嗒，点击事件用 Down 表明 mousedown，Up 表明 mouseup。
200ms 间隔用来区别嘀嗒，1s 间隔用来区分一个 Morse 单元组的结束。

// 点信号 = Down - Up = 间隔 < 200ms ？"." : "-"; 
// Down <200ms Up >1s = "." = E
// Down <200ms Up <1s Down >200ms Up >1s = ".", "-" = A

// 直接使用 fromEvent 操做符，来生成点击操做的流，而后用 map 操做符转化成时间戳，
// takeUntil 用来控制流的结束，避免重复订阅。

const clickBegin$ = fromEvent(this.sendButtonElementRef.nativeElement, 'mousedown')
  .pipe(
    takeUntil(this.onDestroy$),
    map(n => Date.now())
  )
const clickEnd$ = fromEvent(this.sendButtonElementRef.nativeElement, 'mouseup')
  .pipe(
    takeUntil(this.onDestroy$),
    map(n => Date.now())
  )

第一步，识别点信号为 “滴” “嗒”

前面代码已经拿到点击事件的流，而且用 "map" 操做符，把数据转化为当前的时间戳。

下面开始计算 Down & Up 之间的间隔时间，思考，合并两个流的的操做符有哪些呢？

1. forkJoin、concat ？

须要两个流 complate 状态后才返回数据，不适应数据持续输出的场景。

1. merge ？

Down & Up 的时间戳不会同时得到，还须要处理存储的问题，不彻底适应场景。

1. combineLatest ？

知足数据持续输出，知足同时得到，哎哟，还不错。
可是这个操做符的特色是，会缓存上一次的值，因此第二次 Down 也会得到到数据，Up - Down 也就会为负值，取绝对值后能够用来判断是否 >1s，来区分一个 Morse 单元组的结束。

1. zip ？

哎呀哈，这个更合适呢，盘它！
单词选的很到位，这个操做符功能能够理解为像拉链同样，确保得到数据每一次都是一个纯净的 Down & Up。
可是须要注意 zip 会自动缓存数据，例如 zip(A$, B$)，A$收到的数据一直比B$多太多，有内存溢出风险，就像拉错位的拉链，很蓝瘦。

// zip的实现
zip(clickBegin$, clickEnd$)
    .pipe(
    // 计算 Down - Up 间隔时间
    map(this.toTimeDiff),
    // 根据间隔时间，转化为嘀嗒替代字符 "." "-"
    map(this.msToMorseCharacter)
    )
    .subscribe(result => {
      // 发送到主信号流
      morseSignal$.next(result);
    });

第二步，根据 “长间隔” 来切片分组

分组的操做符有哪些？

1. partition？

根据函数拆成两个流。

1. groupBy？

根据函数拆成 n 个流。

1. window？

根据流拆成 n 个流。以上各位都打扰了，我还要本身处理数据缓存，再见。

1. buffer？

哇，初恋般的感受，用流控制来作切片数据成数组，拿到数组只须要 join 一下就好，就能够去去匹配对应表了，好棒！
“长间隔”的切片流，怎么得到呢？拿出法宝 debounceTime(1000) ，当点击的 Down Up 周期完成后，间隔 1s 就认为是一个Morse 单元组的结束。
而后又遇到了问题，怎么判断一个点击周期呢？不用单纯用 Up ，由于下一个 Down Up 周期可能会超出 1s，就会致使切片时机错误。因此模拟了点击持续的流 clickKeeping$，用 switchMap 替换为新的流且不影响原来的流，timer 产生一个小于 1s 间隔的持续流信号，用 takeUntil 在 Up 事件流 clickEnd$ 后把整个流结束。

// 点击持续状态流
const clickKeeping$ = clickBegin$
    .pipe(
        // 替换为新的流，不影响原来的流
        switchMap(() => {
            // 定时在持续发送数据，维持点击中状态
            return timer(0, morseTimeRanges.lessThenlongBreak).pipe(
                // 直到 Up 后结束点击状态
                takeUntil(clickEnd$)
            );
        })
    )

// “长间隔”的切片流
const morseBreak$ = clickKeeping$.pipe(
    debounceTime(morseTimeRanges.longBreak)
);

// 得到 Morse 单元组
morseSignal$
    .pipe(
        // 切片分组主信号流
        buffer(morseBreak$) // 转化为，例如 ['.', '.', '.']
    )

第三步，分组数据根据对应表转化出最终结果

join('') Morse 单元组去匹配对应表，很简单不用说。

错误发生在 switchMap 中，分支流报错，可是主流不会收到影响，而后用 catchError 捕捉错误。

// Morse 单元组去匹配对应表
private translateSymbolToLetter = morseArray => {
    const morseCharacters = morseArray.join('');
    const find = morseTranslations.find(n => n.symbol === morseCharacters)
    // 这里 find 可能为 undefined 致使报错，可是错误会被 catchError 捕捉
    return find.char;
}

// 转化+错误处理，最终完成
morseSignal$
    .pipe(
        buffer(morseBreak$),
        switchMap(n => {
            return of(n).pipe(
                // 只为了 Demo 演示中的展现用
                tap(n => this.lastMorseGroupCharacters = n.join(' ')),
                // 转化成对应表中字符
                map(this.translateSymbolToLetter),
                // 捕捉错误
                catchError(n => {
                    return of(morseCharacters.errorString);
                })
            )
        })
    )
    .subscribe(result => {
        // 输出最终转化结果
        this.morseLog.push(result);
        console.log('结果：', result)
    });

4、解读 Michael Hladky 大神的示例

总体上，把 “嘀嗒” “短间隔” “长间隔” 都转化成替代符，过滤无用的替代符，而后 filter “长间隔” 替代符的流，来作 buffer 切片数据。其余还有由于使用 combineLatest 操做符致使的不一样。

// 识别 “嘀” “嗒”
const morseCharFromEvents$ = observableCombineLatest(this.startEvents$, this.stopEvents$)
    .pipe(
        // 计算 mousedown mouseup 时间间隔
        map(this.toTimeDiff),
        // 转化成标识符
        map(this.msToMorseChar),
        // 过滤 Morse 单元组中的 “短间隔“ 标识符
        filter(this.isCharNoShortBreak as any)
    );

// 主信号流
this.morseChar$ = observableMerge(morseCharFromEvents$, this.injectMorseChar$)

// 识别 “长间隔“ 标识符，来做为切片流
const longBreaks$ = this.morseChar$
    .pipe(filter(this.isCharLongBreak as any));

// 切片成 Morse 单元组
this.morseSymbol$ = this.morseChar$
    .pipe(
        buffer(longBreaks$),
        map(this.charArrayToSymbol),
        filter(n => (n !== '') as any)
    )

// 错误处理 + 标识符对应表转化
this.morseLetter$ = this.morseSymbol$
    .pipe(
        switchMap(n => observableOf(n).pipe(this.saveTranslate('ERROR')))
    );

// Up 后补4个 “长间隔“ 标识符，用来作 Morse 单元组的结束
const breakEmitter$ = observableTimer(this.msLongBreak, this.msLongBreak)
    .pipe(
        mapTo(this.mC.longBreak),
        take(4)
    );
this.stopEventsSubject
    .pipe(
        switchMapTo(
          breakEmitter$.pipe(takeUntil(this.startEventsSubject))
        )
    )
    .subscribe(n => this.injectMorseChar(n));

总结

下图是读完《深刻浅出RxJS》后的学习笔记，标注了一些操做符的快速记忆特色，方便使用的适合查阅。

本文做者：甄帅
文章来源：Worktile技术博客

文章转载请注明出处。