Typescript實現單例之父類呼叫子類
阿新 • • 發佈:2018-12-17
Typescript實現單例之父類呼叫子類
設計要求
- 在程式中,需要一個物件可以全域性使用,並且只有一個例項
- Breakpoint 類是一個可以被繼承的類,然後子類必須實現 updateView函式
- updateView 這個函式可以被自動呼叫,當視窗發生變化的時候
構思
UML 圖
-
Layout 是一個單例類,也就是全域性只能有一個物件。
-
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 函式會被自動執行。