typescript 디자인 모드 - 관찰자 모드

1348 단어 typescript
패턴 정의
대상 간 에 한 쌍 이상 의 의존 을 정의 합 니 다. 그러면 대상 이 상 태 를 바 꾸 면 의존 하 는 대상 은 알림 을 받 고 자동 으로 업 데 이 트 됩 니 다.
필드 사용
파일 업로드 및 업로드 진행 표시
예시
interface Progress {
    doProgress(percent: number);
}
class UploadFile {
    protected file: File;
    protected progresses: Progress[];
    protected spliteSize: number;
    constructor(file: File, progresses: Progress[], spliteSize: number = 1024) {
        this.file = file;
        this.progresses = progresses;
        this.spliteSize = spliteSize;
    }
    public start() {
        this.split();
    }
    protected split() {
        let splitNum = Math.ceil(this.file.size / this.spliteSize);
        for(let i = 0; i < splitNum; i++) {
            this.upload(i * this.spliteSize);
            this.observeProgress(i/splitNum);
        }
    }
    protected upload(start: number) {
        // ……
    }
    protected observeProgress(percent: number) {
        if(Object.prototype.toString.call(this.progresses) == '[object Arrary]') {
            for(let observe of this.progresses){
                observe.doProgress(percent);
            }
        }
    }
}
class Component implements Progress{
    public OnClick(file: File) {
        let fileUpload = new UploadFile(file, [this]);
    }
    doProgress() {
        // ***        
    }
}

느낌 이 이상 하 다

좋은 웹페이지 즐겨찾기