Typescript實現單例之父類呼叫子類

設計要求

1. 在程式中,需要一個物件可以全域性使用,並且只有一個例項
2. Breakpoint 類是一個可以被繼承的類,然後子類必須實現 updateView函式
3. updateView 這個函式可以被自動呼叫,當視窗發生變化的時候

構思

UML 圖

1. Layout 是一個單例類,也就是全域性只能有一個物件。

2. Breakpoint 是一個抽象類。

實現

Layout類

import { Observable, fromEvent } from 'rxjs';
import { map, throttleTime } from 'rxjs/operators';

class Layout {
    private static instance = new Layout();
    private _breakpointObserver$: Observable<number>;
    private constructor() {
        this._breakpointObserver$ = fromEvent(window, 'resize').pipe(
            throttleTime(60),
            map((event: any) => {
                return event.target.innerWidth;
            })
        );
    }
    static get getInstance (): Layout {
        return Layout.instance;
    }

    get breakpointObserver(): Observable<number> {
        return Layout.instance._breakpointObserver$;
    }
}
 

Breakpoint類

abstract class Breakpoint {

    private layout = Layout.getInstance;
    constructor() {
        this.layout.breakpointObserver.subscribe( (width) => {
            this.updateView(width);
        });
    }
    abstract updateView(width: number): void;
}

Test類

import { Breakpoint } from '../../core/breakpoint';

class Test extends Breakpoint {
  updateView(width) {
    console.log(width);
  }
}

 

測試環境為 Angular，開啟介面，改變視窗變化後，updateView 函式會被自動執行。