离开页面时未保存表单时发出警报（重构）

Question

当用户在View中具有“未保存”表单时，我有提醒用户的代码

这是做到这一点的脚本

  import { __ } from "./translation";
export class Unsave {
    private unsaved: boolean = false;
    public register(): void {
        $(":button, :submit").on("click", () : void => {
            window.onbeforeunload = (): void => null;
        });
        $(":input" || ":checked").change(() => {
            this.unsaved = true;
        });
    }
    public unloadPage() : string {
        if (this.unsaved) {
            return __("Du har olagrade ändringar på den här sidan. Vill du lämna den här sidan och kasta bort dina ändringar eller stanna kvar på den här sidan?");
        }
    }

}

这就是我在主脚本中如何称呼它

 const unsaveChecker = new Unsave();
unsaveChecker.register();
window.onbeforeunload = () => unsaveChecker.unloadPage();

我如何重构它以仅在主脚本中编写Unsave.*** ？

Answer 1

我找到了一种重构此代码的方法

这是代码

export class Unsave {
private static unsaved: boolean = false;
public static unsave_check(): void {
    $(":button, :submit").on("click", () : void => {
        window.onbeforeunload = (): void => null;
    });
    Unsave.unsaved = false;
    $(":input" || ":checked").change(() => {
        Unsave.unsaved = true;
    });
    window.onbeforeunload = (): string => this.unloadPage();
}
public static unloadPage() : string {
    if (Unsave.unsaved) {
        return __("Du har olagrade ändringar på den här sidan. Vill du lämna den här sidan och kasta bort dina ändringar eller stanna kvar på den här sidan?");
    }
}

}

然后在主脚本中添加

    Unsave.unsave_check();

更新

一些重构

您可以使用bind / unbind功能

export class Unsave {
private static unsaved: boolean = false;
public static unsave_check(): void {
    $(":button, :submit").on("click", () : void => {
        $(window).unbind("beforeunload");
    });
    Unsave.unsaved = false;
    $(":input" || ":checked").change(() => {
        Unsave.unsaved = true;
    });
    $(window).bind("beforeunload", (): string => {
        return this.unloadPage();
    });
}
public static unloadPage() : string {
    if (Unsave.unsaved) {
        return __("Du har olagrade ändringar på den här sidan. Vill du lämna den här sidan och kasta bort dina ändringar eller stanna kvar på den här sidan?");
    }
}

}