• 智能计数器
    • 原生 JS
      • HTML
  • Angular 版本
    • HTML
  • 使用到的操作符

    智能计数器

    一个在页面上带有动态更新数字效果的有趣元素就是智能计数器，也可以称之为里程表效果。不采用上下跳数的方式，而是快速地清点到期望的数字，这能达到一种很酷的效果。能做到这点的流行库的其中一个就是由 Hubspot 所写的 odometer 。让我们来看看如何使用短短几行 RxJS 代码来实现类似的效果。

    智能计数器 - 图1

    原生 JS

    ( JSBin |
    JSFiddle )

    1. // 工具函数
    2. const takeUntilFunc = (endRange, currentNumber) => {
    3.   return endRange > currentNumber
    4.     ? val => val <= endRange
    5.     : val => val >= endRange;
    6. };
    8. const positiveOrNegative = (endRange, currentNumber) => {
    9.   return endRange > currentNumber ? 1 : -1;
    10. };
    12. const updateHTML = id => val => (document.getElementById(id).innerHTML = val);
    13. // 显示
    14. const input = document.getElementById('range');
    15. const updateButton = document.getElementById('update');
    17. const subscription = (function(currentNumber) {
    18.   return fromEvent(updateButton, 'click').pipe(
    19.     map(_ => parseInt(input.value)),
    20.     switchMap(endRange => {
    21.       return timer(0, 20).pipe(
    22.         mapTo(positiveOrNegative(endRange, currentNumber)),
    23.         startWith(currentNumber),
    24.         scan((acc, curr) => acc + curr),
    25.         takeWhile(takeUntilFunc(endRange, currentNumber));
    26.       )
    27.     }),
    28.     tap(v => (currentNumber = v)),
    29.     startWith(currentNumber)
    30.   )
    31.   .subscribe(updateHTML('display'));
    32. })(0);
    HTML
    1. <input id="range" type="number">
    2. <button id="update">Update</button>
    3. <h3 id="display">0</h3>

    我们可以轻易地获取我们的原生 JS 所写的智能计数器并将其包装在任何流行的基于 UI 库中。下面是 Angular 版本的智能计数器，它接收一个更新结束范围的 Input 输入属性并执行适当的转换。

    Angular 版本

    (
    StackBlitz
    )

    1. import { Component, Input, OnDestroy } from '@angular/core';
    2. import { Subject } from 'rxjs/Subject';
    3. import { timer } from 'rxjs/observable/timer';
    4. import { switchMap, startWith, scan, takeWhile, takeUntil, mapTo } from 'rxjs/operators';
    6. @Component({
    7.   selector: 'number-tracker',
    8.   template: `
    9.     <h3> {{ currentNumber }}</h3>
    10.   `
    11. })
    12. export class NumberTrackerComponent implements OnDestroy {
    13.   @Input()
    14.   set end(endRange: number) {
    15.     this._counterSub$.next(endRange);
    16.   }
    17.   @Input() countInterval = 20;
    18.   public currentNumber = 0;
    19.   private _counterSub$ = new Subject();
    20.   private _onDestroy$ = new Subject();
    22.   constructor() {
    23.     this._counterSub$
    24.       .pipe(
    25.         switchMap(endRange => {
    26.           return timer(0, this.countInterval).pipe(
    27.             mapTo(this.positiveOrNegative(endRange, this.currentNumber)),
    28.             startWith(this.currentNumber),
    29.             scan((acc: number, curr: number) => acc + curr),
    30.             takeWhile(this.isApproachingRange(endRange, this.currentNumber))
    31.           )
    32.         }),
    33.         takeUntil(this._onDestroy$)
    34.       )
    35.       .subscribe((val: number) => this.currentNumber = val);
    36.   }
    38.   private positiveOrNegative(endRange, currentNumber) {
    39.     return endRange > currentNumber ? 1 : -1;
    40.   }
    42.   private isApproachingRange(endRange, currentNumber) {
    43.     return endRange > currentNumber
    44.       ? val => val <= endRange
    45.       : val => val >= endRange;
    46.   }
    48.   ngOnDestroy() {
    49.     this._onDestroy$.next();
    50.     this._onDestroy$.complete();
    51.   }
    52. }
    HTML
    1. <p>
    2.   <input type="number"
    3.     (keyup.enter)="counterNumber = vanillaInput.value"
    4.     #vanillaInput>
    5.   <button
    6.     (click)="counterNumber = vanillaInput.value">
    7.     Update number
    8.   </button>
    9. </p>
    10. <number-tracker [end]="counterNumber"></number-tracker>

    使用到的操作符

    • fromEvent
    • map
    • mapTo
    • scan
    • startWith
    • switchMap
    • takeWhile