sos摩斯密码(sos摩斯密码怎么写)

参加了2018 ngChina开发者大会，特别喜欢奥地利帅哥Michael Hladky分享的RxJS。现在我拿出来研究工作坊的内容(工作坊Demo的地址)。结合这个例子，我做了一个实现更简单，逻辑更直观的改进版。

1.莫尔斯密码是什么？

知道的可以跳过下一章。

莫尔斯电码是一种时断时续的信号代码。这种信号码通过不同的排列组合来表达不同的英文字母、数字、标点符号等等。地球人都知道SOS求救信号，就是莫尔斯，三短(s)三长(o)三短(s)。

信号对应表如下:

二、业务逻辑分析

分析的关键步骤，巧合的是，和把大象放进冰箱一样，只需要三个步骤:

第一步，识别点信号，短的是“滴”，长的是“点”。

第二步，按照“长间隔”切片分组。

步骤3，根据对应表将分组后的数据转换成最终结果。

三。代码，优化版本(完整的在线示例)

开始前做热身活动:

莫尔斯电码的最小单位。代表哔声，“-”代表点击，点击事件用Down代表鼠标按下，用Up代表鼠标抬起。200ms间隔用于区分嘀嗒声，1s间隔用于区分一个莫尔斯单位组的结束。

// 点信号 = 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”操作符将数据转换为当前时间戳。

让我们开始计算下&什么是上区间，思维，以及合并两个流的操作符？

forkJoin、concat ？ 需要两个流 complate 状态后才返回数据，不适应数据持续输出的场景。merge ？ Down & Up 的时间戳不会同时获得，还需要处理存储的问题，不完全适应场景。combineLatest ？ 满足数据持续输出，满足同时获得，哎哟，还不错。 但是这个操作符的特点是，会缓存上一次的值，所以第二次 Down 也会获得到数据，Up - Down 也就会为负值，取绝对值后可以用来判断是否 >1s，来区分一个 Morse 单元组的结束。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); });

第二步，按照“长间隔”切片分组

分组的运算符有哪些？

partition？ 根据函数拆成两个流。groupBy？ 根据函数拆成 n 个流。window？ 根据流拆成 n 个流。以上各位都打扰了，我还要自己处理数据缓存，再见。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$) // 转化为，例如 ['.', '.', '.'] )

步骤3，根据对应表将分组后的数据转换成最终结果。

加入(‘’)莫尔斯单位组匹配对应的表格，很简单，不用多说。

switchMap出现错误，支流报错，但主流不会受影响，然后用catcher捕捉错误。

// 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.解读迈克尔·赫拉斯基的例子

整体来说，把“滴答”、“短间隔”、“长间隔”转换成替代，过滤无用的替代，再过滤“长间隔”替代的流，做缓冲切片数据。使用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技术博客