学步园

在我们Web 前端编程过程中，有时候需要动态加载/卸载 javascript 脚本文件和css 文件。比如，我们需要实现Client Silde 的多语言化的切换，网站皮肤的动态切换等。下面，结合Javasrcript 面向对象编程，做了一些Helper Class来实现JavaScript/css文件的动态加载/卸载:

// JavaScriptLoader-Singleton-,Timo.Lee,Timo.li.icon@gmail.com
var Timo = window.Timo || {};
Timo.Html=window.Timo.Html || {};
Timo.Html.ResourceLoader = (function() {
    //Private
    function RegisterJavaScript(URL) {
        var JsFile = document.createElement("script");
        JsFile.setAttribute("type", "text/javascript");
        JsFile.setAttribute("src", URL);
        document.getElementsByTagName("head")[0].appendChild(JsFile);
        return JsFile;
    } //eo end
    function RegisterCss(URL) {
        var CssFile = document.createElement("link");
        CssFile.setAttribute("rel", "stylesheet");
        CssFile.setAttribute("type", "text/css");
        CssFile.setAttribute("href", URL);
        document.getElementsByTagName("head")[0].appendChild(CssFile);
        return CssFile;
    } //eo end
    function ReplaceJavaScript(OriginalURL, NewURL) {
        var scriptList = document.getElementsByTagName("script");
        for (var i = scriptList.length; i >= 0; i--) {
            if (scriptList[i] && scriptList[i].getAttribute("src") != null && scriptList[i].getAttribute("src").indexOf(OriginalURL) != -1) {
                var newScript = RegisterJavaScript(NewURL);
                scriptList[i].parentNode.replaceChild(newScript, scriptList[i]);
            }
        }
    } //eo end
    function ReplaceCss(OriginalURL, NewURL) {
        var cssList = document.getElementsByTagName("link");
        for (var i = cssList.length; i >= 0; i--) {
            if (cssList[i] && cssList[i].getAttribute("href") != null && cssList[i].getAttribute("href").indexOf(OriginalURL) != -1) {
                var newCss = RegisterCss(NewURL);
                cssList[i].parentNode.replaceChild(newCss, cssList[i]);
            }
        }
    } //eo end
    function RemoveJavaScript(URL) {
        var scriptList = document.getElementsByTagName("script");
        for (var i = scriptList.length; i >= 0; i--) {
            if (scriptList[i] && scriptList[i].getAttribute("src") != null && scriptList[i].getAttribute("src").indexOf(URL) != -1) {
                scriptList[i].parentNode.removeChild(scriptList[i]);
            }
        }
    } //eo end
    function RemoveCss(URL) {
        var cssList = document.getElementsByTagName("link");
        for (var i = cssList.length; i >= 0; i--) {
            if (cssList[i] && cssList[i].getAttribute("href") != null && cssList[i].getAttribute("href").indexOf(URL) != -1) {
                cssList[i].parentNode.removeChild(cssList[i]);
            }
        }
    } //eo end
    return {
        RESOURCE_TYPE_CSS: "css",
        RESOURCE_TYPE_JavaScript: "javascript",
        //pulibc
        LoadResource: function(URL, ResourceType) {
            if (!ResourceType) {
                new Error("Missing Parameter ResourceType,The ResourceType would be [css] or [javascript].");
                return;
            }
            if (!URL || URL == "") {
                new Error("Missing Parameter URL.");
                return;
            }
            switch (ResourceType) {
                case "javascript":
                    RegisterJavaScript(URL);
                    break;
                case "css":
                    RegisterCss(URL);
                    break;
                default:
                    break;
            }

        } //eo end
       ,
        //public
        ReplaceResource: function(URL, ResourceType) {
            if (!ResourceType) {
                new Error("Missing Parameter ResourceType,The ResourceType would be [css] or [javascript].");
                return;
            }
            if (!URL || URL == "") {
                new Error("Missing Parameter URL.");
                return;
            }
            switch (ResourceType, OriginalURL, NewURL) {
                case "javascript":
                    ReplaceJavaScript(OriginalURL, NewURL);
                    break;
                case "css":
                    ReplaceCss(OriginalURL, NewURL);
                    break;
                default:
                    break;
            }
        } // eo end
       ,
        //public
        RemoveResource: function(URL, ResourceType) {
            if (!ResourceType) {
                new Error("Missing Parameter ResourceType,The ResourceType would be [css] or [javascript].");
                return;
            }
            if (!URL || URL == "") {
                new Error("Missing Parameter URL.");
                return;
            }
            switch (ResourceType) {
                case "javascript":
                    RemoveJavaScript(URL);
                    break;
                case "css":
                    RemoveCss(URL);
                    break;
                default:
                    break;
            }
        } //eo end
    };
})(); 

 

使用方法：

 <title>Html Resource Loader Demo</title>
    <script type="text/javascript" src="../JavaScript/Utils/Timo.Html.ResourceLoader.js"></script>
    <script type="text/javascript">
        window.onload = function() {
            //AppInit
        Timo.Html.ResourceLoader.LoadResource("/JavaScript/Test/Demo.js", Timo.Html.ResourceLoader.RESOURCE_TYPE_JavaScript);
        }
    </script>

 

END…..