JavaScript物件導向編程實戰01 JavaScript Resource Loader

在我們Web 前端編程過程中，有時候需要動態載入/卸載 javascript 指令檔和css 檔案。比如，我們需要實現Client Silde 的多語言化的切換，網站皮膚的動態切換等。下面，結合Javasrcript 物件導向編程，做了一些Helper Class來實現JavaScript/css檔案的動態載入/卸載:

// JavaScriptLoader-Singleton-,Timo.Lee,Timo.li.icon@gmail.comvar 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…..