过多的javascript代码

Question

On my asp.net pages i need to control for Dirty controls. I'm not that good in javascript so i found a solution on the internet for doing that by doing so :

<script type="text/javascript" language="javascript">
    //Demo of completely client side dirty flag.

    function setDirty() {
        document.body.onbeforeunload = showMessage;
        //debugger;
        document.getElementById("DirtyLabel").className = "show";
    }

    function clearDirty() {
        document.body.onbeforeunload = "";
        document.getElementById("DirtyLabel").className = "hide";
    }


    function showMessage() {
        return ""
    }

    function setControlChange() {
        if (typeof (event.srcElement) != 'undefined') {
            event.srcElement.onchange = setDirty;
        }
    }

    document.body.onclick = setControlChange;
    document.body.onkeyup = setControlChange;

    window.onunload = function (sender, eventArgs) {
        if (window.opener != null) {
            window.opener.ClearBlocker();

            if (window.opener.TempClientReturnFunction != null)
                window.opener.TempClientReturnFunction = window.opener.ReturnFunction;
        }
    }
</script>

but if i have like 7 pages where i need to control for Dirty Controls, its gonna be too much redundant code. Are there any ways to create some class/library from where i can just call functions or are there maybe even smarter way of doing that?

Answer 1

As already suggested, put your code into a separate file, then include on every page that needs it.

Something else you might like to consider is to adopt the "module" pattern, thereby putting no more than one member into the javascript global namespace.

Modulized, your code will look something like this:

var DIRTY_CONTROL = (function(){ //module pattern
    // *** Private members ***
    var dirtyLabelId = "DirtyLabel";
    var showMessage = function() {
        return "";
    };
    var setDirty = function(id) {
        id = id || dirtyLabelId;
        document.body.onbeforeunload = showMessage;
        //debugger;
        document.getElementById(id).className = "show";
    }
    var clearDirty = function clearDirty(id) {
        id = id || dirtyLabelId;
        document.body.onbeforeunload = "";
        document.getElementById(id).className = "hide";
    };
    var setControlChange = function(e) {
        e = e || window.event;
        var target = e.target || e.srcElement;
        target.onchange = setDirty;
    };
    var init = function() {
        document.body.onclick = document.body.onkeyup = setControlChange;
        window.onunload = function() {
            if (window.opener) {
                if (window.opener.ClearBlocker) {
                    window.opener.ClearBlocker();
                }
                if (window.opener.ReturnFunction) {
                    window.opener.TempClientReturnFunction = window.opener.ReturnFunction;
                }
            }
        };
    };
    // *** Public members ***
    //Expose private members here, as required.
    return {
        clearDirty: clearDirty,
        setDirty: setDirty,
        init: init
    };
})();

untested

By convention, the module's name is capitalized.

Call public functions as follows:

DIRTY_CONTROL.init();

or

DIRTY_CONTROL.clearDirty();

Answer 2

Put that JS block into a JS file like Dirty.js, then use the following code on every page you want to use it on.

<script src="Dirty.js"></script>

You can add it between the tag, or at the end of the body depending on when you need to actually call it.